easyui中数据表格选择显示列做法

最新推荐文章于 2024-04-29 20:00:00 发布

七柒蕲

最新推荐文章于 2024-04-29 20:00:00 发布

阅读量440

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/webbirds/article/details/125527026

版权

easyui选择列

- 话不多说先上图
- 再上代码

话不多说先上图

在这里插入图片描述

再上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>

<body>
    <button id="btn">隐藏/显示声请人列</button>
    <table id="dg" class="easyui-datagrid"></table>
</body>
<script type="text/javascript">
    $(function () {
        $('#dg').datagrid({
            url: 'datagrid_data.json',
            method: 'get',
            title: 'demo',
            idField: 'seqno',
            iconCls: 'icon-save',
            width: 1000,
            height: 700,
            fitColumns: false,
            singleSelect: true,
            pagination: true,
            columns: [[
                {
                    title: '序号',
                    field: 'seqno',
                    width: 100,
                    align: 'center', 
                },
                {
                    field: 'applyTitle',
                    title: '签报标题',
                    align: 'center',
                    width: 100,
                },
                {
                    field: 'applierName',
                    title: '申请人',
                    align: 'center',
                },
                {
                    field: 'applyDepartName',
                    title: '申请部门名称',
                    align: 'center',
                },
                {
                    field: 'reasonDesc',
                    title: '事项',
                    align: 'center',
                    width: 200,
                },
                {
                    field: 'matterDesc',
                    title: '事由',
                    align: 'center',
                    width: 200,
                },
                {
                    field: 'memo',
                    title: '备注',
                    align: 'center'
                },
                {
                    field: 'createrName',
                    title: '创建人',
                    align: 'center'
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                },
                {
                    field: 'subLeaderName',
                    title: '部门负责人',
                    align: 'center',
                },
                {
                    field: 'svpName',
                    title: '技术经理',
                    align: 'center',
                },
                {
                    field: 'subOfficerName',
                    title: '中心分管领导',
                    align: 'center'
                }
            ]],
            // 关键性代码
            onHeaderContextMenu: function (e, field) {
                e.preventDefault();
                if (!cmenu) {
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });
    });
    // 关键性代码开始
    var cmenu;
    function createColumnMenu() {
        cmenu = $('<div/>').appendTo('body');
        cmenu.menu({
            onClick: function (item) {
                if (item.iconCls == 'icon-ok') {
                    $('#dg').datagrid('hideColumn', item.name);
                    cmenu.menu('setIcon', {
                        target: item.target,
                        iconCls: 'icon-empty'
                    });
                } else {
                    $('#dg').datagrid('showColumn', item.name);
                    cmenu.menu('setIcon', {
                        target: item.target,
                        iconCls: 'icon-ok'
                    });
                }
            }
        });
        var fields = $('#dg').datagrid('getColumnFields');
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var col = $('#dg').datagrid('getColumnOption', field);
            cmenu.menu('appendItem', {
                text: col.title,
                name: field,
                iconCls: 'icon-ok'
            });
        }
    }
    // 关键性代码结束
    var flag = false
    $('#btn').click(function () {
        flag = !flag
        if (flag) {
            $('#dg').datagrid('hideColumn', 'applierName');
        } else {
            $('#dg').datagrid('showColumn', 'applierName');
        }

    })


</script>

</html>