EasyUI之DataGird動態組合列

      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/

若有疑問，歡迎留言。

做者網站：https://xyzla.com