qq_17811469
2021-10-20 13:53
采纳率: 50%
浏览 180

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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • qq_17811469 2021-10-20 21:33

    可以的。我先安装个向日葵

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题