ExtJS 列表数据编辑

在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对象化。

时间: 2024-10-05 10:13:47

ExtJS 列表数据编辑的相关文章

extjs列表中文件上传与下载(带有重命名操作)

下面是extjs列表中文件上传与下载: 如图: 一.上传 上传按钮: { xtype: 'button', width: 60, margin: '0 20', text: ' 上 传 ', handler: 'onUploadClick' }] 上传按钮事件(打开上传窗口和传参): onUploadClick: function () { var me = this, view = me.getView(), vm = view.getViewModel(), store = me.getSt

无废话ExtJs 入门教程十七[列表:GridPanel]

无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对GridPanel有个基本的认识,后继过程再做Demo练习详细讲解在开发中的应用. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

在extjs中实现鼠标经过列表变行

在项目上遇到一个问题: 鼠标划过应该变形,否则不知道双击能打开 方法: 在extjs中实现<style type="text/css" media="all"> .x-grid3-row-over {    cursor:hand; } 就Ok了

ExtJs之列表(grid)

--renderers渲染器 可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子 先看下renderer: function()里的参数 renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ } 1.value是当前单元格的值 2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式. 3.record是这行的所有数据,你想要什

ExtJs之列表常用CRUD

前端代码: Ext.onReady(function(){ Ext.define('Person', { extend: 'Ext.data.Model', fields: [{name: 'id', type: 'int', useNull: true }, 'email', 'first', 'last'], validations: [{ type: 'length', field: 'email', min: 1 }, {type: 'length', field: 'first', m

ExtJS实现Excel导出

1. 使用POI组件实现excel导出功能 //获取问题列表 List<Suggestion> targetStockList = suggestionService.getSuggestionList(map);           //创建一个新的Excel         HSSFWorkbook workBook = new HSSFWorkbook();         //创建sheet页         HSSFSheet sheet = workBook.createSheet

ExtJS基础知识总结

概述 最近一直在做相关ExtJs方面的项目,遇到了ExtJs使用方面的一系列问题,现在将使用技巧做个记录汇总,以便于下次能够快速使用.以下都是ExtJs控件的常用方法,做简单汇总,俗话说,好记星不如烂笔头,总一天会使用的. 基础控件使用技巧 1.Grid表格操作:获取Store的数据信息和操作列表行数据 //创建一个grid var rowPanel = Ext.create('Ext.grid.Panel', {}); //获取grid对应的Store的数据条数 rowPanel.getSto

ExtJS从入门到后面肯定要抛弃

一.ExtJs定义 ①基于JavaScript语言 ②基于JavaSwing的MVC架构 ③支持组件化.模块化设计 ④提供“本地数据源”的支持 ⑤完完善与服务端的交互机制 ⑥是最有可能拥有大规模可视化提成开发研究的AJAX技术 二.ExtJS前提准备 ①JavaScript ②JSON③Java/C#④WebServices⑤HtmlDom⑥AJAX⑦基于类化思维的JavaScript编程 =====================================================

Extjs GridPael用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/