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

Jquery EasyUI Combotree 展开父节点,

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

Jquery EasyUI Combotree获取选中的值

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

©Copyright 蕃薯耀 2018年5月7日

一、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、默认显示完整路径

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

2、默认根据叶子节点的值赋值,并从该子结点逐层向上展开所有父结点
Jquery EasyUI Combotree根据选中的值展开所有父节点

(如果你觉得文章对你有帮助,欢迎捐赠,^_^,谢谢!) 


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

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

©Copyright 蕃薯耀 2018年5月7日

相关推荐