qq_17811469 2021-10-20 13:53 采纳率: 60%
浏览 190
已结题

Ext2.0.2 在表头中标题上下文菜单隐藏列增加全选功能

img

希望在月度上方增加全选功能

勾选时：月度、物料、业务方向、等其他字段在表格中显示。
取消勾选时：月度、物料、业务方向、等其他字段在表格中隐藏。

Ext2.0.2版本。

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-10-20 14:38
    关注

    给grid添加render事件，然后用js添加全选的功能项到列弹出层中，题主只需要将injectJsEvent函数导入页面，给grid listeners添加render事件
    listeners: {
    render: injectJsEvent////////////////////注入js事件
    }
    大概写了个示例，由于extjs限制必须要有一个列，所以不能全部取消所有列，必须保留一个，效果如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

    img

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editor Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script>
    Ext.onReady(function () {
        window. Plant = Ext.data.Record.create([
           {name: 'common', type: 'string' },
           { name: 'botanical', type: 'string' },
           { name: 'light' },
           { name: 'price', type: 'float' },             // automatic date conversions
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
           { name: 'indoor', type: 'bool' }
      ]);
        // create the Data Store
        window. store = new Ext.data.Store({
            // load using HTTP
            url: 'plants.xml',
            autoLoad: true,
            // the return will be XML, so lets set up a reader
            reader: new Ext.data.XmlReader({
                // records will have a "plant" tag
                record: 'plant'
            }, Plant),

            sortInfo: { field: 'common', direction: 'ASC' }
        });

        var grid = new Ext.grid.EditorGridPanel({
            store: store, //数据来源store    
            renderTo: document.body,
            columns: [
                { id: 'No', header: "文件名称", editor: new Ext.form.TextField({ allowBlank: false }), sortable: true, dataIndex: 'common' },
                { header: "公司名称", editor: new Ext.form.TextField({ allowBlank: false }), sortable: true, dataIndex: 'botanical' },
                {
                    header: "保荐公司", editor: new Ext.form.TextField({
                        allowBlank: false,
                        listeners: {
                            render: function (p) {
                                var nowElement = p;
                                p.getEl().on("click", function (p) {
                                    var record = grid.getSelectionModel();
                                    alert(record.get("selNow"));
                                    var win = new Ext.Window({
                                        layout: 'fit',
                                        width: 600,
                                        height: 400,
                                        closeAction: 'hide',
                                        modal: true,
                                        title: "选择公司",
                                        plain: true,
                                        items: new Ext.Panel({
                                            frame: true,
                                            autoScroll: true,
                                            buttonAlign: "center",
                                            id: "id",
                                            items: [wingrid]
                                        })
                                    });
                                    win.show();
                                });
                            }
                        },
                        mode: 'remote'
                    }), sortable: true, dataIndex: 'light'
                }],
            width: 540,
            height: 200,
            listeners: {
                render: injectJsEvent////////////////////注入js事件
            }
        });
    });
    ///////////下面为主要代码
    function injectJsEvent(component) {

        var container = component.el.dom;//grid容器，给下拉菜单中的列添加全选
        var menu;//弹出菜单
        function aClick() {//添加箭头点击事件，只有第一次点击后才会生成箭头弹窗层

            //添加过后解绑事件，无需重复添加
            for (var el of arrows) el.removeEventListener('click', aClick);

            setTimeout(function () {//延时获取，要不获取不到，因为自己加的事件先于生成菜单的执行
                menu = document.querySelector('.x-menu:last-of-type ul');
                //给列菜单项添加mouseover事件
                menu.querySelector('.x-menu-item-arrow').addEventListener('mouseover', colMouseOver);
            }, 100);
        }
        function colMouseOver() {
            menu.querySelector('.x-menu-item-arrow').removeEventListener('mouseover', colMouseOver);//移除事件

            setTimeout(function () {
                var colMenu = document.querySelector('.x-menu:last-of-type ul');//列弹出层
             
                colMenu.addEventListener('click', function (e) { setTimeout(allChecked, 10); });
                

                function allChecked() {
                    var cols = colMenu.querySelectorAll('li');
                    var allck = true;
                    for (var col of cols)
                        if (col != ckall) {
                            if (!col.classList.contains('x-menu-item-checked')) {
                                allck = false;
                                break;
                            }
                        }
                    ckall.classList[allck ? 'add' : 'remove']('x-menu-item-checked');
                }

                var ckall = document.createElement('li');
                ckall.className = 'x-menu-list-item  x-menu-item-checked';
                ckall.innerHTML = '<a href="#" class="x-menu-item x-menu-check-item"><img class="x-menu-item-icon ">全选</a>';
                colMenu.querySelectorAll('li')[0].insertAdjacentElement('beforeBegin', ckall);

                function fireEvent(el) {
                    const event = document.createEvent('HTMLEvents');
                    event.initEvent('click', true, false);
                    el.dispatchEvent(event);
                }
                ckall.onclick = function (e) {
                    e.stopPropagation();
                    var checked = ckall.classList.contains('x-menu-item-checked');
                    var cols = colMenu.querySelectorAll('li');
                    for (var col of cols)
                        if (col != ckall) {
                            if (checked) {//取消全选
                                if (col.classList.contains('x-menu-item-checked'))//已勾选的触发click事件
                                    fireEvent(col);
                            }
                            else {//执行全选
                                if (!col.classList.contains('x-menu-item-checked'))//未勾选的触发click事件
                                    fireEvent(col);
                            }
                        }
                    allChecked();
                    return false;
                }
            }, 230);


        }
        var arrows = container.querySelectorAll('.x-grid3-hd-btn');//下拉箭头
        for (var el of arrows) el.addEventListener('click', aClick);}
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月28日
  • 已采纳回答 10月20日
  • 赞助了问题酬金 10月20日
  • 创建了问题 10月20日