easyui对于开发桌面级的WEB应用界面确实十分方便,而且美观。这里着重记录一下datagrid的使用,以及通过前后端配合实现的超简单的数据分页查询方式。
easyui支持直接从后端获取json串并解析成数据。不需要手动处理。十分方便。
前端
对列的声明
用于声明每列的属性
var columns = [[
{
field : 'fieldToBind',
width : 100,
title : 'titleInColumn',
formatter :
function(value, row, index){
//这里根据每列的数据进行处理,返回的串即单元格中显示的内容。也可以拼html来编程<a> 或者<button> 等样式
return row.title;
}
},
{
field:....
....
}
]]
datagrid生成
这里正是初始化并生成表格。
首先html页面中应预留位置
<div class:"easyui-layout" data-option="fit:true">
<div data-option:"region:'center'">
<table id="table" toolbar="#earchbar"></table>
</div>
</div>
直接调用datagrid比较麻烦,因此做一个包装js
$(function (){
var url;
var param;
var tableid;
var initPageSize=10;
var initPageNum=1;
var singleSelect;
/*参数说明
*arg.initPageNum :起始页数,当initPageNum=""时,取默认值initPageNum=1
*arg.initPageSize:每页的初始行数,如果initPageSize="",则取默认值 initPageSize=10
*arg.url :查询的url,不带参数
*arg.param :参数串deviceCode=deviceCode&deviceType=deviceType
*arg.tableid :表格的id,如表格的id="tbquery",则arg.tableid="#tbquery"
*arg.toolbarid :工具栏的id,如表格的id="toolbar",则arg.toolbarid="#toolbar"
* */
$.WifiPage = function (arg) {
//初始化页面
this.init = function () {
//this.init方法,加上了this,就是公有方法了,外部可以访问。
url = arg.url;
param = arg.param;
tableid=arg.tableid;
if(arg.singleSelect!=undefined){
singleSelect = false;
}else{
singleSelect = true;
}
//初始化页面查询数据
if(arg.initPageSize=="")
arg.initPageSize=initPageSize;
if(arg.initPageNum=="")
arg.initPageNum=initPageNum;
requestDataInPagination(initPageNum,arg.initPageSize,arg.url,arg.param,arg.tableid);
//构建表格所有属性
$(arg.tableid).datagrid({
toolbar:arg.toolbarid,
singleSelect : singleSelect,
collapsible : true,
fitColumns : true,
fit:true,
remoteSort : false,
nowrap : false,
striped : true,
pagination: true,
//rownumbers:true,
method:'get',
loadMsg:'数据努力加载中...',
pageSize: arg.initPageSize,
pageList: [arg.initPageSize, arg.initPageSize*2, arg.initPageSize*4],
columns : arg.columns,
height: "100%",
width: "100%",
onSelect:function (rowIndex, rowData){
//用户选择一行的时候触发
if(arg.onSelect!=undefined){
onSelect(rowIndex,rowData);
}
},
onUnselect:function (rowIndex, rowData){
//用户取消选择一行的时候触发
if(arg.onUnselect!=undefined){
onUnselect(rowIndex,rowData);
}
},
onSelectAll:function (rows){
//在用户选择所有行的时候触发
if(arg.onSelectAll!=undefined){
onSelectAll(rows);
}
},
onUnselectAll:function (rows){
//在用户取消选择所有行的时候触发
if(arg.onUnselectAll!=undefined){
onUns