码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-02 21:47:43      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

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, "&lt;").replace(/>/g, "&gt;");
}
}
}
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‘ 特性。

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

标签:

原文地址:http://www.cnblogs.com/huangf714/p/5835669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!