您的位置:首页 > Web前端 > HTML

基于dhtmlxtree实现的下拉树

2013-05-27 16:04 113 查看
下拉树对象代码:

function dhtmlXTreeCombo(id, name){

var _parent = document.getElementById(id);

var _combo = document.createElement("div");

_combo.setAttribute("id", "combo");

_combo.style.width = '150px';

_combo.style.height = '20px';

var _input = document.createElement("div");

_input.align = "right";

var _hidden = document.createElement("input");

_hidden.setAttribute("type", "hidden");

_hidden.setAttribute("name", name);

var _img = document.createElement("img");

//下拉框图标

this.setImage = function(img){

_img.setAttribute("src", img);

}

_img.setAttribute("id", "img");

var _content = document.createElement("div");

_content.setAttribute("id", "content");

_content.style.height = '20px';

_input.appendChild(_img);

_input.appendChild(_hidden);

_combo.appendChild(_content);

_combo.appendChild(_input);

_parent.appendChild(_combo);

var _tree = document.createElement("div");

_tree.setAttribute("id", "treebox"+id);

_tree.style.display = "none";

_tree.style.width = "150px";

_tree.style.height = "100px";

_tree.style.border = "1px solid Silver";

_parent.appendChild(_tree);

var tree=new dhtmlXTreeObject("treebox"+id,"100%","100%",0);

tree.setEscapingMode('UTF-8');

this.setIconsPath = function(path){

tree.setIconsPath(path);

tree.enableTextSigns(true);

}

this.loadTree = function(url){

tree.setXMLAutoLoading(url);

tree.loadXML(url);

}

tree.attachEvent("onClick", function(id){

_content.innerHTML = tree.getItemText(id);

_hidden.value = id;

_tree.style.display = 'none';

});

_img.onclick = function(){

if(_tree.style.display == 'none'){

_tree.style.display = 'block';

} else {

_tree.style.display = 'none';

}

}

}

实例化下拉树代码:

<div id="test" ></div>

<script>

var test = new dhtmlXTreeCombo("test", "testname");

test.setImage("<%=basePath%>image/combo_select_dhx_skyblue.gif");

test.setIconsPath("<%=basePath%>dhtmlx/imgs/csh_bluebooks/");

test.loadTree("<%=basePath%>menu/getChildMenu.action?id=7420");

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js dhtmlx 下拉树框