extjs grid添加一行数据

已于 2022-07-21 17:29:27 修改
阅读量1.1k 收藏
点赞数
文章标签： javascript 前端 html
于 2021-08-06 10:33:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxsxsxsxsxsxsx1/article/details/119448048
版权
这是一个关于ExtJS的代码示例，展示了如何创建一个包含编辑功能的表格组件。表格支持单元格编辑，包括新建、删除和保存操作。用户可以对取值数量、单价、单价单位、保底金额和备注等字段进行编辑。此外，还包括了费用阶梯的管理，如新建、删除和保存。代码中还包含了事件监听，用于处理用户输入和编辑行为。
摘要由CSDN通过智能技术生成

页面:

Ext.define('Admin.view.cus.cusPutrecord.PutrecordTraiffBillListView', {
    extend: 'Ext.grid.Panel',
    xtype: 'putrecordtraiffbilllist',
    bind: '{putrecordTraiffBillStore}',
    // selType: "cellmodel",
    selModel: {
        selType: 'checkboxmodel',
        mode: 'MULTI'
    },
    requires: [
        'Admin.store.bas.PutrecordTraiffBillStore'
    ],
    columnLines: true,
    // forceFit: true,
    // stateful: true,
    border: 0,
    viewConfig: {
        enableTextSelection: true   //可以复制单元格文字
    },
    dockedItems: [
        {
            xtype: 'form',
            dock: 'top',
            //defaultType: 'textfield',
            style: 'border-radius: 0px 0px 0px 0px;',
            bodyPadding: '5 0 0 0',
            frame: true,
            layout: 'column'
        }, {
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'label',
                html: "<strong><font>&nbsp;&nbsp;费用阶梯</font></strong>"
            }, {
                iconCls: 'x-fa fa-question-circle',
                action: 'operating_instruction'
            }, '->', {
                iconCls: 'x-fa fa-plus-circle',
                text: '新建',
                handler: 'putrecordtraiffbillAdd'
            }, {
                iconCls: 'x-fa fa-minus-circle',
                text: '删除',
                handler: 'putrecordtraiffbillDel'
            },
            {
                iconCls: 'x-fa fa-check',
                text: '保存',
                handler:'savePutrecordDetailTraiff',
            }]
        }, {
            xtype: 'pagingtoolbar',
            bind: '{putrecordTraiffBillStore}',
            dock: 'bottom',
            plugins: {
                ptype: 'comboPageSize'
            },
            displayInfo: true
        }],
    columns: [
        {
            header: '取值数量', dataIndex: 'stepNo', name: 'stepNo',style : {'text-align' : 'left'},align: 'right',
            editor: {
                xtype: 'numberfield',
                hideTrigger: true,
                decimalPrecision: 5,
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() === e.ENTER) {
                            setTimeout(function () {
                                var grid = field.up('grid');
                                var store = grid.getStore();
                                var selectData = grid.getSelectionModel().getSelection()[0];
                                var dataIndex = store.indexOf(selectData);
                                var edit = grid.getPlugin();
                                edit.startEditByPosition({
                                    row: dataIndex + 1,
                                    column: 1
                                });
                            }, 500);
                        }
                    }

                }
            }
        },
        {
            header: '单价', dataIndex: 'stepPrice', name: 'stepPrice',style : {'text-align' : 'left'},align: 'right',
            editor: {
                xtype: 'numberfield',
                hideTrigger: true,
                decimalPrecision: 5,
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() === e.ENTER) {
                            setTimeout(function () {
                                var grid = field.up('grid');
                                var store = grid.getStore();
                                var selectData = grid.getSelectionModel().getSelection()[0];
                                var dataIndex = store.indexOf(selectData);
                                var edit = grid.getPlugin();
                                edit.startEditByPosition({
                                    row: dataIndex + 1,
                                    column: 2
                                });
                            }, 500);
                        }
                    }

                }
            }
        },
        {
            header: '单价单位', dataIndex: 'stepPriceUnit', name: 'stepPrice',
            editor: {
                xtype: 'numberfield',
                hideTrigger: true,
                decimalPrecision: 5,
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() === e.ENTER) {
                            setTimeout(function () {
                                var grid = field.up('grid');
                                var store = grid.getStore();
                                var selectData = grid.getSelectionModel().getSelection()[0];
                                var dataIndex = store.indexOf(selectData);
                                var edit = grid.getPlugin();
                                edit.startEditByPosition({
                                    row: dataIndex + 1,
                                    column: 3
                                });
                            }, 500);
                        }
                    }

                }
            }
        },
        {
            header: '保底金额', dataIndex: 'bottomPrice', name: 'bottomPrice1',style : {'text-align' : 'left'},align: 'right',
            editor: {
                xtype: 'numberfield',
                hideTrigger: true,
                decimalPrecision: 5,
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() === e.ENTER) {
                            setTimeout(function () {
                                var grid = field.up('grid');
                                var store = grid.getStore();
                                var selectData = grid.getSelectionModel().getSelection()[0];
                                var dataIndex = store.indexOf(selectData);
                                var edit = grid.getPlugin();
                                edit.startEditByPosition({
                                    row: dataIndex + 1,
                                    column: 4
                                });
                            }, 500);
                        }
                    }

                }
            }
        },
        {
            header: '备注', dataIndex: 'remark', name: 'remark',
            editor: {
                xtype: 'textfield',
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() === e.ENTER) {
                            setTimeout(function () {
                                var grid = field.up('grid');
                                var store = grid.getStore();
                                var selectData = grid.getSelectionModel().getSelection()[0];
                                var dataIndex = store.indexOf(selectData);
                                var edit = grid.getPlugin();
                                edit.startEditByPosition({
                                    row: dataIndex + 1,
                                    column: 5
                                });
                            }, 500);
                        }
                    }
                }
            }
        },
        {header: '编号', dataIndex: 'tariffId', hidden: true},
        {header: '创建人', dataIndex: 'createUserName', hidden: true},
        {
            header: '创建时间',
            dataIndex: 'createDate',
            xtype: 'datecolumn',
            format: 'Y-m-d H:i:s',
            align: 'center',
            hidden: true
        },
        {header: '修改人', dataIndex: 'updateUserName', hidden: true},
        {
            header: '修改时间',
            dataIndex: 'updateDate',
            xtype: 'datecolumn',
            format: 'Y-m-d H:i:s',
            align: 'center',
            hidden: true
        }
    ],
   /* plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })]*/
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1
    }
});

