首页 / EXTJS / ExtJS 列表数据编辑

ExtJS 列表数据编辑

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ExtJS 列表数据编辑，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2962字，纯文字阅读大概需要5分钟。

内容图文

         在ExtJs中，GridPanel一般用于展示列表数据。同时利用一些附加的插件也能编辑数据。类似于asp.net中的DataGridView控件.

展示数据比较简单，利用Store则可以自动展示，只要在服务器端将数据Json化即可；

下面在Extjs中编辑列表数据

一、单条编辑

        单条数据的编辑利用了Ext.ux.grid.RowEditor插件达到目的

            var gridEditor = new Ext.ux.grid.RowEditor({ listeners: {
        ‘canceledit‘: function () {
            var re = FieldGrid.getSelectionModel().getSelected();
            var id = re.get("Id");
            if (id == null) {
                var r = FieldStore.getAt(0);
                if (Ext.isDefined(r)) {
                    FieldStore.remove(r);
                }
            }
        },
        ‘beforeedit‘: function () {
        },
          //赋值
‘beforerecordsubmit‘: function (r, cm, ri) {
            r.set(‘Content‘, cm.getCellEditor(1, ri).getValue());
            r.set(‘Description‘, cm.getCellEditor(2, ri).getValue());
        }
    }
    });

新增时：

            gridEditor.stopEditing();
FieldStore.insert(0, new FieldStore.recordType);
FieldGrid.getView().refresh();
FieldGrid.getSelectionModel().selectRow(0);
gridEditor.startEditing(0);

在store中。定义如下：

            var FieldStore = new Ext.data.Store({
            url: ‘url’,
            remoteSort: true,
            reader: new Ext.data.JsonReader({
                root: ‘data‘,
                totalProperty: ‘total‘,
                id: ‘Id‘,
                fields: [
                    {
                        name: ‘Id‘,
                        type: ‘string‘// ID                    },
                    {
                        name: ‘Name‘,
                        type: ‘string‘
                    } ,
                    {
                        name: ‘Description‘,
                        type: ‘string‘
                    } ,
                    {
                        name: ‘CreateTime‘,
                        type: ‘date‘
                    }
                ]
            }),
            listeners: {
                ‘update‘: function (thiz, record, operation) {
                    var model = record.data;
                    if (operation == Ext.data.Record.EDIT
                        && !record.getChanges().Id) {
                        Ext.Ajax.request({
                            url: ‘url’,
                            params: model,
                            success: function (response, opts) {
                                var result = Ext.util.JSON.decode(response.responseText);
                                if (result.success) {
                                    if (!record.get(‘Id‘))
                                        record.set(‘Id‘, result.id);
                                    thiz.commitChanges();
                                } else {
                                    alert(result.msg);
                                    thiz.rejectChanges();
                                    if (!record.get(‘Id‘)) //新增                                        thiz.remove(record);
                                }
                            }
                        });
                    }
                }
            }
        }
    );

在更新时，利用了store组件的update事件进行更新。

 

效果图：

 

二、批量编辑数据

      在开发过程中，一些业务往往需要一次性保存，如凭证，单据数据，如下图；批量保存数据，这时需要使用EditorGridPanel组件。来定义可编辑的地方。

 

 

  

1、grid以利用Cm来定义列及列的相关属性.定义如下:

            var Cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), Sm,
    {
        header: "ID",
        dataIndex: ‘Id‘,
        name: ‘Id‘,
        sortable: true,
        hidden: true
    },
    {
        header: "数量",
        dataIndex: ‘Quantity‘,
        sortable: true,
        width: 80,
        editor: {
            xtype: ‘numberfield‘,
            allowBlank: false,
            name: ‘Quantity‘
        }
    },
    {
        header: "时间(分钟)",
        dataIndex: ‘WorkingHour‘,
        sortable: true,
        width: 80,
        editor: {
            xtype: ‘numberfield‘,
            allowBlank: false,
            name: ‘Workinghour‘
        }

    }
]);

 

在提交时，

            var submit = new Ext.ux.SubmitBtn({
    handler: function () {
        //grid失去焦点，会将编辑的数据保存到store，如果不采用些，则最后的数据如果直接提交时，则会丢失if (RouteSheetFormGrid.activeEditor != null) {
            RouteSheetFormGrid.activeEditor.completeEdit();
        }
        
        //将所有修改后的数据保存到数组中。var arrItems = new Array();
        Store.each(
            function (r) {
                arrItems.push(r.data);
            }
        );

        if (form.getForm().isValid()) {
            form.getForm().submit({
                url: ‘url‘,
                params: {
                    //以json方式提交到后台
                    ‘record‘: Ext.encode(arrItems)
                },
                success: function (form, action) {
                    win.destroy(); // 关闭窗口                },
                failure: function (form, action) {
                    alert(action.result.msg);
                }
            }); // formSubmitArgs// 引用之前定义的请求参数变量        }
    }
});

 

 

由于提交时，对象已json化。在后台，需要将json对象化。

原文：http://www.cnblogs.com/Terryzhou/p/4111123.html

内容总结

以上是互联网集市为您收集整理的ExtJS 列表数据编辑全部内容，希望文章能够帮你解决ExtJS 列表数据编辑所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1308538.html

来源：【匿名】