首页 > 代码库 > EasyUI之DataGird动态组合列

EasyUI之DataGird动态组合列

2024-11-20 08:50:39   203人阅读

      Dojo、ExtJS、Jquery（EasyUI、jQgrid、ligerui、DWZ）、还有asp.net中的服务器控件、当然也少不了HTML 标签之table标签了。其中dojo、ExtJS、Jquery这三者应该算是并列关系吧，都是基于JavaScript的框架、只不过dojo、ExtJS的学习成本比jquery高一些罢了，学习曲线陡一些，中文文档少一些，不过功能之强大还属dojo 、extjs，dojo偏向于地图。使用各式各样的datagrid有几年了，一直都没有做过总结，姑且算是忙于工作吧。最为惭愧的是，每一种dataGrid都没有用的特别精通。在实际使用中遇到问题，除了谷歌，度娘意外就只有查看晦涩难懂的英文文档了。

 　　注：dojo 有人直接念拼音、有人叫豆角(谐音)。

 

　　今天在这里简单介绍EasyUI中的DataGrid中的动态组合列，也是在项目中遇到的一个问题，就是同一个报表，不同的用户登录后只能查看自己权限范围内的报表字段。有这么两种思路：

  1. 隐藏列

鉴于现在的牛人非常多，随便一查看源码就能知晓其大意，便放弃了。

　　2.  动态组合显示的列  这里用了easyui 的datagrid

 

先来看一下

<table id="dg"></table>
$(‘#dg‘).datagrid({                title: ‘‘,                loadMsg: "数据加载中，请稍候……",                height: $(window).height() - 31,                width: $(window).width(),                singleSelect: true,                selectOnCheck: true,                url: ‘col.page‘,                sortName: ‘sn‘,                sortOrder: ‘desc‘,                remoteSort: false,                idField: ‘id‘,                columns: [[                    { field: ‘id‘, title: ‘主键编码‘, hidden: true },                    { field: ‘name‘, title: ‘字段名‘, width: 100 },                    { field: ‘alias‘, title: ‘字段别名‘, width: 100 },                    { field: ‘sn‘, title: ‘顺序‘, width: 100, sortable: true },                    { field: ‘insdt‘, title: ‘创建时间‘, width: 220 },                    { field: ‘opuser‘, title: ‘操作用户‘, hidden: true, width: 100 },                ]],                onDblClickRow: function (rowIndex, rowData) {                    upd();                } });

$(‘#dg‘).datagrid()中所包含的部分为一个Object

Columns中所包含的部分为一个嵌套数组Object

说到这里应该都明白其中大意了吧，看实现代码

  function easyUIDataGrid(medid) {            var $datagrid = {};            var columns = new Array();            $datagrid.title = "";            $datagrid.height = $(window).height() - 31;            $datagrid.width = $(window).width();            $datagrid.sortName = "dt";            $datagrid.sortOrder = "desc";            $datagrid.idField = "id";            var param = { "medid": medid };            $.ajax({                url: ‘getCol.page‘,                type: ‘post‘,                data: "medid=" + medid,                dataType: "json",                async: false,                success: function (returnValue) {
　　　　　　　　　　　　//异步获取要动态生成的列 别名，宽度也可以                    var arr = returnValue;                    $.each(arr, function (i, item) {                        columns.push({ "field": item.colname, "title": item.colalias, "width": 100, "sortable": true });                    });                    $datagrid.columns = new Array(columns);                    $(‘#dg‘).datagrid($datagrid);                    console.log(JSON.stringify($datagrid));                }            });        }

转载请注明出处  http://guanhp2013.cnblogs.com/

如有疑问，欢迎留言。

作者网站：http://www.xyzla.com

EasyUI之DataGird动态组合列


联系
我们