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

2023-09-19 08:21:05 303

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

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

前台代码：




列1
列2
列3
列4
列5
列6

JS代码：

(function($){
functionpagerFilter(data){
if($.isArray(data)){//isarray
data={
total:data.length,
rows:data
}
}
vartarget=this;
vardg=$(target);
varstate=dg.data('datagrid');
varopts=dg.datagrid('options');
if(!state.allRows){
state.allRows=(data.rows);
}
if(!opts.remoteSort&&opts.sortName){
varnames=opts.sortName.split(',');
varorders=opts.sortOrder.split(',');
state.allRows.sort(function(r1,r2){
varr=0;
for(vari=0;ib?1:-1);
};
r=sortFunc(r1[sn],r2[sn])*(so=='asc'?1:-1);
if(r!=0){
returnr;
}
}
returnr;
});
}
varstart=(opts.pageNumber-1)*parseInt(opts.pageSize);
varend=start+parseInt(opts.pageSize);
data.rows=state.allRows.slice(start,end);
returndata;
}

varloadDataMethod=$.fn.datagrid.methods.loadData;
vardeleteRowMethod=$.fn.datagrid.methods.deleteRow;
$.extend($.fn.datagrid.methods,{
clientPaging:function(jq){
returnjq.each(function(){
vardg=$(this);
varstate=dg.data('datagrid');
varopts=state.options;
opts.loadFilter=pagerFilter;
varonBeforeLoad=opts.onBeforeLoad;
opts.onBeforeLoad=function(param){
state.allRows=null;
returnonBeforeLoad.call(this,param);
}
varpager=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;
});
returnloadDataMethod.call($.fn.datagrid.methods,jq,data);
},
deleteRow:function(jq,index){
returnjq.each(function(){
varrow=$(this).datagrid('getRows')[index];
deleteRowMethod.call($.fn.datagrid.methods,$(this),index);
varstate=$(this).data('datagrid');
if(state.options.loadFilter==pagerFilter){
for(vari=0;i
$.ajax({
type:"get",//AJAX提交方式
url:"路径",
datatype:"json",
data:"userid="+"id"+"&username="+"name",//向后台传递参数，无需传递参数就可以删除
success:function(data){
varrows=[];

for(vari=0;i
需要绑定表格时调用AJAX方法，AJAX执行完后会自动调用显示数据方法，表格数据就显示出来了
第二种：直接在前台和JS设置好列名，自动绑定


前台代码：

 



列名1
列名2
列名3
列名4
列名5
列名6




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函数中就可以了，函数执行时表格就可以绑定数据了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