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功能还是很强大的，只是需要对功能进行组合，并且注意细节。实现过程中也参考了网上的一些案例，非常感谢！