con:

 putrecordtraiffbillAdd: function (button) {
        //费用阶梯新增按钮触发
        // var grid=this.lookupReference("putrecorddetaillist");
        var grid = Ext.ComponentQuery.query('putrecorddetaillist',null,true);
        var records=grid.getSelectionModel().getSelection();
        if(records.length===1){
            var grid1 = button.up('grid');// 获得表格数据
            var store = grid1.getStore('putrecordTraiffBillStore');
            var p = {
                stepNo:'',
                stepPrice:'',
                stepPriceUnit:'',
                bottomPrice1:'',
                remark:''
            }
            store.insert(store.data.items.length, p);
        }else{
            Ext.Msg.alert("提示", '请选择费用项表的一行数据');
        }
    },

新增保存&删除:

savePutrecordDetailTraiff: function (button) {
        // 子点击保存触发
        var me = this;
        var grid = button.up("grid");
        var store = me.getStore("billingLadderStore");
        var putrecordList = new Array();
        var form = grid.down('form').getForm();
        if (form.isValid()) {
            for (var i = 0; i < store.getCount(); i++) {
                var record = store.getAt(i);
                putrecordList.push(record.data);
            }
            var mainValue = grid.down('form').getForm().getValues();
            var main = Ext.ComponentQuery.query('billingSchemeDetailListView', null, true);
            var headRecords = main.getSelectionModel().getSelection();
            // var mainRecords=me.getPutrecordlist().getSelectionModel().getSelection();
            const billingDetailId = headRecords[0].data.billingDetailId;
            mainValue.ladderList = putrecordList;
            mainValue.billingDetailId = billingDetailId
            Ext.Ajax.request({
                url: 'cus/billing/saveBillingLadder',
                /* params: form.getValues(), */
                jsonData: Ext.encode(mainValue),
                method: 'POST',
                success: function (response) {
                    var o = Ext.decode(response.responseText.toString());
                    if (o.success === true) {
                        // var store=me.getStore("PutrecordDetailStore");
                        store.proxy.extraParams = {
                            billingDetailId: billingDetailId
                        };
                        store.load();
                        // me.getStore("putrecordTraiffBillStore").removeAll();
                        Ext.Msg.alert("提示", "保存成功!");
                    } else {
                        Ext.Msg.alert("警告", o.message);
                    }
                },
                failure: function (response) {
                    Ext.Msg.alert("错误", response.responseText);
                }
            });
        }
    },
    onDelChildClick: function (button) {
        // 子表格点击删除按钮触发
        var me = this;
        // var grid=this.lookupReference('billingSchemeListView');
        var pgrid = Ext.ComponentQuery.query('billingSchemeListView', null, true);
        var precords = pgrid.getSelectionModel().getSelection();
        var store = me.getStore("billingDetailStore");
        var grid = button.up("grid");
        var records = grid.getSelectionModel().getSelection();
        if (records.length > 0) {
            Ext.Msg.confirm('询问', '是否确认删除？', function (buttonId) {
                if (buttonId === 'yes') {
                    // console.log(records[0].data.billingDetailId)
                    var idstr = "";
                    for (var j = 0; j < records.length; j++) {
                        if (records[j].data.billingDetailId === null || records[j].data.billingDetailId === "") {
                            /* 删除已经前台添加一行的数据 */
                            store.remove(records);
                        } else {
                            /* 删除已经添加到后台的数据 */
                            for (var i = 0; i < records.length; i++) {
                                if (i === 0) {
                                    idstr = records[i].data.billingDetailId;
                                } else {
                                    idstr = idstr + "," + records[i].data.billingDetailId;
                                }
                            }
                            Ext.Ajax.post({
                                url: 'cus/billing/deleteBillingDetail',
                                params: {
                                    billingDetailIdStr: idstr,
                                },
                                method: 'POST',
                                waitMsg: '正在处理,请稍等...',
                            }).then(result => {
                                Ext.Msg.alert("提示", "删除成功!");
                                var billingId = precords[0].data.billingId;
                                store.proxy.extraParams = {
                                    billingId: billingId
                                };
                                store.loadPage(1);
                            }).catch(error => {
                                Ext.Msg.alert("警告", error.message);
                            });
                        }
                    }

                }
            });
        } else {
            Ext.Msg.alert("提示", '请选择要删除的数据');
        }
    },
