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函数中就可以了，函数执行时表格就可以绑定数据了

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