[Ext JS] Grid表格批量编辑的实现| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS] Grid表格批量编辑的实现

Grid使用表格的形式显示数据， 在实际的场景中， 除了查看数据之外， 往往还有在表格中直接编辑数据的需求。编辑的方式有：
- 单行编辑
- 批量编辑

单行编辑可以通过行编辑插件(Ext.grid.plugin.RowEditing )或者单元格编辑插件（ Ext.grid.plugin.CellEditing ）实现，批量编辑的实现在不同的Ext JS 版本中有不同的实现方式。
Ext JS 5 及之后版本的编辑列 - widgetcolumn
在Ext JS 5.0.0 之后， Ext JS 提供了专门的可以用于编辑的列类型——组件列（Ext.grid.column.Widget），组件列的用途就是这一列可以定义成需要的组件形式， 也就包含输入框或者下拉框等组件， 进而也就实现了对这一列批量编辑的效果。使用上也很简单， 就是在定义Grid的columns 时， 把需要编辑的列的xtype 定义为widgetcolumn，然后通过widget定义组件类型， 举例来看：
```javascript
{                   
	  xtype:'grid',                    
	  title:'widgetcolumn实现列批量编辑',                    
	  columns:[{                        
	  text:'武将名',                        
	  dataIndex:'name'                    
	  },{                        
	  text:'级别',                        
	  dataIndex:'level',                        
	  xtype:'widgetcolumn',                        
	  widget: {                            
	  xtype:'textfield'                        
	  }                    
	  }],                    
	  store:store                
	  }
```

以上显示的效果如下图：
![](/upload/picture/2022-09-27/upload_60be1a8dfa3ef41981b96a89a06a3f2d.png)
上面的演示代码只是显示了效果， 从功能上了说上面的的代码还少了一句， 就是输入框的显示和Store数据之间的绑定， 也即是当输入框的值发生改变的时候， 是否能立即反应到Store 对应的数据呢？这也是ViewModel 的作用， 视图和模型数据的绑定。
要实现绑定， 需要加上类似 bind: '{record.level}' 的代码， 所以考虑功能，上面widget 的完整定义是：

```javascript
 widget: {                            
 	xtype:'textfield',                            
 	bind: '{record.level}'                        
 }
```

在实际开发场景中， 可能会遇到这种需求： 如何能让某些特定的行不可以编辑呢？
批量编辑中某些特定的行不需要编辑
当某一行的数据满足某些条件时， 不需要进行编辑了，以上面的例子来说，假设剧情发展到关羽败走麦城， 被斩于临沮， 则关羽一行就不需要编辑了。
最直观想到的解法是： 是否满足条件行所对应的列的widget 隐藏起来就可以了呢？ 答案是这个解法行不通， 因为隐藏了组件， 对应的数据也就不显示了。
不能输入， 还可以通过设置组件的readonly 来实现， 但是， 仅设置readonly , 输入框的边框和底色还是存在，消除边框和底色可以通过设置CSS 样式达成。 所以， 最终的解法是：
设置readonly + 设置CSS。具体实现通过 onWidgetAttach 进行设置， 示例代码如下：

javascript
                {
        text: '级别',
        dataIndex: 'level',
        xtype: 'widgetcolumn',
        widget: {
        xtype: 'textfield',
        bind: '{record.level}'
        },
        onWidgetAttach: function(col, widget, rec) {
        if('关羽' == rec.get('name')){
        widget.setReadOnly(true);
        widget.addCls('my-display-input');
        }
        }
        }

实现的效果如下图：
![](/upload/picture/2022-09-27/upload_979ad208e921cd2b9751a276b1d6072f.png)
关于WidgetColumn 的更多使用， 可以参考：
5.10 Ext JS Grid中 WidgetColumn(组件列)的使用
Ext JS 4 的批量编辑的扩展类类型 - componentcolumn
在Ext JS 4和之前的版本，官方并没有提供 widgetcolumn 的类型，遇到批量编辑的需求可以通过一些曲线的方式达成， 但较为便捷的还是使用第三方提供的扩展实现-componentcolumn。要使用这个扩展，需要导入两个文件：
CTemplate.js
Component.js
导入这两个文件之后， 同样是使用 xtype 定义列类型， 类型是’componentcolumn’，但是组件的定义则是使用renderer (渲染器)的方式， renderer 一般使用在对值进行渲染， 比如增减字串，设置加粗、颜色样式等。 在这里使用renderer 返回组件的配置对象， 类似：
```javascript
{                        
	text: '级别',                        
	dataIndex: 'level',                        
	xtype: 'componentcolumn',                        
	renderer: function (level) {                            
	return {                                
	xtype: 'textfield',                                
	value: level                            
	}                        
}                    
}
```

这种方式的最终实现的效果和上面类似：
![](/upload/picture/2022-09-27/upload_f96c4f204feb6d2e3c77624f88ffc4c8.png)
该方式在处理某些行不需要编辑模式的场景更为简洁， 只需要更改renderer 配置的xtype为displayfield 就可以了。
关于componentcolumn 的详细使用可以参考：
[Ext JS 4] 实战之Grid, Tree Gird编辑Cell
本篇在线演示地址
https://osxm.github.io/extjs_dev_ency/demos/chp05/grid-batchedit.html
![](/upload/picture/2022-09-27/upload_e7884046029ba453bc2b0fd67c3e607e.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS] Grid表格批量编辑的实现

网站导航