Ext.grid.CheckboxSelectionModel

最新推荐文章于 2020-07-14 14:07:30 发布

itlwc

最新推荐文章于 2020-07-14 14:07:30 发布

阅读量1w

点赞数 1

分类专栏： Extjs 文章标签： function json class div

本文链接：https://blog.youkuaiyun.com/itlwc/article/details/7919446

版权

Extjs 专栏收录该内容

42 篇文章

订阅专栏

1.CheckboxSelectionModel简写sm
2.实现sm是否显示
后台传入的json对象包含selected属性

{root:[
	{id:'1',code:'1001',name:'老李',sex:'1',age:'23',selected:false},
	{id:'2',code:'1002',name:'懒蛋',sex:'1',age:'25',selected:true}
]}

要实现此功能必须也处理全选问题

var sm = new Ext.grid.CheckboxSelectionModel({ 
	checkOnly:true,
	/*
		解决sm全选不选中不显示的sm
	*/
	selectAll : function(){
		sm.clearSelections();//清除全部的选区
		var storeLength = sm.grid.store.getCount();
		for(var i = 0; i < storeLength; i++){
			var record = sm.grid.store.getAt(i);
			//获取record中selected的值
			var selected = record.data['selected'];
			if(!selected){
				var id = record.get('id');
				//传入一个id，根据id查询缓存里的Record，返回其索引
				var si = store.indexOfId(id);
				sm.selectRow(i, true);
			}
		}    
	},
	/*
		解决sm是否显示问题
	*/
	renderer:function(v, p, record){
		//获取record中selected的值
		var selected = record.data['selected'];
		if(!selected){
			//selected为false时候显示
			return '<div class="x-grid3-row-checker"> </div>';
		}else{
			//selected为true显示空
			return '';
		}
    }
});

3.sm配置项

var sm = new Ext.grid.CheckboxSelectionModel({  
    //只允许用户通过复选框执行选中操作
    handleMouseDown : Ext.emptyFn,
    //true表示只允许选择单行  
    singleSelect : true  
});