1.需求:选中树的某个节点后显示完整路径(即重根节点到选中节点),并在回显中也回显完整路径。
2.代码:
html:
<select id="HFIRE_AREA_ID" name="HFIRE_AREA_ID" class="easyui-combotree" editable="true"></select>
js:
//下拉树
$('#HFIRE_AREA_ID').combotree({
url:'${ctx}/PoliceController/getAreaTree',
animate:true,
lines:true,
onlyLeafCheck:true, //设置父级无复选框
checkbox:true,
multiple: false,
cascadeCheck:true,
required: true,
onClick : function(node){
var t = $('#HFIRE_AREA_ID').combotree('tree');// 得到树对象
var pathName=getTreePathNames(t, node);
areaValues=getTreePathValues(t, node);
$('#HFIRE_AREA_ID').combotree("setText",pathName);
//alert(areaValues)
},
onChange:function(newValue, oldValue){
var t = $('#HFIRE_AREA_ID').combotree('tree');// 得到树对象
//获取当前选中的节点
var node = t.tree('getSelected');
var pathName=getTreePathNames(t, node);
areaValues=getTreePathValues(t, node);
fx=pathName;
$('#HFIRE_AREA_ID').combotree("setText",pathName);
},
onLoadSuccess:function(node, data){//解决编辑时反选的问题
$('#HFIRE_AREA_ID').combotree("setText",fx);
}
});
/**
* 根据叶子节点选中的值,获取该叶子节点树整个路径的名称
* @param treeObj 树对象,(combotree的树对象获取:var treeObj = $('#树id').combotree("tree");)
* @param node 叶子节点
*/
function getTreePathNames(treeObj, node){
var pathName = node.text;
var parentNode = treeObj.tree("getParent", node.target);
if(parentNode != null && parentNode != "undefined"){
pathName = getTreePathNames(treeObj, parentNode) + " > " + pathName;
}
return pathName;
};
/**
* 根据叶子节点选中的值,获取该叶子节点树整个路径的值
* @param treeObj 树对象,(combotree的树对象获取:var treeObj = $('#树id').combotree("tree");)
* @param node 叶子节点
*/
function getTreePathValues(treeObj, node){
var Values = '"'+node.id+'"';
var parentNode = treeObj.tree("getParent", node.target);
if(parentNode != null && parentNode != "undefined"){
Values = getTreePathValues(treeObj, parentNode) + ',' + Values;
}
return Values;
};