`
jxd_zxf
  • 浏览: 231342 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

treegrid级联勾选或深度级联勾选扩展:两种扩展

阅读更多

treegrid没有级联勾选,要用怎么办?自己扩展呗~

 

先明确两个概念:

1、级联勾选:不包括未加载的子节点

2、深度级联勾选:包括未加载的子节点

 

两种思路:

1、扩展个新方法cascadeCheck,当需要进行级联勾选时,调用该方法进行级联勾选或不勾选。

2、扩展onLoadSuccess方法,添加一个自定义属性:cascadeCheck(级联)或deepCascadeCheck(深度级联),通过监听checkbox的click事件判断是否级联或深度级联来进行级联勾选或不勾选。

 

第一种扩展,因为是调用方法的,所以使用起来比较灵活,你可以在单击事件里使用,也可以在双击事件、右键菜单等里面使用;第二种扩展,因为是事件监听,只要设置了属性就会自动进行级联操作。

 

以下贴上两种扩展的代码:

【第一种】扩展一个方法cascadeCheck

/**
	 * 扩展树表格级联勾选方法:
	 * @param {Object} container
	 * @param {Object} options
	 * @return {TypeName} 
	 */
	$.extend($.fn.treegrid.methods,{
		/**
		 * 级联选择
	     * @param {Object} target
	     * @param {Object} param 
		 *		param包括两个参数:
	     *			id:勾选的节点ID
	     *			deepCascade:是否深度级联
	     * @return {TypeName} 
		 */
		cascadeCheck : function(target,param){
			var opts = $.data(target[0], "treegrid").options;
			if(opts.singleSelect)
				return;
			var idField = opts.idField;//这里的idField其实就是API里方法的id参数
			var status = false;//用来标记当前节点的状态,true:勾选,false:未勾选
			var selectNodes = $(target).treegrid('getSelections');//获取当前选中项
			for(var i=0;i<selectNodes.length;i++){
				if(selectNodes[i][idField]==param.id)
					status = true;
			}
			//级联选择父节点
			selectParent(target[0],param.id,idField,status);
			selectChildren(target[0],param.id,idField,param.deepCascade,status);
			/**
			 * 级联选择父节点
			 * @param {Object} target
			 * @param {Object} id 节点ID
			 * @param {Object} status 节点状态,true:勾选,false:未勾选
			 * @return {TypeName} 
			 */
			function selectParent(target,id,idField,status){
				var parent = $(target).treegrid('getParent',id);
				if(parent){
					var parentId = parent[idField];
					if(status)
						$(target).treegrid('select',parentId);
					else
						$(target).treegrid('unselect',parentId);
					selectParent(target,parentId,idField,status);
				}
			}
			/**
			 * 级联选择子节点
			 * @param {Object} target
			 * @param {Object} id 节点ID
			 * @param {Object} deepCascade 是否深度级联
			 * @param {Object} status 节点状态,true:勾选,false:未勾选
			 * @return {TypeName} 
			 */
			function selectChildren(target,id,idField,deepCascade,status){
				//深度级联时先展开节点
				if(!status&&deepCascade)
					$(target).treegrid('expand',id);
				//根据ID获取下层孩子节点
				var children = $(target).treegrid('getChildren',id);
				for(var i=0;i<children.length;i++){
					var childId = children[i][idField];
					if(status)
						$(target).treegrid('select',childId);
					else
						$(target).treegrid('unselect',childId);
					selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点
				}
			}
		}
	});

 

该方法需要一个参数

param={

    id:'节点id',//这里的id其实是所选行的idField列的值

    deepCascade:true  //true:深度级联,false:级联

}

 

使用该方法的时候需要注意:

1、singleSelect=false,明显要支持多选

2、{field:'ck',checkbox:true},当然勾选框也不能少

3、idField需要设置,不然找不着id了。idField的意义就不多说了~

使用示例:

$('#test').treegrid({
				...
				idField:'code',//需设置
				treeField:'code',
				singleSelect:false,//需设置
				columns:[[
					{field:'ck',checkbox:true},//需设置
					{title:'Code',field:'code',width:200},
					....
				]],
				onClickRow:function(row){
					//级联选择
					$(this).treegrid('cascadeCheck',{
						id:row.code, //节点ID
						deepCascade:true //深度级联
					});
				}
			});

 

【第二种】扩展treegrid的onLoadSuccess事件,代码如下:

/**
	 * 扩展树表格级联选择(点击checkbox才生效):
	 * 		自定义两个属性:
	 * 		cascadeCheck :普通级联(不包括未加载的子节点)
	 * 		deepCascadeCheck :深度级联(包括未加载的子节点)
	 */
	$.extend($.fn.treegrid.defaults,{
		onLoadSuccess : function() {
			var target = $(this);
			var opts = $.data(this, "treegrid").options;
			var panel = $(this).datagrid("getPanel");
			var gridBody = panel.find("div.datagrid-body");
			var idField = opts.idField;//这里的idField其实就是API里方法的id参数
			gridBody.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").click(function(e){
				if(opts.singleSelect) return;//单选不管
				if(opts.cascadeCheck||opts.deepCascadeCheck){
					var id=$(this).parent().parent().parent().attr("node-id");
					var status = false;
					if($(this).attr("checked")) status = true;
					//级联选择父节点
					selectParent(target,id,idField,status);
					selectChildren(target,id,idField,opts.deepCascadeCheck,status);
					/**
					 * 级联选择父节点
					 * @param {Object} target
					 * @param {Object} id 节点ID
					 * @param {Object} status 节点状态,true:勾选,false:未勾选
					 * @return {TypeName} 
					 */
					function selectParent(target,id,idField,status){
						var parent = target.treegrid('getParent',id);
						if(parent){
							var parentId = parent[idField];
							if(status)
								target.treegrid('select',parentId);
							else
								target.treegrid('unselect',parentId);
							selectParent(target,parentId,idField,status);
						}
					}
					/**
					 * 级联选择子节点
					 * @param {Object} target
					 * @param {Object} id 节点ID
					 * @param {Object} deepCascade 是否深度级联
					 * @param {Object} status 节点状态,true:勾选,false:未勾选
					 * @return {TypeName} 
					 */
					function selectChildren(target,id,idField,deepCascade,status){
						//深度级联时先展开节点
						if(status&&deepCascade)
							target.treegrid('expand',id);
						//根据ID获取下层孩子节点
						var children = target.treegrid('getChildren',id);
						for(var i=0;i<children.length;i++){
							var childId = children[i][idField];
							if(status)
								target.treegrid('select',childId);
							else
								target.treegrid('unselect',childId);
							selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点
						}
					}
				}
				e.stopPropagation();//停止事件传播
			});
		}
	});

 

 使用该扩展的时候需要注意:

1、singleSelect=false,明显要支持多选

2、级联是还需要配置属性(自定义属性,API没有):

       cascadeCheck :true  //普通级联(不包括未加载的子节点)
       deepCascadeCheck :true //深度级联(包括未加载的子节点)

3、{field:'ck',checkbox:true},当然勾选框也不能少

4、idField同样需要设置,不然找不着id了。

 

好了,两种扩展思路均已实现,喜欢用哪种,自己选择吧,当然两种一起使用也是没问题的,呵呵~

 

分享到:
评论
3 楼 low_key_DOG 2014-02-21  
请问 作者该方法当数据有600多行 性能如何
2 楼 zhchengda 2013-05-03  
你好,我是个新手正需要写这样一个功能,能封装个demo给参考下吗,谢谢!
1 楼 thisisone 2012-05-28  
楼主,请问你是上文的原始作者吗?
我主要看了你的第二个扩展,发现有点小问题,就是关于节点取消选择时候,其父节点的处理上面.
当取消某节点时候,其父节点是否取消,取决于当前节点的兄弟节点是否有被选择

相关推荐

    jQuery Easyui Treegrid实现显示checkbox功能

    级联勾选;通关类型判断显示包库/还是镜像(列有所不同,镜像共4列),勾选一个复选框,后面的复选框变为不可勾选状态。 下面是具体代码: 1,初始化treegrid,(其中有几个type列,是由后台人员提供的字段名,虽然...

    easyui的Treegrid扩展

    EasyUI的Treegrid扩展是一种对原生EasyUI TreeGrid组件的功能增强,主要目的是提供更加灵活的数据展示和操作方式。在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而...

    treegrid动态加载tree级联更新下拉列表动态计算数量乘以单价的和

    treegrid动态加载tree级联更新下拉列表,保存让下拉列表显示名称,不是id,和动态计算数量乘以单价的和,和总合计,添加一列删除一列,撤回,保存的合计。

    基于layui的树表格-treeGrid

    - 配置TreeGrid:定义元素ID,设置数据源、列配置、事件处理等参数,然后调用layui.treeGrid()方法创建TreeGrid实例。 - 数据加载:可以通过异步请求或直接传入数据来填充TreeGrid。异步请求时,通常采用layui的...

    treegrid.zip_treeGrid wpf_treegrid_treegrid wpf c#_wpf 树状表格_wpf树

    TreeGrid是一种控件,它允许用户以树形结构展示数据,并且每个节点可以展开或折叠,显示或隐藏其子节点。在WPF中,我们通常通过继承或组合已有的控件来实现这样的功能,比如将TreeView与DataGrid结合起来。 要创建...

    带复选框的TreeGrid

    TreeGrid是一种特殊的表格控件,它结合了树形结构和数据网格的特点,广泛应用于数据管理和展示。在IT领域,尤其是在Web开发中,TreeGrid被用来处理层级关系复杂的数据,允许用户以折叠/展开的方式查看和操作数据。...

    treegrid的使用详解

    TreeGrid将普通的表格数据扩展为具有折叠和展开特性的树状结构,每个行都可以作为父节点或子节点存在。用户可以点击父节点来展开或收起其子节点,这样就能在有限的空间里展示大量的层级信息。 在使用TreeGrid时,...

    TreeGrid

    1. **无限层级**:TreeGrid支持无限级别的深度,这意味着你可以将任意多的子节点嵌套在父节点下,这对于展现具有层次关系的大量数据特别有用,如组织结构、文件系统或数据库的表关系。 2. **拖拽功能**:通过拖放...

    数据结构之easyui-treegrid

    3. 初始化TreeGrid:在JavaScript中,通过`$('#tableId').treegrid(options)`来初始化TreeGrid。`options`是一个包含各种配置项的对象,例如列定义(columns)、数据源(data)等。 4. 数据加载:数据可以静态写入...

    treegrid_barku4k_treegrid_jqueryajax_

    TreeGrid是一种将表格数据以树形结构展示的前端组件,常用于管理层次关系的数据,如组织结构、文件系统等。在本案例中,“treegrid_barku4k_treegrid_jqueryajax_”是一个基于jQuery的TreeGrid实现,主要用于个人...

    EasyUI实现两个treegrid互相拖放

    本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...

    bootstrap-treegrid实现树形表格.zip

    - 初始化Treegrid:使用JavaScript代码初始化树形表格,指定表格元素和配置项。 - 数据绑定:将数据源绑定到表格,可以是JSON对象或数组。 - 扩展功能:根据需求,可以添加自定义样式、事件处理函数等增强功能。 ...

    TreeGrid.js 表格树插件

    TreeGrid.js是一款强大的基于jQuery的表格树插件,它为数据展示提供了一种灵活且具有层次结构的方式。这款插件允许用户将数据以表格的形式展现,并且每行数据可以展开成一个子节点,形成树状结构,使得复杂的数据...

    jeasyui-treegrid实现例子

    6. **扩展功能**: 除了基本的显示和操作,TreeGrid还可以与其他JeasyUI组件(如Form、Dialog)结合,实现更复杂的业务逻辑,如编辑、删除、添加节点等。 综上所述,"jeasyui-treegrid实现例子"涉及到的主要知识点...

    jquery-treegrid 树形表格组件

    - **层级结构**:TreeGrid 允许你创建多级的表格,每一行都可以展开或折叠,显示或隐藏其子项。 - **动态加载**:支持异步加载子节点,提高页面性能,特别是处理大量数据时。 - **排序**:提供了列排序功能,用户...

    JQuery TreeGrid(表格)

    - **TreeGrid**:TreeGrid 是 jQuery 的一个扩展,它将普通的表格转化为具有层级结构的网格,每个单元格可以展开或折叠,以显示或隐藏其子项。 2. **核心功能** - **折叠与展开**:TreeGrid 允许用户通过点击行来...

    WPF TreeGrid

    WPF TreeGrid是一种在Windows Presentation Foundation (WPF)框架中用于展示数据的控件,它结合了树形结构和表格的特性,使用户能够以层级方式查看和操作数据。这种控件非常适合显示具有层次关系的数据,例如组织...

    dhtmlxTreeGrid1.2_Pro

    dhtmlxTreeGrid1.2_Pro是一款基于JavaScript的富客户端数据网格组件,它结合了树形结构和表格的功能,提供了一种高效的方式来展示和操作层次化的数据。在这款早期的1.2专业版中,虽然功能可能相对现代版本有所限制,...

    jquery easyui treegrid demo 详解

    然后,我们需要一个 JSON 数据源(treegrid_data.json)来填充 TreeGrid: ```json [ { "id": "1", "parent": "#", "name": "父节点1", "child": [ { "id": "11", "parent": "1", "name": "子节点1-1" },...

    基于jQuery的TreeGrid组件

    jQuery TreeGrid组件就是为此而设计的,它将表格与树形结构结合,提供了一种直观且交互性强的数据展示方式。本文将深入探讨jQuery TreeGrid的基本概念、功能特性以及实际应用。 ### 1. TreeGrid概述 jQuery ...

Global site tag (gtag.js) - Google Analytics