Comment lier la source de données Json à l'aide d'EasyUI

Cet article présente principalement l'exemple de code de la source de données Json de liaison DataGrid d'EasyUI. L'éditeur pense qu'il est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

La liaison des données aux tableaux dans EasyUI est la méthode la plus couramment utilisée. L'éditeur partagera les deux méthodes résumées de liaison des tableaux.

Le premier type : les données sont stockées dans l'ensemble de données, chaque ligne correspond à plusieurs valeurs et une boucle est utilisée pour lier les données à la table

Code frontal :

<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题" data-options=" 
        rownumbers:true, 
        singleSelect:true, 
        @*autoRowHeight:false,*@ 
        pagination:true 
        @*pageSize:10*@"> 
      <thead> 
        <tr> 
          <th field="colum1">列1</th> 
          <th field="colum2">列2</th> 
          <th field="colum3">列3</th> 
          <th field="colum4">列4</th> 
          <th field="colum5">列5</th> 
          <th field="colum6">列6</th> 
        </tr> 
      </thead> 
    </table>

Code JS :

(function ($) { 
  function pagerFilter(data) { 
    if ($.isArray(data)) { // is array 
      data = { 
        total: data.length, 
        rows: data 
      } 
    } 
    var target = this; 
    var dg = $(target); 
    var state = dg.data('datagrid'); 
    var opts = dg.datagrid('options'); 
    if (!state.allRows) { 
      state.allRows = (data.rows); 
    } 
    if (!opts.remoteSort && opts.sortName) { 
      var names = opts.sortName.split(','); 
      var orders = opts.sortOrder.split(','); 
      state.allRows.sort(function (r1, r2) { 
        var r = 0; 
        for (var i = 0; i < names.length; i++) { 
          var sn = names[i]; 
          var so = orders[i]; 
          var col = $(target).datagrid(&#39;getColumnOption&#39;, sn); 
          var sortFunc = col.sorter || function (a, b) { 
            return a == b ? 0 : (a > b ? 1 : -1); 
          }; 
          r = sortFunc(r1[sn], r2[sn]) * (so == &#39;asc&#39; ? 1 : -1); 
          if (r != 0) { 
            return r; 
          } 
        } 
        return r; 
      }); 
    } 
    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 
    var end = start + parseInt(opts.pageSize); 
    data.rows = state.allRows.slice(start, end); 
    return data; 
  } 
 
  var loadDataMethod = $.fn.datagrid.methods.loadData; 
  var deleteRowMethod = $.fn.datagrid.methods.deleteRow; 
  $.extend($.fn.datagrid.methods, { 
    clientPaging: function (jq) { 
      return jq.each(function () { 
        var dg = $(this); 
        var state = dg.data(&#39;datagrid&#39;); 
        var opts = state.options; 
        opts.loadFilter = pagerFilter; 
        var onBeforeLoad = opts.onBeforeLoad; 
        opts.onBeforeLoad = function (param) { 
          state.allRows = null; 
          return onBeforeLoad.call(this, param); 
        } 
        var pager = dg.datagrid(&#39;getPager&#39;); 
        pager.pagination({ 
          onSelectPage: function (pageNum, pageSize) { 
            opts.pageNumber = pageNum; 
            opts.pageSize = pageSize; 
            pager.pagination(&#39;refresh&#39;, { 
              pageNumber: pageNum, 
              pageSize: pageSize 
            }); 
            dg.datagrid(&#39;loadData&#39;, state.allRows); 
          } 
        }); 
        $(this).datagrid(&#39;loadData&#39;, state.data); 
        if (opts.url) { 
          $(this).datagrid(&#39;reload&#39;); 
        } 
      }); 
    }, 
    loadData: function (jq, data) { 
      jq.each(function () { 
        $(this).data(&#39;datagrid&#39;).allRows = null; 
      }); 
      return loadDataMethod.call($.fn.datagrid.methods, jq, data); 
    }, 
    deleteRow: function (jq, index) { 
      return jq.each(function () { 
        var row = $(this).datagrid(&#39;getRows&#39;)[index]; 
        deleteRowMethod.call($.fn.datagrid.methods, $(this), index); 
        var state = $(this).data(&#39;datagrid&#39;); 
        if (state.options.loadFilter == pagerFilter) { 
          for (var i = 0; i < state.allRows.length; i++) { 
            if (state.allRows[i] == row) { 
              state.allRows.splice(i, 1); 
              break; 
            } 
          } 
          $(this).datagrid(&#39;loadData&#39;, state.allRows); 
        } 
      }); 
    }, 
    getAllRows: function (jq) { 
      return jq.data(&#39;datagrid&#39;).allRows; 
    } 
  }) 
})(jQuery);

  $.ajax({ 
    type: "get",  //AJAX提交方式 
    url: "路径", 
    datatype: "json", 
    data: "userid=" + "id"+ "&username=" + "name",  //向后台传递参数，无需传递参数就可以删除 
    success: function (data) { 
      var rows = []; 
       
      for (var i = 0; i < data.length; i++) {   //data是返回值的集合 
        rows.push({               //把data数据对应的值压到rows对应数组中 
          colum1: data[i].userid, 
          colum2: data[i].leve, 
          colum3: data[i].Username, 
          colum4: data[i].Tel, 
          colum5: data[i].Mail, 
          colum6: data[i].Explain 
        }); 
      } 
      $(&#39;#dg&#39;).datagrid({ data: rows }).datagrid(&#39;clientPaging&#39;); 
    }, error: function () {            //执行出错时执行的方法 
      $.messager.alert("操作提示", "表格失败，请联系管理员！", "warning"); 
    } 
  });

Appelez la méthode AJAX lorsque vous devez lier la table Une fois AJAX exécuté, la méthode d'affichage des données sera automatiquement appelée et. les données du tableau seront affichées

Deuxième : définissez les noms de colonnes directement dans le frontend et JS, et liez automatiquement

Code frontend :

<table id="dg" class="easyui-datagrid" title="需要显示表格标题 " data-options="         
        rownumbers:true, 
        singleSelect:true, 
        autoRowHeight:false, 
        pagination:true, 
        "> 
        <thead> 
          <tr> 
            <th data-options="field:&#39;colum1&#39;,align:&#39;center&#39;">列名1</th> 
            <th data-options="field:&#39;colum2&#39;,align:&#39;center&#39;">列名2</th> 
            <th data-options="field:&#39;colum3&#39;,align:&#39;center&#39;">列名3</th> 
            <th data-options="field:&#39;colum4&#39;,align:&#39;center&#39;">列名4</th> 
            <th data-options="field:&#39;colum5&#39;,align:&#39;center&#39;">列名5</th> 
            <th data-options="field:&#39;colum6&#39;,align:&#39;center&#39;">列名6</th> 
          </tr> 
        </thead> 
      </table>

JS code :

 $('#dg').datagrid({ 
    url: '路径?Name=' + Name + "&combox=" + combox,  //设置访问后台路径和传递参数，如果没有参数可以删除 
    dataType: 'json', 
    width: "100%", //宽度 
    striped: true, //把行条纹化（奇偶行背景色不同） 
    idField: 'quesID', //标识字段 
    loadMsg: '正在加载用户的信息.......', //从远程站点加载数据是，显示的提示消息 
    pagination: true, //数据网格底部显示分页工具栏 
    singleSelect: false, //只允许选中一行 
    pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表 
    pageSize: 10, //初始化页面尺寸（默认分页大小） 
    pageNumber: 1, //初始化页面（默认显示第一页） 
    beforePageText: '第', //页数文本框前显示的汉字  
    afterPageText: '页 共 {pages} 页', 
    displayMsg: '第{from}到{to}条，共{total}条', 
    columns: [[ //每页具体内容 
          { field: 'colum1', title: '标题1', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum2', title: '标题2', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum3', title: '标题3', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum4', title: '标题4', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum5', title: '标题5', width: "13%", align: 'center', editor: 'text' }, 
          { field: 'colum6', title: ' 标题6 ', width: "13%", align: 'center', editor: 'text' }, 
    ]], 
 
    onLoadSuccess: function (data) { 
 
      //表格加载成功后执行的代码，如果不需要可以删除 
    } 
  })

Mettez le code JS Mettez-le simplement dans une fonction Lorsque la fonction est exécutée, la table peut lier des données

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à tout le monde à l’avenir.

Articles connexes :

Une introduction détaillée aux composants contrôlés et non contrôlés dans React

Comment implémenter un panier d'achat de base à l'aide de la fonction angulaire

Introduction détaillée au routage et au middleware dans node.js

Comment implémenter une animation d'entrée/sortie dans Vue

Interprétation détaillée de la fonction d'entrée exécutée dans webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!