Javascript - ExtJs - GridPanel组件 - 编辑

Posted 2020-09-26

GridPanel组件 - 编辑

Ext.grid.plugin.Editing

如果要对表格使用列编辑器控件，则需要完成以下几步

1.将columns中需要编辑的列设为editor并提供编辑列时所要使用的表单控件。

2.通过配置gridPanel的plugins指向编辑器实例。

3.指示gridPanel的选择模式为列或行选择模式。

列编辑器（Ext.grid.plugin.CellEditing [ ptype: "cellediting" ]）

var columns = [
    { header: \'编号\', dataIndex: \'id\' },
    {
        header: \'性别\',
        dataIndex: \'name\',
        editor: {
            xtype: "combobox",//xtype表示实例化一个组件或控件对象，相当于new Ext.form.combobox()，对象名称全小写。
            allowBlank: false//不允许空值
        }
    },
    {
        header: \'描述\', dataIndex: \'descn\', 
        editor: {
            xtype: "textfield",
            allowBlank: false,//不允许空值
            selectOnFocus: true//点开编辑时自动选中值以便于用户删除。
        }
    }
];

var grid = new Ext.grid.GridPanel({
    renderTo: \'box\',
    store: store,
    columns: columns,
    selType: \'cellmodel\',//指示为列选择模式
    plugins: [//绑定列编辑器插件
        {
            ptype: "cellediting",//列编辑器插件
            clicksToEdit: 2//点击2次开启编辑
        }
    ]
}); 

行编辑器（Ext.grid.plugin.RowEditing [ ptype: "rowediting" ]）

Ext.create("Ext.grid.Panel", {
    //……
    plugins: [//绑定行编辑器插件
        {
            ptype: "rowediting",//行编辑器插件
            clicksToEdit: 2//点击2次开启编辑
        }
    ]
});

下拉框编辑器

数据源为本地数据 

//配置数据存储器
Ext.create("Ext.data.ArrayStore", {
    fields: ["key", "value"],//随便设 key是显示的文本 value是文本对应的值
    data: [
        ["重庆", "chongqing"],//重庆对应key 1对应value
        ["长沙", "changsha"],
        ["上海", "shanghai"]]
});

//为GridPanel配置columns
var columns = [
    { header: "编号", dataIndex: "ID" },
    {
        header: "城市",
        dataIndex: "Name",
        editor: {
            xtype: "combobox",
            triggerAction: "all",
            emptyText: "请选择",
            store: datasourceStore,
            mode: "local",
            displayField: "key",
            valueField: "value",
            listeners: {
                select: function () {
                    Ext.Msg.alert("", this.value);
                }
            }
        }
    },
];

数据源为服务端数据 

Ext.define("AdminRole", {
    extend: "Ext.data.Model",
    fields: [
        { name: "Id", type: "int" },
        { name: "Name", type: "string" }
    ]
})

Ext.create("Ext.data.Store", {
    storeId: "AdminRoleDataStore",
    autoLoad: true,
    model: "AdminRole",
    proxy: {
        type: "ajax",
        url: "AdminAdminRoleHandler.ashx",
        reader: {
            type: "json",
            root: "ds" //如果Json格式带根，此处要指定根，如这样的json数据：{ "ds" : [ { record1 : "" } , { record2 : "" } ] }
        }
    }
});

var columns = [
    {
        header: "角色", dataIndex: "roleName",
        editor: { xtype: "combobox", id: "roleCombo", store: "AdminRoleDataStore", mode: "remote", triggerAction: "all", displayField: "Name", valueField: "Id", editable: false }
    }
]

下拉框选中后显示的是值而非文本的解决办法

之前有试过在编辑器的列配置renderer，但发现一旦点击列头的排序功能时，所有的下拉框列的值都会被改掉，既然如此就没必要在此处动手脚。我换了一个思路，直接将下拉框列的displayField和ValueField都配置成key，这样选中后显示的就通通是key而非value了，然后我写了一个函数，用于获取GridPanel中所有修改过数据的记录，该函数返回的记录中包含的下拉框数据就是value而非key。如果觉得麻烦，其实简单的办法就是不要在表格上编辑数据，应另外弹出一个窗口，使用表单编辑数据。如果非要使用编辑器，可以考虑如下实现  

// #region 返回GridPanel中被污染过的脏数据集合 //每行中只要有一个列被修改过就会返回该行的全部数据，未修改过的不会返回。这包含了被选中的下拉框选项的value。有不需要提交的字段可以迭代返回的结果，delete即可   
function GetDityRec(gridStoreID, cArray) {
    //获取gridPanel中的脏数据
    var drityDatas = Ext.getStore(gridStoreID).getModifiedRecords();
    var submitRecord = [];
    var transcript;

    //遍历每条记录
    drityDatas.forEach(function (gridRecord) {
        Ext.each(cArray, function (obj) {
            //获取下拉框数据存储器
            var comboStore = Ext.getStore(obj.comboStoreID);
            var key = gridRecord.get(obj.gridDisplayField);
            comboStore.findBy(function (comboRecord) {
                if (comboRecord.get(obj.displayField) == key) {
                    if (cArray.indexOf(obj) == 0) {
                        transcript = gridRecord.data;//首次应拷贝行的副本，此后则直接赋值
                    }
                    transcript[obj.gridDisplayValueField] = parseInt(comboRecord.get(obj.valueField));
                }
            });
        });
        submitRecord.push(transcript);
    });
    return submitRecord;
}
// #endregion

GetDityRec

使用GetDityRec的示例

employee表，除了Id和Name，其余字段分别对应了三张表，在客户端的GridPanel中点击编辑列时，这些列会变成下拉框，通过它们各自的数据存储器去查询对应的表，以combobox显示这些数据。

Ext.onReady(function () {

    //employee表的数据模型和存储器
    Ext.define("em", {
        extend: "Ext.data.Model",
        fields: [
            { name: "Id", type: "int" },
            { name: "Name", type: "string" },
            { name: "sexId", type: "int" }, 
            { name: "GenderName", type: "string" },
            { name: "favitId", type: "int" },
            { name: "FavitName", type: "string" },
            { name: "jobId", type: "int" },
            { name: "JobName", type: "string" }
        ]
    });

    Ext.create("Ext.data.Store", {
        id: "emDataStore",
        autoLoad: { params: { getEmployeeList: "true" } },
        model: "em",
        proxy: {
            type: "ajax",
            url: "employeeHandler.ashx",
            reader: {
                type: "json",
                root: "ds",
            }
        }
    });

    //三个下拉框的数据模型和存储器
    Ext.define("Gender", {
        extend: "Ext.data.Model",
        fields: [
            { name: "Id", type: "int" },
            { name: "GenderName", type: "string" }
        ]
    })

    Ext.create("Ext.data.Store", {
        id: "GenderDataStore",
        model: "Gender",
        autoLoad: true,
        proxy: {
            type: "ajax",
            url: "GenderHandler.ashx",
            extraParams: { getGenderList: "true" },
            reader: {
                type: "json",
                root: "ds"
            }
        }
    });

    Ext.define("Favit", {
        extend: "Ext.data.Model",
        fields: [
            { name: "Id", type: "int" },
            { name: "FavitName", type: "string" }
        ]
    })

    Ext.create("Ext.data.Store", {
        storeId: "FavitComboStore",
        autoLoad: true,
        model: "Favit",
        proxy: {
            type: "ajax",
            url: "FavitHandler.ashx",
            extraParams: { getFavitList: "true" },
            reader(加分)Extjs grid中鼠标触发事件

Extjs Grid 带有来自 json 对象的数据并进行排序

Extjs 拖放示例使用 Grid 到 Grid 与插件侦听器

学习ExtJS的grid布局

具有嵌套分组的 ExtJs 4 Grid

ExtJS 4.2 Grid组件的单元格合并