[Ext js]Grid行选择的多种场景和实现方式| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext js]Grid行选择的多种场景和实现方式

## Grid行选择的多种场景和实现方式
Grid的行选择有多种实现方式，可以应用在不同的场景， 本篇介绍三种实现方式：
使用selModel 实现
使用 checkcolumn 类型的列
使用widgetcolumn 类型的列
### 使用selModel 实现Grid的行方式
Gird行选择比较习惯的方式是在首列提供提供复选框进行选择， 最简单的就是在Grid的定义中增加
selModel:'checkboxmodel', 配置， 该配置的意思是设置Grid的选择模式为复选框模式， 直接看示例代码：
```JSON
{      
	xtype: 'grid',  
	title: 'Grid 复选框的选择模式',      
	selModel:'checkboxmodel',    
	columns: [{       
	text: '姓名',     
	dataIndex: 'name'     
	}, {          
	text: '都城',    
	dataIndex: 'city'  
	}],       
	store: [{ 
	"name": "曹操", 
	"city": "豫州"  
	}, {           
	"name": "刘备", 
	"city": "荆州"  
	}, {           
	"name": "孙权", 
	"city": "扬州"  
	}]    
}
```

以上代码实现的效果如下：
![](/upload/picture/2022-10-11/upload_47c8552d1d3cd23c732b1fce284d06b1.png)
该选择方式使用 Grid 的getSelection()方法就可以获取选择的Ext.data.Model类型的数组， 该选择方式的好处有：
实现简单， 不需要额外的列和数据
获取值很简单
可以实现全选
但是如果需要某些列默认选取的话，这种方式就比较困难了，可以考虑增加一个checkcolumn 的列。
### 使用 checkcolumn 类型的列
如果某行该列的值是true的话则默认会选取， 如果是false 则不会选取。
示例代码：
```javascript
{   
	xtype: 'grid',   
	title: '复选框列的选择模式',  
	columns: [{           
	xtype:'checkcolumn',    
	dataIndex: 'mychecked'       
	},{        
	text: '姓名',    
	dataIndex: 'name'  
	}, {       
	text: '都城',  
	dataIndex: 'city'  
	}],    
	store: [{    
	"name": "曹操",  
	"city": "豫州"      
	}, {        
	"name": "刘备",     
	"city": "荆州"   
	}, {       
	"name": "孙权",    
	"city": "扬州"    
	}]  
}

```
示例效果如下：
![](/upload/picture/2022-10-11/upload_d9f4d45350c90dd47e77e23fc6b76145.png)
Checkbox的选取和Store中某个属性的值是绑定的， 如果侦测到改动的话，左上角会出现一个红色的修改标记。
如果该属性值是true，则Checkbox会自动选取
获取那些行是否被选取只需要判断Store中的值即可。
checkcolumn 会给每一行都增加一个复选框，但是要实现复选框根据某些条件决定是否显示的话， 虽然column 提供了renderer属性， 但是这个配置主要是对值进行一些设置，比如修改值得显示和样式，对于复选框类型，要实现隐藏还是比较困难， 这时可以考虑使用widgetcolumn 。
##使用widgetcolumn 类型的列
widgetcolumn 类型的列可以设置编辑类型的组件， 比如复选框，下拉框以及图表等， 这里实现复选框代码如下：
```json
{      
	xtype: 'grid',
	title: '组件列类型（widgetcolumn）实现部分行不出现复选框列的选择模式',  
	columns: [{  
	xtype:'widgetcolumn',    
	widget: {           
	xtype: 'checkbox',  
	bind: '{record.checked}',  
	listeners:{      
	afterrender:function(thisCheckBox,opt){ 
	var record = thisCheckBox.getWidgetRecord();    
	var show = record.get('showcheckbox');     
	if(!show) thisCheckBox.setHidden(true);         
	}          
	}         
	}    
	},{   
	text: '姓名',        
	dataIndex: 'name'
	}, {     
	text: '都城',      
	dataIndex: 'city'     
	}],      
	store: [{  
	"name": "曹操",     
	"city": "豫州",       
	"showcheckbox":true   
	}, {        
	"name": "刘备",   
	"city": "荆州"    
	}, {         
	"name": "孙权",    
	"city": "扬州",    
	"showcheckbox":true  
	}]    
}
```

代码示例效果如下：
![](/upload/picture/2022-10-11/upload_d330be9729a44c7447487765b9023a00.png)
上面的示例代码中， Store中有一个 showcheckbox的属性，widgetcolumn 中根据该值判断是否显示复选框组件。复选框是否选取可以使用其他的属性判断。
本篇在线示例
https://osxm.github.io/extjs_dev_ency/#gridselectdemo

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext js]Grid行选择的多种场景和实现方式

网站导航