EasyUI的DataGrid绑定Json数据源的示例代码

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。

第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

前台代码：

<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>

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('getColumnOption', sn);
          var sortFunc = col.sorter || function (a, b) {
            return a == b ? 0 : (a > b ? 1 : -1);
          };
          r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 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('datagrid');
        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('getPager');
        pager.pagination({
          onSelectPage: function (pageNum, pageSize) {
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh', {
              pageNumber: pageNum,
              pageSize: pageSize
            });
            dg.datagrid('loadData', state.allRows);
          }
        });
        $(this).datagrid('loadData', state.data);
        if (opts.url) {
          $(this).datagrid('reload');
        }
      });
    },
    loadData: function (jq, data) {
      jq.each(function () {
        $(this).data('datagrid').allRows = null;
      });
      return loadDataMethod.call($.fn.datagrid.methods, jq, data);
    },
    deleteRow: function (jq, index) {
      return jq.each(function () {
        var row = $(this).datagrid('getRows')[index];
        deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
        var state = $(this).data('datagrid');
        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('loadData', state.allRows);
        }
      });
    },
    getAllRows: function (jq) {
      return jq.data('datagrid').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
        });
      }
      $('#dg').datagrid({ data: rows }).datagrid('clientPaging');
    }, error: function () {            //执行出错时执行的方法
      $.messager.alert("操作提示", "表格失败，请联系管理员！", "warning");
    }
  });

需要绑定表格时调用AJAX方法，AJAX执行完后会自动调用显示数据方法，表格数据就显示出来了

第二种：直接在前台和JS设置好列名，自动绑定

前台代码：

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

JS代码：

 $('#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) { 

      //表格加载成功后执行的代码，如果不需要可以删除
    }
  })

把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。