扩展jquery-easyui 的tree组件，在下拉框中使用复选框的情况下，实现点击复选框右边的文字和点击复选框一样的效果

基于jquery-easyui1.3.2

 1 $.extend($.fn.combo.methods, {
 2     lableFunction:function(jq){
 3         return jq.each(function(){
 4             var opts = $.data(this,'combo').options;
 5             if(opts.multiple){
 6                 var that = this;
 7                 var combo = $.data(this, "combo").combo;
 8                 var tree = $.data(this, 'combotree').tree;
 9                 //给文本添加单击事件
10                 tree.find("span.tree-title").bind("click",function(e){
11                     var ckSpan = $(this).prev('span');
12                     if(ckSpan.hasClass("tree-checkbox tree-checkbox0")){
13                         ckSpan.removeClass("tree-checkbox0").addClass("tree-checkbox1");
14                     }else if(ckSpan.hasClass("tree-checkbox tree-checkbox1")){
15                         ckSpan.removeClass("tree-checkbox1").addClass("tree-checkbox0");
16                     }else{
17                         ckSpan.removeClass("tree-checkbox2").addClass("tree-checkbox1");
18                     }
19                     if(opts.cascadeCheck){//如果是级联
20                         var node = tree.tree("getNode",$(this).parent().parent().html());//当前节点
21                         var pnode = tree.tree("getParent",node.target);//当前节点父节点
22                         setChildNodeCheck(node,tree);
23                         setParentNodeCheck(pnode,tree);//设置父节点checobox状态
24                     }
25                     var vv = [], ss = [];
26                     var nodes = tree.tree('getChecked');//获取选择的checkbox
27                     for(var i=0; i<nodes.length; i++){
28                         vv.push(nodes[i].id);
29                         ss.push(nodes[i].text);
30                     }
31                     //重新赋值
32                     $(that).combo('setValues', vv).combo('setText', ss.join(opts.separator));
33                     e.stopPropagation();//阻止事件冒泡
34                 });
35             }
36         });
37         //设置当前节点的叶子节点的checkbox状态
38         function setChildNodeCheck(node,tree){
39             var isLeaf = tree.tree("isLeaf",node.target);
40             //当前节点不是叶子节点
41             if(!isLeaf){
42                 var childnode = tree.tree("getChildren",node.target);
43                 for(var i = 0;i < childnode.length;i ++){
44                     var ck = $(childnode[i].target).find('.tree-checkbox');
45                     if(node.checked){
46                         ck.removeClass("tree-checkbox2").removeClass("tree-checkbox0").addClass("tree-checkbox1");
47                     }else{
48                         ck.removeClass("tree-checkbox1").removeClass("tree-checkbox2").addClass("tree-checkbox0");
49                     }
50                     setChildNodeCheck(childnode[i],tree);
51                 }
52             }
53         }
54         //设置当前节点的父节点的checkbox状态
55         function setParentNodeCheck(pnode,tree){
56             if(pnode){
57                 //获取父节点的内容
58                 var ck = $(pnode.target).find('.tree-checkbox');
59                 //获取该节点的同级节点集合
60                 var childs = tree.tree("getChildren",pnode.target);//nodes
61                 var isChecked = true;
62                 var num = 0;
63                 for(var i = 0;i < childs.length;i ++){
64                     if(!childs[i].checked){
65                         isChecked = false;
66                     }else{
67                         num ++;
68                     }
69                 }
70                 if(isChecked){
71                     ck.removeClass("tree-checkbox2").removeClass("tree-checkbox0").addClass("tree-checkbox1");
72                 }else{
73                     if(num == 0){
74                         ck.removeClass("tree-checkbox2").removeClass("tree-checkbox1").addClass("tree-checkbox0");
75                     }else{
76                         ck.removeClass("tree-checkbox0").removeClass("tree-checkbox1").addClass("tree-checkbox2");
77                     }
78                 }
79                 //获取父节点的上级节点
80                 setParentNodeCheck(tree.tree("getParent",pnode.target),tree);
81             }
82         }
83     }
84 });
85 
86 //调用方式：$("#cc").combotree("lableFunction");

 

目前仅支持combotree组件

这种方式比较绕，不简洁，现扩展tree组件的方法来实现这个功能

$.extend($.fn.tree.methods, {
	lblFun:function(jq){
		return jq.each(function(){
			var state = $.data(this,'tree');
			var tree = state.tree;
			//给checkbox文本添加单击事件
			tree.find(".tree-title").bind("click",function(e){
				var node = tree.tree("getNode",$(this).parent().parent().html());//当前节点
				if(node.checked){
					tree.tree("uncheck",node.target);
				}else{
					tree.tree("check",node.target);
				}
			});
		});
	}
});
//使用方式：$("#tt").tree("lblFun");
 1 最新实现方式，更合理更简便
 2 $.extend($.fn.tree.methods, {
 3     lblFun:function(jq){
 4         return jq.each(function(){
 5             var state = $.data(this,'tree');
 6             var tree = state.tree;
 7             var opts = state.options;
 8             var that = this;
 9             $(this).bind("click.mytree",function(e){
10                 var tt = $(e.target);
11                 var node = tt.closest('div.tree-node');
12                 if (!node.length){return;}
13                 if (tt.hasClass('tree-title')){
14                     if(opts.checkbox){
15                         var currentnode = tree.tree("getNode",node[0]);//当前节点//当前节点
16                         if(currentnode.checked){
17                             tree.tree("uncheck",currentnode.target);
18                         }else{
19                             tree.tree("check",currentnode.target);
20                         }
21                     }
22                     tree.tree("select",currentnode.target);
23                     return false;
24                 }
25                 e.stopPropagation();
26             });
27         });
28     }
29 });

 

posted @ 2013-12-30 22:39  天堂爱  阅读(1173)  评论(0)    收藏  举报