extjs 点击复选框在表格中增加相关信息行

最新推荐文章于 2021-07-06 11:16:27 发布

weixin_30312557

最新推荐文章于 2021-07-06 11:16:27 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webRongS/p/5663724.html

功能效果：点击复选框在表格中自动增加相关信息行，复选框取消则表格中内容自动删除

初始效果大概是这样~~~~~

 // 定义初始 存放表格数据
        var gridItems = [];

//省份复选框
        var $provinceCheckbox01 = new Ext.form.CheckboxGroup({
            xtype: 'checkboxgroup',
            fieldLabel: '省份选择',
            labelWidth: 60,
            columns: 9,
            vertical: true,
            margin: '10 0 0 15',
            defaults: {
                labelWidth: 80,
                width: 60,
                labelAlign: "left"
            },
            items: provinceItems,  //provinceItems是从其他渠道获取的数据
            listeners: {
                change: OnChange    // 复选框改变事件
            }
        });

//表格初始数据模型
var gridPanelStore = new Ext.data.Store({
            fields: ['discount', 'provinceId', 'provinceName'],
            data: {'items': ''},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }

        });

// grid
        var $grid = new Ext.grid.Panel({
            store: gridPanelStore,
            selType: 'rowmodel',
            singleSelect: true,
            margin: '20 0 0 0',
            columns: [{
                xtype: 'rownumberer',
                header: '序号',
                width: 70,
                align: 'center'
            }, {
                header: '省份',
                width: 150,
                sortable: true,
                menuDisabled: true,
                align: 'center',
                dataIndex: 'provinceName'
            }, {
                header: '折扣',
                width: 100,
                menuDisabled: true,
                sortable: true,
                align: 'center',
                dataIndex: 'discount',
                editor: {
                    allowBlank: false
                }
            }],
            dockedItems: [{
                xtype: "pagingtoolbar",
                dock: "bottom",
                displayInfo: true
            }],
            plugins: [cellEditing]
        });

//事件监听
        function OnChange(newValue, oldValue, eOpts) {

            // 清空数据
            gridItems = [];

            //选中省份ID
            var checkedId = this.getValue().xxx;

            //判断选中数量
            if(checkedId==undefined){
                gridItems = [];
            } else if (checkedId.length == undefined) {
                for (var i = 0; i < provinceItems.length; i++) {
                    if (provinceItems[i].inputValue == checkedId) {
                        gridItems[0] = {
                            "provinceId": checkedId,
                            "provinceName": provinceItems[i].boxLabel,
                            "discount": "1"
                        };
                    }
                }
            }else if(checkedId.length !== undefined){
                for(var j = 0;j<checkedId.length;j++){
                    for (var o = 0; o < provinceItems.length; o++) {
                        if (provinceItems[o].inputValue == checkedId[j]) {
                            gridItems[j] = {
                                "provinceId": checkedId[j],
                                "provinceName": provinceItems[o].boxLabel,
                                "discount": "1"
                            };
                        }
                    }
                }
            }

            //console.log($gridItems);

            $grid.store.loadData($gridItems, false);

        }