sxsxsxsxsxsxsx1
关注
Extjs 4.1 grid 动态添加行
yuan826650811的博客
06-04 893
//设置数据源 var store = Ext.create('Ext.data.Store', {    storeId:'store',    fields:['name', 'value'],    data: [        {name:'Lisa', value:'lisa@simpsons.com'},        {name:'Marge', value:'mar
Extjs grid添加一个图片状态或者按钮的方法
10-26
在ExtJS框架中，对Grid组件添加图片或按钮以表示特定状态或执行特定操作是一种常见需求。我们可以通过几种方法实现这一功能，下面详细阐述： 一、使用renderer为Grid列添加图片状态 renderer是一个用于渲染Grid中...
extjs_03_grid(增加数据)
那些疯狂到以为自己能够改变世界的人，才能真正改变世界！
06-23 1187
extjs_03_grid(增加数据) 弹出增加窗口，显示增加的数据.
extjs editgrid增加一行
weixin_30652491的博客
11-25 340
Ext.onReady(function(){ /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容，出现三角号表示已经被修改过 * 5、程序内部变化：将记录设...
extjs-grid数据加载
香酥蟹的博客
01-07 1824
1、grid并没提供直接加载对象和对象数组的方法，但是可以通过其他的方式实现，所以我这里写了一个实现这样功能的方法arr2grid（即供参考）。grid只依赖一个store，所以受限，方法arr2grid，可以解决这个问题。 2、store配置autoLoad和使用load方法，都可以加载数据到store，grid依赖store，从而数据也就加载到grid上，本事例只是jsonp跨域加载store
Extjs5.1 Grid动态插入一行数据并置顶
热门推荐
三天不读书，感觉像只猪
01-04 2万+
最近找了下Grid动态插入的方法,但是网上的方法都不好使,版本太低了,毕竟现在用ext的比较少了,所以使劲看API,功夫不负有心人,终于找到了个有用的方法:所以,顺利解决问题grid.getStore().insert(0, { "name": "queue", "age": 18 });//动态添加一条数据到Grid里 alarmGrid.getView().refresh();/
关于extjs4如何获取grid修改后的数据的问题
12-09
EXTJS4的Grid控件提供了一种事件驱动的方式来监控数据的更改。当用户对Grid中的单元格进行编辑时，会触发一个“edit”事件。我们可以监听这个事件，从而获取到与数据变更相关的详细信息。 首先，我们需要在Grid配置...
给Extjs的GridPanel增加“合计”行
08-09
在实际应用中，我们经常需要在GridPanel底部显示一行“合计”行，以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先，我们需要...
extjs grid设置某列背景颜色和字体颜色的实现方法
12-09
在实际应用中，我们可能需要根据数据的状态或者特定条件来改变某一列或某一行的背景颜色和字体颜色，以突出显示某些信息。下面将详细解释如何在EXTJS Grid中实现这一功能。 首先，我们要理解EXTJS Grid中的`...
extjs grid设置某列背景颜色和字体颜色的方法
10-28
这个方法会为每一行返回一个CSS类，这个类会被添加到行的DOM元素上。例如，我们可以检查记录的数据，如果满足特定条件，就返回一个带有颜色设定的类： ```javascript viewConfig: { forceFit: true, ...
在DataGrid中添加新行
11-28
在DataGrid中添加新行
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
09-04
主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
Ext EditorGridPanel 添加一行.通用解决办法
Java 世界
05-10 414
[code="js"] insertRows : function(){ /* this = EditorGridPanel this.store.recordType() = Recrod类型 */ var recrod = new this.store.recordType(); /* 因为有的时候我们不是通过E...
我们项目中对Ext.gird.EditorGridPanel是如何添加一行，删除一行的
One step at a time!一步一个脚印
12-16 1411
添加一行的方法： function ext2_addLine(extGrid) { //传入的对象为EditorGridPanel if(typeof(extGrid) == Ext.grid.EditorGridPanel) { //hack extGrid.stopEditing(); } var stores = extGrid.getStore(); var f
Extjs 3.X 和 Extjs 4.x 为GridPanel动态添加一行数据的区别
evilcry2012的专栏
04-29 445
Extjs 3.X 和 Extjs 4.x 为GridPanel动态添加一行数据的区别  分享| 2014-11-11 10:05蛋疼TA0165 | 浏览 1595 次  Javascript 2014-11-12 11:58 提问者采纳 1 2 3 4 5 6 7 8
Extjs 实现动态添加gridPanel的列和数据
weixin_33798152的博客
11-25 572
最近几天在我们的.net项目中有一个单据要实现根据用户选择条件动态添加gridPanel的对应列和数据。 以前的页面及数据实现是在页面上直接显示gridPanel控件，并对应一个store。数据则在cs中赋值。这次则改在js中创建gridPanel对象，render到页面。store用jsonReader，所以数据格式应为json的。 大致步骤是:页面通过js请求到handler，获取数据(j...
extjs表格底部增加多个菜单统计
逆风小径上勇敢の哥哥
04-09 200
说明 tbar代表顶部工具条 bbar表示底部工具条 构建 初始化时，增加工具条，注意xtype类型，要平铺，不然文字多了会撑不下 initComponent : function() { this.store = this.createStore(); this.sm = this.createSm(); this.createLinks(); this.cm = this.createCM(); this.tbar = this.createTopBar(); this.
extjs4 grid 动态插入数据行
冷月宫主的专栏
04-16 8192
ExtJS4学习笔记十－－Grid使用 http://hnhnhnhnhn.iteye.com/blog/1163370 ExtJS 4 Grid组件 http://blog.csdn.net/tianxiaode/article/details/6251723 extjs4--grid动态添加一行和删除行 http://blog.sina.com.cn/s/blog_6f7ef654
Extjs grid单元格赋值
樱花园丁
01-10 2422
//给grid的某个单元格赋值 var grid =Ext.getCmp("gridModel"); //某格子赋值 //grid.getStore().getAt(行索引).set("列名", 值) grid.getStore().getAt(0).set("index", "12") //多行赋值 for (var i = 0; i &lt; grid.getStore().getCo...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值