最近因公司需要,对easyui的动态列实现研究,并在网上查了不少的资料,但都不理想,结合自己的实践,简单介绍下实现过程;
需求特殊点在于:根据数据库的动态表结构,动态的加载datagrid表格,因数据库的表结构是变化的,用传统的加载方式无法实现列随表变化;正所谓难者不会,会者不难,而网上的相关资料比较少,经过大量的实验,最终实现了功能,而且关键代码却非常简单,如下所示:
<script type="text/javascript">
var dataGrid;
var $datagrid = {};
$datagrid.url = "${path }/******/dataGrid";
$datagrid.striped = true;
$datagrid.rownumbers = true;
$datagrid.pagination = true;
$datagrid.singleSelect = true;
$datagrid.idField = "id";
$datagrid.pageSize = 20;
$datagrid.pageList = [ 10, 20, 30, 40, 50 ];
//后台动态请求列信息
function findColumns() {
$.post('${path }/*******/viewColumns', {
}, function(data) {
var columns = new Array();
var arr = data;
$.each(arr, function (i, item) {
columns.push({ "field": arr[i].colname, "title": arr[i].colalias, "width": 100 });
});
$datagrid.columns = new Array(columns);
$('#dataGrid').datagrid($datagrid);
}, 'JSON');
}
</script>
通过以上方法,即可实现easyui的动态列展示,且页面带分页功能;
转载于:https://blog.51cto.com/4695645/1940644