Jquery EasyUI Combotree根据选中的值展开所有父节点

Jquery EasyUI Combotree 展开父节点，

Jquery EasyUI Combotree根据子节点选中的值，展开前面所有父节点，

Jquery EasyUI Combotree获取选中的值

 

================================

©Copyright 蕃薯耀 2018年5月7日

http://fanshuyao.iteye.com/

 

一、Combotree获取父节点的方法getParent，这其实是继承来自tree插件

 

Name        Parameter      Description
getParent   target	       Get the parent node, 
                           the target parameter indicate the node DOM object.

 

Tree获取父节点：

$("#treeId").tree("getParent", node.target);

 

Combotree获取父节点：

var treeObj = $("#combotreeId").combotree("tree");//先获取combotree的树对象
var parentNode = treeObj.tree("getParent", node.target);

 

 

二、Combotree获取选中的值

var treeObj = $("#combotreeId").combotree("tree");//先获取combotree的树对象
var nodesChecked = treeObj.tree("getChecked");//再通过树对象获取树所有选中的值，有可能有多个

 

三、展开父节点

$("#treeId").tree("expand", node.target);//node一般是父节点

 

四、根据叶子节点选中的值，展开所有父节点

 

展开所有父节点的方法（递归展开父节点）：

/**
 * 根据叶子节点展开所有父节点
 * @param treeObj 树对象，（combotree的树对象获取：var treeObj = comboObj.combotree("tree");）
 * @param node 叶子节点
 */
function expandParent(treeObj, node){
	var parentNode = treeObj.tree("getParent", node.target);
	if(parentNode != null && parentNode != "undefined"){
		treeObj.tree("expand", parentNode.target);
		expandParent(treeObj, parentNode);
	}
};

 

具体使用如下：

 

$("#cmm_code_id").combotree({
    multiple: true,
    required : true,
    checkbox : true,
    onlyLeafCheck : true,//只能叶子节点才能勾选
    url : "${pageContext.request.contextPath}/xxx",
    onBeforeSelect : function(node){
        $(this).tree("check", node.target);//控制点击文字时也能勾选
        return false;
    },
    onBeforeCheck : function(node, checked){
        if(checked){//如果是勾选操作，则把之前选中的节点清除（不勾选）
            var nodes = $(this).tree("getChecked");
            if(nodes.length > 0){
                for(var i=0; i<nodes.length; i++){
                    $(this).tree("uncheck", nodes[i].target);
                }
            }
        }
    },
    onLoadSuccess : function(node, data){
        var cmm_code_id_value = "${buildingNaming.cmm_code_id}";
        if(cmm_code_id_value != null && $.trim(cmm_code_id_value) != ""){
            var comboObj = $("#cmm_code_id");
            var treeObj = comboObj.combotree("tree");
		    	
            comboObj.combotree("setValue", cmm_code_id_value);
            var nodesChecked = treeObj.tree("getChecked");
            if(nodesChecked.length > 0){
                for(var i=0; i<nodesChecked.length; i++){
                    expandParent(treeObj, nodesChecked[i]);
                }
            }
        }
    }
});

 

 效果如下：

1、默认显示完整路径

 

2、默认根据叶子节点的值赋值，并从该子结点逐层向上展开所有父结点

 

 

（如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！） 

    

 

================================

©Copyright 蕃薯耀 2018年5月7日

http://fanshuyao.iteye.com/

评论

1 楼 蕃薯耀 2018-05-07  

Jquery EasyUI Combotree 展开父节点，
Jquery EasyUI Combotree根据子节点选中的值展开所有父节点，
Jquery EasyUI Combotree获取选中的值

=========
蕃薯耀