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


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

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

     // 定义初始 存放表格数据
            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,
                     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: '序号',
                     70,
                    align: 'center'
                }, {
                    header: '省份',
                     150,
                    sortable: true,
                    menuDisabled: true,
                    align: 'center',
                    dataIndex: 'provinceName'
                }, {
                    header: '折扣',
                     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);
    
            }

    类似的这种功能实际用到的可能不是很多。

    做这个功能的时候,点击复选框之后获取到的数据一直放不到grid中。

    最开始是想把取到的值,直接赋给 gridPanelStore.data.items ,但是赋值之后 用 store.reload() 刷新表格数据总是报错,说是方法错了。

    我觉得(不一定对啊~),可能是因为我的数据模型里面套了太多层,导致直接从grid的store reload()才回报错的。

    最后查找API,才发现了loadData 可以直接给数据传值。

    我用的是Boolean值是 false。

    欢迎各位大神前来指正~~~

  • 相关阅读:
    闲扯 Javascript 01 实现选项卡
    控制台获得键盘事件
    C#反射 入门学习 02
    C#反射 入门学习 01
    闲扯 Javascript 00
    读张子阳老师的委托和事件 2
    浅析ado.net获取数据库元数据信息 DeriveParameters
    SQLBulkCopy使用
    利用CryptoStream进行加密解密
    vs 中代码的字体也颜色设置
  • 原文地址:https://www.cnblogs.com/webRongS/p/5663724.html
Copyright © 2020-2023  润新知