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

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

 

先明确两个概念：

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

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

 

两种思路：

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

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

 

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

 

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

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

01

/**

02	* 扩展树表格级联勾选方法：

03	* @param {Object} container

04	* @param {Object} options

05	* @return {TypeName}

06

*/

07	$.extend($.fn.treegrid.methods,{

08

/**

09

* 级联选择

10	* @param {Object} target

11	* @param {Object} param

12	*      param包括两个参数:

13	*          id:勾选的节点ID

14	*          deepCascade:是否深度级联

15	* @return {TypeName}

16

*/

17	cascadeCheck : function(target,param){

18	var opts = $.data(target[0], "treegrid").options;

19	if(opts.singleSelect)

20

return;

21	var idField = opts.idField;//这里的idField其实就是API里方法的id参数

22	var status = false;//用来标记当前节点的状态，true:勾选，false:未勾选

23	var selectNodes = $(target).treegrid('getSelections');//获取当前选中项

24	for(var i=0;i<selectNodes.length;i++){

25	if(selectNodes[i][idField]==param.id)

26	status = true;

27

}

28

//级联选择父节点

29	selectParent(target[0],param.id,idField,status);

30	selectChildren(target[0],param.id,idField,param.deepCascade,status);

31

/**

32

* 级联选择父节点

33	* @param {Object} target

34	* @param {Object} id 节点ID

35	* @param {Object} status 节点状态，true:勾选，false:未勾选

36	* @return {TypeName}

37

*/

38	function selectParent(target,id,idField,status){

39	var parent = $(target).treegrid('getParent',id);

40	if(parent){

41	var parentId = parent[idField];

42	if(status)

43	$(target).treegrid('select',parentId);

44

else

45	$(target).treegrid('unselect',parentId);

46	selectParent(target,parentId,idField,status);

47

}

48

}

49

/**

50

* 级联选择子节点

51	* @param {Object} target

52	* @param {Object} id 节点ID

53	* @param {Object} deepCascade 是否深度级联

54	* @param {Object} status 节点状态，true:勾选，false:未勾选

55	* @return {TypeName}

56

*/

57	function selectChildren(target,id,idField,deepCascade,status){

58	//深度级联时先展开节点

59	if(!status&&deepCascade)

60	$(target).treegrid('expand',id);

61	//根据ID获取下层孩子节点

62	var children = $(target).treegrid('getChildren',id);

63	for(var i=0;i<children.length;i++){

64	var childId = children[i][idField];

65	if(status)

66	$(target).treegrid('select',childId);

67

else

68	$(target).treegrid('unselect',childId);

69	selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点

70

}

71

}

72

}

73

});

该方法需要一个参数

param={

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

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

}

 

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

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

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

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

使用示例：

01	$('#test').treegrid({

02

...

03	idField:'code',//需设置

04	treeField:'code',

05	singleSelect:false,//需设置

06	columns:[[

07	{field:'ck',checkbox:true},//需设置

08	{title:'Code',field:'code',width:200},

09

....

10

]],

11	onClickRow:function(row){

12

//级联选择

13	$(this).treegrid('cascadeCheck',{

14	id:row.code, //节点ID

15	deepCascade:true //深度级联

16

});

17

}

18

});

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

01

/**

02	* 扩展树表格级联选择（点击checkbox才生效）：

03	*      自定义两个属性：

04	*      cascadeCheck ：普通级联（不包括未加载的子节点）

05	*      deepCascadeCheck ：深度级联（包括未加载的子节点）

06

*/

07	$.extend($.fn.treegrid.defaults,{

08	onLoadSuccess : function() {

09	var target = $(this);

10	var opts = $.data(this, "treegrid").options;

11	var panel = $(this).datagrid("getPanel");

12	var gridBody = panel.find("div.datagrid-body");

13	var idField = opts.idField;//这里的idField其实就是API里方法的id参数

14	gridBody.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").click(function(e){

15	if(opts.singleSelect) return;//单选不管

16	if(opts.cascadeCheck||opts.deepCascadeCheck){

17	var id=$(this).parent().parent().parent().attr("node-id");

18	var status = false;

19	if($(this).attr("checked")) status = true;

20

//级联选择父节点

21	selectParent(target,id,idField,status);

22	selectChildren(target,id,idField,opts.deepCascadeCheck,status);

23

/**

24

* 级联选择父节点

25	* @param {Object} target

26	* @param {Object} id 节点ID

27	* @param {Object} status 节点状态，true:勾选，false:未勾选

28	* @return {TypeName}

29

*/

30	function selectParent(target,id,idField,status){

31	var parent = target.treegrid('getParent',id);

32	if(parent){

33	var parentId = parent[idField];

34	if(status)

35	target.treegrid('select',parentId);

36

else

37	target.treegrid('unselect',parentId);

38	selectParent(target,parentId,idField,status);

39

}

40

}

41

/**

42

* 级联选择子节点

43	* @param {Object} target

44	* @param {Object} id 节点ID

45	* @param {Object} deepCascade 是否深度级联

46	* @param {Object} status 节点状态，true:勾选，false:未勾选

47	* @return {TypeName}

48

*/

49	function selectChildren(target,id,idField,deepCascade,status){

50	//深度级联时先展开节点

51	if(status&&deepCascade)

52	target.treegrid('expand',id);

53	//根据ID获取下层孩子节点

54	var children = target.treegrid('getChildren',id);

55	for(var i=0;i<children.length;i++){

56	var childId = children[i][idField];

57	if(status)

58	target.treegrid('select',childId);

59

else

60	target.treegrid('unselect',childId);

61	selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点

62

}

63

}

64

}

65	e.stopPropagation();//停止事件传播

66

});

67

}

68

});

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

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

2、级联是还需要配置属性（自定义属性，API没有）：

       cascadeCheck ：true  //普通级联（不包括未加载的子节点）
       deepCascadeCheck ：true //深度级联（包括未加载的子节点）

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

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

 

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

标签: treegrid cascadeCheck deepCascadeCheck