首页 > 开发 > JS > 正文

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

2024-05-06 16:41:26
字体:
来源:转载
供稿:网友

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

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

前台代码:

<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;"        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"                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函数中就可以了,函数执行时表格就可以绑定数据了

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


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表