EasyUI DataGrid 動态隐藏/顯示列 支援拖拽改變顯示順序或拖拽隐藏/顯示

文章目錄

• 需求
• 一、toolbar中添加彈窗按鈕
• 二、增加彈窗統一處理邏輯
• • 1.加載完成後初始化
  • 2.拖拽改變順序或左右移動
  • 3. 按鈕實作左右移動
• 整體效果

需求

EasyUI DataGrid 支援批量隐藏/顯示列。

一、toolbar中添加彈窗按鈕

效果圖

代碼如下

<div id="employeelistgridtb" style="padding:5px;height:auto">
            <a href="#" target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-options="size:'large',iconAlign:'right'" style="float: right;" iconCls="icon-showColumns" plain="true">顯示列</a>
        </div>
        <table id="employeelistgrid" class="easyui-datagrid" style="height:98%" role="grid" cellspacing="0" cellpadding="0" 
               data-options="rownumbers:true,
               toolbar:'#employeelistgridtb'">
           

二、增加彈窗統一處理邏輯

1.加載完成後初始化

思路：

點選按鈕後，擷取到按鈕所在的Grid，組合隐藏的列和顯示的列，傳遞到打開的新視窗中，新視窗使用了模态方式，加載iframe方式，調用定義在新視窗中函數，完成資料加載。

效果：

左側是目前Grid顯示的列，右側是隐藏的列。因為左側是多選帶checkbox，是以要排除掉checkbox項，後面在重新加載列時要特殊處理，再把checkbox添加回去。

代碼：

$('.easyui-linkbutton[iconCls=icon-showColumns]').on('click', function (e) {        
        var grid = $(this).parents('div.datagrid').find('table.easyui-datagrid');
        var orgColumns = $(grid).datagrid('options').columns;        
        var showColumns = [], hiddenColumns = [];
        for (var i = 0; i < orgColumns[0].length; i++) {
            var col = orgColumns[0][i];
            if (col.checkbox) {
                continue;
            }
            if (col.hidden) {
                hiddenColumns.push(col);
            } else {
                showColumns.push(col);
            }
        }

        var gridMenu = $('<div id="m_chooseCol" class="easyui-dialog"></div>').appendTo('body');
        $('#m_chooseCol').dialog({
            title: '選擇列',
            width: '600px',
            height: '560px',
            closed: false,
           // maximizable: true,
            resizable: true,
            headerCls: 'panel-header-title',
            border: false,
            cache: false,
            modal: true,
            onClose: function () {
                $(this).dialog('destroy');
            }, onResize: function () {
                $(this).window('hcenter');
            }
        }).html('<iframe name="ColumnsChooseFrame" id="ColumnsChooseFrame" scrolling="yes" frame  src="/UI/showColumns.html"  style=" width: 100%;height: 99%;" ></iframe>');
        $("#ColumnsChooseFrame").load(function () {
            var ff = this;
            ff.contentWindow.loadColumns(grid[0], showColumns, hiddenColumns);
        });        
        gridMenu.dialog("open");
        gridMenu.window("center");
    });
           

使用Dialog方式彈出視窗，在關閉或确定後，使用destroy将視窗銷毀。iframe加載完成後調用函數填充表格資料。

2.拖拽改變順序或左右移動

思路：

使用表格的可拖拽方式，移動表格順序，參考官方的Drag and Drop Rows in DataGrid；

拖拽左側表格移動到右側，或拖拽右側移動到左側；

效果：

上下移動 & 左右移動

代碼：

$('#source_grid').datagrid({
                onStopDrag: function (index, row) {
                    if (ifInDroppable && row) {
			                        $('#source_grid').datagrid('deleteRow', row);
$('#target_grid').datagrid('appendRow', row);
                    }
                },
                onDragEnter: function (e, source) {
                    ifOutDroppable = true;
                },
                onDragLeave: function (e, source) {
                    ifOutDroppable = false;
                },
                onLoadSuccess: function () {
                    $(this).datagrid('enableDnd');
                }
            });

            $('#target_grid').datagrid({
                onStopDrag: function (index, row) {
                    if (ifOutDroppable && row) {
                        $('#source_grid').datagrid('appendRow', row);
                        $('#target_grid').datagrid('deleteRow', row);
                    }
                },
                onDragEnter: function (e, source) {
                    ifInDroppable = true;
                },
                onDragLeave: function (e, source) {
                    ifInDroppable = false;
                },
                onLoadSuccess: function () {
                    $(this).datagrid('enableDnd');
                }
            });
           

3. 按鈕實作左右移動

思路：

選擇要移動的列，點選按鈕移動到右側或左側；——擷取選中記錄，源表格删除行，目标表格新增行；

将左側的列全部移動到右側，或右側全部移動到左側；——擷取全部記錄，源表格删除所有行，目标表格新增行；

效果

整體效果

以上就是EasyUI DataGrid 批量隐藏列/顯示列/改變列順序的實作。EasyUI功能還是很強大的，隻是需要對功能進行組合，并且注意細節。實作過程中也參考了網上的一些案例，非常感謝！