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

前端之家收集整理的这篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

前台代码

标题" data-options=" rownumbers:true,singleSelect:true,@*autoRowHeight:false,*@ pagination:true @*pageSize:10*@">

JS代码

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

后台传递参数,无需传递参数就可以删除 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 () {            //执行出错时执行的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> 
  $.messager.alert("操作<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>","表格失败,请联系<a href="/tag/guanliyuan/" target="_blank" class="keywords">管理员</a>!","warning"); 
} 

});

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

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

前台代码

显示表格标题 " data-options=" rownumbers:true,autoRowHeight:false,pagination:true,">

JS代码

用户的信息.......',//从远程站点加载数据是,显示提示消息 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',{ field: 'colum3',title: '标题3',{ field: 'colum4',title: '标题4',{ field: 'colum5',title: '标题5',{ field: 'colum6',title: ' 标题6 ',]],onLoadSuccess: function (data) {
  //表格加载成功<a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>,如果不需要可以<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a> 
} 

})

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

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

猜你在找的JavaScript相关文章