EasyUI
Datagrid组件在我看来功用依然很强劲的,在自身动用过程中相遇分页请求的题材搅扰了一天才解决,下面我就把自己遇见的题目分享一下

//datagrid数据表格渲染

$(“#dg”).datagrid({
loader: function(param, success, error) {
var pageNumber = param.page;
var pageSize = param.rows;
$.ajax({
type: “get”,
url: url,
dataType: ‘jsonp’,
data: “pageNum=” + pageNumber + “&pageSize=” + pageSize,
success: function(data) {
if(data.code == 0) {
var arr = data.result.content;
$(“#dg”).datagrid(‘loadData’, { total: data.result.page.totalRecord,
rows: arr })
}
},
error: function() {
error.apply(this, arguments);
}
});
}
})

 

盛传的参数有param, success, error可选

此间我最重要拔取了param,param有param.page(页码)和param.rows(每页展现行数)五个特性,由于页面载入之后就要开展询问,所以这多少个参数是必须的;

一 际遇的第一个问题是跨域,这多少个在事先的作品有些过,这里就不赘述了;


其次就是呼吁回的多少怎么渲染到表格中,由于是真分页,所以每一回查询的多寡只是最近页面的数据,并不是负有的数据,不过页脚呈现数据总数必须是具备数据,这样才能就行分页。

最后经过翻看资料发现,loadData方法可以流传一个json格式的数据$(“#dg”).datagrid(‘loadData’,
{ total: data.result.page.totalRecord, rows: arr
}),这样就化解了多少渲染分页请求的问题


由于自身启用了loadMsg属性,即在伏乞后台数据的时候会呈现正在加载的意况,不过请求成功之后此情形并未隐藏,最终经过安装

onLoadSuccess: function(data) {
//查询成功是隐蔽正在加载状态。
$(this).datagrid(“loaded”);
}

在多少加载成功未来隐藏正在加载状态

四 点击下一页举办查询

//点击下一页
$(‘#dg’).datagrid(‘getPager’).pagination({
//刷新按钮执行的操作
onBeforeRefresh: function() {},
onSelectPage: function(pageNumber, pageSize) {
$(“#dg”).datagrid(‘loading’); //展现加载新闻
$.ajax({
type: “get”,
url: url,
dataType: ‘jsonp’,
data: “pageNum=” + pageNumber + “&pageSize=” + pageSize ,
success: function(data) {
if(data.code == 0) {
//数据再次来到成功后填充到表格中
var arr = data.result.content;
$(“#dg”).datagrid(‘loadData’, { total: data.result.page.totalRecord,
rows: arr })
}
},
error: function() {
error.apply(this, arguments);
}
})
}
});

相关文章

网站地图xml地图