您的位置:首页 > 产品设计 > UI/UE

EasyUI-datagrid中load,reload,loadData方法的区别

2016-12-02 09:14 579 查看
好久不写程序,今天又开始弄一个小功能,因为版本的老旧,网上很多文档不适用。重新总结一下

EasyUI比较常用,其中的datagrid比较复杂,它有其中有load,reload,loadData这三个方法,它们都有相同的功能,都是加载数据的,但又有区别。

 

load方法,比如我已经定义一个datagrid的id为grid,那这个方法的使用方式为

$(“#grid”).datagrid(“load”,{ });

它的参数为一个json对象,里面写的是你要传输的参数的键值对,调用这个方法来加载数据的时候,它传给后台的分页信息是从第一页开始的。

reload方法,使用方式也跟load的一样

$(“#grid”).datagrid(“reload”,{ });

看它的名字应该就可以知道它的做用了,没错,它跟load一样有加载数据功能,也一样的传参数,但它传给后台的分布信息是当前的页码,就是实现刷新当前页的功能。

loadData方法,这个方法有比较大的不同,首先它加载的本地数据,就是不会跟后台什么的有交互,它的使用方式是

$(“#grid”).datagrid(“loadData”,{ “total”:”30″,rows:[] });

看到没,它是比较灵活的,可以设置分页信息的,total就是行数嘛,当然你也可以设置它的当前页,而它那个rows属性设的就是你所要加载的行的集合。

 

var bbc="";

$(function(){

$("#test").datagrid({

loadFilter: function (data){bbc=data;return bbc;},

/*loadFilter: function (data) {

for (var i = 0; i < data.rows.length; i++) {

for (var att in data.rows[i]) {

if (typeof (data.rows[i][att]) == "string") {

data.rows[i][att] = data.rows[i][att].replace(/</g, "<").replace(/>/g, ">");

}

}

}

return data;

} ,*/

title:'My DataGrid',

//iconCls:'icon-save',

//nowrap: false,

//striped: true,

//collapsible:true,

url:'datagrid_data001.json',

//sortName: 'code',

//sortOrder: 'desc',

//remoteSort: false,

singleSelect:true,

rownumbers:true,

idField:'code',

frozenColumns:[[

/*{field:'ck',checkbox:true},*/

{title:'退货单号',field:'code',width:80,sortable:true, rowspan:2}

]],

columns:[[

{title:'退货单明细',colspan:3},

{field:'opt',title:'操作',width:100,align:'center', rowspan:2,

formatter:function(value,rec){

return '<span style="color:#08f;cursor:pointer;" onclick="kankan(this)">查看</span>';

}

}

],[

{field:'name',title:'申请人',width:100},

{field:'money',title:'申请金额',width:100,rowspan:2,sortable:true,

sorter:function(a,b){

return (a>b?-1:1);

}

},

{field:'col4',title:'审核状态',width:100,rowspan:2}

]]

});

})

function kankan(she){

var bb=$(she).parent().parent().parent().attr("datagrid-row-index");

/*alert(bb);

$("#test").datagrid('selectRow',0)

var row=$("#test").datagrid('getSelected');

alert(row.id)*/

var ccb={total:bbc.total,rows:[bbc.rows[bb]]}

/*var ccb='"total"';

ccb=ccb+":";

ccb=ccb+bbc.total;

ccb=ccb+",";

ccb=ccb+'"rows":';

ccb=ccb+"[";

ccb=ccb+bbc.rows[bb];

ccb=ccb+"]";*/

$('#win').window({ 

width:600, 

height:400, 

modal:true,

collapsible:false,

minimizable:false,

maximizable:false

});

//$("#win").text(item.address); 

$("#win").datagrid({

//rowStyler:function(bb,bb){return 'background:#fff'},

//url:'datagrid_data001.json',

singleSelect:true,

columns:[[{title:'退货单号',field:'code',width:80,align:'center'},

{field:'name',title:'申请人',width:100,align:'center'},

{field:'money',title:'申请金额',width:100,align:'center'},

{field:'col4',title:'审核状态',width:100,align:'center'},

{field:'address',title:'地址',width:180,align:'center'}

]]

})

//alert(bbc.total);

$(function(){ $('#win').datagrid('loadData', ccb); /*alert('here');*/})

}

 

数据源



"total":10456239, 

"rows":[ 

{"id":"1","code":"001","name":"张一一","money":"$ 129.00","col4":"待审核","address":" Shanghai Pudong China1"}, 

{"id":"2","code":"002","name":"张一二","money":"$ 119.00","col4":"待审核","address":" Anhai Pudong China2"}, 

{"id":"3","code":"003","name":"张一三","money":"$ 128.00","col4":"待审核","address":" Shanghai Pudong China3"}, 

{"id":"4","code":"004","name":"张一四","money":"$ 118.00","col4":"待审核","address":" Anhai Pudong China4"}, 

{"id":"5","code":"005","name":"张一五","money":"$ 109.00","col4":"待审核","address":" Shanghai Pudong China5"}, 

{"id":"6","code":"006","name":"张一六","money":"$ 109.00","col4":"待审核","address":" Anhai Pudong China6"}, 

{"id":"7","code":"007","name":"张一七","money":"$ 159.00","col4":"待审核","address":" Anhai Pudong China7"}, 

{"id":"8","code":"008","name":"张一八","money":"$ 158.00","col4":"待审核","address":" Anhai Pudong China8"}, 

{"id":"9","code":"009","name":"张一九","money":"$ 156.00","col4":"待审核","address":" Shanghai Pudong China9"}, 

{"id":"10","code":"010","name":"张一十","money":"$ 158.00","col4":"待审核","address":" Shanghai Pudong China10"} 



}

html
<body>
<div id="win" title="My Window"></div>
<table id="test"></table>
</body>

loadData : 参数(data) 加载本地数据,旧的行会被移除。
loadFilter : 类型(function) 返回过滤的数据去显示。这个函数需要一个参数'data',表示原始数据。你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: