easyui的基本用法

Posted 2020-07-28 学如逆水行舟,不进则退

之前有用过extjs,最近发现easyui和fineui和extjs比较类似,并且稍微简单一点,所以考虑使用.

以下是项目中的具体简单应用

function callback2d(data) {//data为一个json数据.分页加上如下代码就好了.
//TODO:待解决问题:当没有查询出数据时,不能进入回调函数
$("#dg").datagrid({
columns: [[{ field: "bh", title: "XX" }, { field: "layType", title: "YY" }, { field: "attr", title: "ZZ", formatter: function (value, row) { return value[‘SECTION‘]; } }, { field: "geo", title: "geo", hidden: true }]],
rownumbers: true,//设置为true将显示行数。
loadMsg: "加载中,请等待...",//当从远程站点载入数据时，显示的一条快捷信息。
pagination: true,//这里添加分页控件
data: data.slice(0, 20),
rownumbers: true,//显示行数
singleSelect: true,//只允许选择一行
onLoadSuccess: function () {//加载成功后
//alert("加载成功!");
if (data.length > 0) {
$("#detailData").attr("disabled", false);
$("#importExcelBtn").attr("disabled", false);
}
else {
alert("无查询数据");
$("#detailData").attr("disabled", true);
$("#importExcelBtn").attr("disabled", true);

}
},
onDblClickRow: function (rowIndex, rowData) {//选中一行后
parent.parent.locatepipetomap2d(rowData.bh, rowData.layType, rowData.layerName);
}
});

var pager = $("#dg").datagrid("getPager");
pager.pagination({
total: data.length,//数据总条数
pageSize: 20,//每个页面个数
showPageList: false,//定义是否显示可选择的每页记录数。
showRefresh: false,//是否显示刷新
displayMsg: ‘第{from}-{to}条数据,共{total}条数据‘ + " ",//显示插件上的分页信息
beforePageText: "", //在输入框之间显示的符号 不填写会有默认值
afterPageText: "共{pages}页",//在输入框之后显示的符号 不填写会有默认值
onSelectPage: function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#dg").datagrid("loadData", data.slice(start, end));
pager.pagination(‘refresh‘, {
total: data.length,
pageNumber: pageNo
});
}
});
}