我欲封天_[Ext JS] Grid表格批量編輯的實(shí)現| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS] Grid表格批量編輯的實(shí)現

Grid使用表格的形式顯示數據， 在實(shí)際的場(chǎng)景中， 除了查看數據之外， 往往還有在表格中直接編輯數據的需求。編輯的方式有：
- 單行編輯
- 批量編輯

單行編輯可以通過(guò)行編輯插件(Ext.grid.plugin.RowEditing )或者單元格編輯插件（ Ext.grid.plugin.CellEditing ）實(shí)現，批量編輯的實(shí)現在不同的Ext JS 版本中有不同的實(shí)現方式。
Ext JS 5 及之后版本的編輯列 - widgetcolumn
在Ext JS 5.0.0 之后， Ext JS 提供了專(zhuān)門(mén)的可以用于編輯的列類(lèi)型——組件列（Ext.grid.column.Widget），組件列的用途就是這一列可以定義成需要的組件形式， 也就包含輸入框或者下拉框等組件， 進(jìn)而也就實(shí)現了對這一列批量編輯的效果。使用上也很簡(jiǎn)單， 就是在定義Grid的columns 時(shí)， 把需要編輯的列的xtype 定義為widgetcolumn，然后通過(guò)widget定義組件類(lèi)型， 舉例來(lái)看：
```javascript
{                   
	  xtype:'grid',                    
	  title:'widgetcolumn實(shí)現列批量編輯',                    
	  columns:[{                        
	  text:'武將名',                        
	  dataIndex:'name'                    
	  },{                        
	  text:'級別',                        
	  dataIndex:'level',                        
	  xtype:'widgetcolumn',                        
	  widget: {                            
	  xtype:'textfield'                        
	  }                    
	  }],                    
	  store:store                
	  }
```

以上顯示的效果如下圖：
![](/upload/picture/2022-09-27/upload_60be1a8dfa3ef41981b96a89a06a3f2d.png)
上面的演示代碼只是顯示了效果， 從功能上了說(shuō)上面的的代碼還少了一句， 就是輸入框的顯示和Store數據之間的綁定， 也即是當輸入框的值發(fā)生改變的時(shí)候， 是否能立即反應到Store 對應的數據呢？這也是ViewModel 的作用， 視圖和模型數據的綁定。
要實(shí)現綁定， 需要加上類(lèi)似 bind: '{record.level}' 的代碼， 所以考慮功能，上面widget 的完整定義是：

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

在實(shí)際開(kāi)發(fā)場(chǎng)景中， 可能會(huì )遇到這種需求： 如何能讓某些特定的行不可以編輯呢？
批量編輯中某些特定的行不需要編輯
當某一行的數據滿(mǎn)足某些條件時(shí)， 不需要進(jìn)行編輯了，以上面的例子來(lái)說(shuō)，假設劇情發(fā)展到關(guān)羽敗走麥城， 被斬于臨沮， 則關(guān)羽一行就不需要編輯了。
最直觀(guān)想到的解法是： 是否滿(mǎn)足條件行所對應的列的widget 隱藏起來(lái)就可以了呢？ 答案是這個(gè)解法行不通， 因為隱藏了組件， 對應的數據也就不顯示了。
不能輸入， 還可以通過(guò)設置組件的readonly 來(lái)實(shí)現， 但是， 僅設置readonly , 輸入框的邊框和底色還是存在，消除邊框和底色可以通過(guò)設置CSS 樣式達成。 所以， 最終的解法是：
設置readonly + 設置CSS。具體實(shí)現通過(guò) onWidgetAttach 進(jìn)行設置， 示例代碼如下：

javascript
                {
        text: '級別',
        dataIndex: 'level',
        xtype: 'widgetcolumn',
        widget: {
        xtype: 'textfield',
        bind: '{record.level}'
        },
        onWidgetAttach: function(col, widget, rec) {
        if('關(guān)羽' == rec.get('name')){
        widget.setReadOnly(true);
        widget.addCls('my-display-input');
        }
        }
        }

實(shí)現的效果如下圖：
![](/upload/picture/2022-09-27/upload_979ad208e921cd2b9751a276b1d6072f.png)
關(guān)于WidgetColumn 的更多使用， 可以參考：
5.10 Ext JS Grid中 WidgetColumn(組件列)的使用
Ext JS 4 的批量編輯的擴展類(lèi)類(lèi)型 - componentcolumn
在Ext JS 4和之前的版本，官方并沒(méi)有提供 widgetcolumn 的類(lèi)型，遇到批量編輯的需求可以通過(guò)一些曲線(xiàn)的方式達成， 但較為便捷的還是使用第三方提供的擴展實(shí)現-componentcolumn。要使用這個(gè)擴展，需要導入兩個(gè)文件：
CTemplate.js
Component.js
導入這兩個(gè)文件之后， 同樣是使用 xtype 定義列類(lèi)型， 類(lèi)型是’componentcolumn’，但是組件的定義則是使用renderer (渲染器)的方式， renderer 一般使用在對值進(jìn)行渲染， 比如增減字串，設置加粗、顏色樣式等。 在這里使用renderer 返回組件的配置對象， 類(lèi)似：
```javascript
{                        
	text: '級別',                        
	dataIndex: 'level',                        
	xtype: 'componentcolumn',                        
	renderer: function (level) {                            
	return {                                
	xtype: 'textfield',                                
	value: level                            
	}                        
}                    
}
```

這種方式的最終實(shí)現的效果和上面類(lèi)似：
![](/upload/picture/2022-09-27/upload_f96c4f204feb6d2e3c77624f88ffc4c8.png)
該方式在處理某些行不需要編輯模式的場(chǎng)景更為簡(jiǎn)潔， 只需要更改renderer 配置的xtype為displayfield 就可以了。
關(guān)于componentcolumn 的詳細使用可以參考：
[Ext JS 4] 實(shí)戰之Grid, Tree Gird編輯Cell
本篇在線(xiàn)演示地址
https://osxm.github.io/extjs_dev_ency/demos/chp05/grid-batchedit.html
![](/upload/picture/2022-09-27/upload_e7884046029ba453bc2b0fd67c3e607e.png)

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS] Grid表格批量編輯的實(shí)現

網(wǎng)站導航