码迷,mamicode.com
首页 > 其他好文 > 详细

EazyUI Grid和TreeGrid的 CheckBox 模式

时间:2015-08-04 15:39:39      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:grid多选   treegrid多选   eazyui grid多选   ezyui treegrid多选   grid treegrid checkb   

先上效果图

技术分享

技术分享

 

 

 

Grid 模式

$('#rdg').datagrid({
		//pageNumber:1,
		title:'角色列表',
		striped: true,  
		iconCls:'icon-list' ,
		//pagination:true,
		rownumbers: true,     
		//singleSelect:true,
		method: 'POST',
		//pageSize:20,
		//pageList:[20],
		fitColumns:true,
		fit:true,
		url: '/User/getRole',
		onBeforeLoad: function (param) {
			param.falg = new Date();
			param.id =$.trim($("#hidid").val());
        },
		loadMsg:'数据加载中请稍后……',  
		onLoadSuccess:function(data){
			if(data){
				$.each(data.rows, function(index, item){	
					if(item.ck=="1"){
						$('#rdg').datagrid('checkRow', index);
					}
				});
			}
		},
		columns : [ [ 
		              {field : 'ck',title : 'ck',width : 60,align : 'left',checkbox:true},
		              {field : 'name',title : '角色名',width : 60,align : 'left'}, 
		              {field : 'description',title : '描述',width : 240,align : 'left'}
		              ] ]
	});

grid 获取

var rows = $(‘#rdg‘).datagrid("getChecked");

 

TreeGrid

var treeData=[];

$('#rdg').treegrid({
		idField: 'id',
		treeField: 'title',
		//pageNumber:1,
		title:'菜单列表',
		striped: true,  
		iconCls:'icon-list' ,
		animate:true,
		//pagination:true,
		rownumbers: true,     
		singleSelect:false,
		method: 'POST',
		//pageSize:20,
		//pageList:[20],
		fitColumns:true,
		fit:true,
		//url: '/User/getRole',
		loadMsg:'数据加载中请稍后……',  
		onLoadSuccess:function(){
			if(treeData.length>0){
				$.each(treeData, function(index, item){	
					if(item.ck=="1"){
						$('#rdg').treegrid('checkRow',item.id);
					}
				});
			}
		},
		columns : [ [ 
		              {field : 'ck',title : 'ck',width : 60,align : 'left',checkbox:true},
		              {field : 'icon',title : '图标',width : 30,align : 'center',formatter:function(value,row,index){
		            	  return "<span class='"+value+"'>    </span>";
		              }},
		              {field : 'title',title : '标题',width : 240,align : 'left'}
		              ] ]
	});
	$("#rdg").treegrid("loading");
	$.post("/Role/getMenu",{flag:new Date().getTime(),id:$.trim($("#hidid").val())},function(data){
		treeData=data;
		var rows=arrayToTree(data,"id","pid");
		$('#rdg').treegrid("loadData",rows);
		$("#rdg").treegrid("loaded");
	});


 

treegrid 获取

var rows = $(‘#rdg‘).treegrid("getChecked");


 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

EazyUI Grid和TreeGrid的 CheckBox 模式

标签:grid多选   treegrid多选   eazyui grid多选   ezyui treegrid多选   grid treegrid checkb   

原文地址:http://blog.csdn.net/qq873113580/article/details/47277219

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!