?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<link rel="STYLESHEET" type="text/css"
href="dhtmlxtree/dhtmlxtree.css">
<script src="dhtmlxtree/dhtmlxcommon.js"></script>
<script src="dhtmlxtree/dhtmlxtree.js"></script>
<!-- 如果是使用json格式就必须引入 dhtmlxtree_json.js文件-->
<script src="dhtmlxtree/dhtmlxtree_json.js"></script>
<div id="treeboxbox_tree"
style="width: 250px; height: 218px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
<button onclick="getAllChecked()">获取全部选中的节点</button><br><br>
<button onclick="getSelectedNode()">获取选中的节点</button><br><br>
<button onclick="getSelectedChecked()">选中的节点设为已选</button><br><br>
<button onclick="getSelectedUNChecked()">选中的节点设为不选中</button><br><br>
<script>
//获取选中节点的值
function getSelectedNode(){
alert(tree.getSelectedItemId());
}
//将鼠标点中的节点在checkbox选中
function getSelectedChecked(){
tree.setCheck(tree.getSelectedItemId(),true);
}
//将鼠标点中的节点在checkbox不选中
function getSelectedUNChecked(){
tree.setCheck(tree.getSelectedItemId(),false);
}
//获取所有checkbox中全部选中的节点
function getAllChecked(){
alert(tree.getAllChecked());
}
function clickFunc(id){
alert("click Item " + tree.getItemText(id) + " was selected");
}
function dbclickFunc(id){
//根据id获取内容的方法是 tree.getItemText(id)
alert("dbclick Item " + tree.getItemText(id) + " was selected");
}
function checkedFunc(id){
alert("checked Item " + tree.getItemText(id) + " was selected");
}
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("dhtmlxtree/common/images/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(false);
tree.setImageArrays("plus","","","","plus.gif");
tree.setImageArrays("minus","","","","minus.gif");
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
//是否使用checkbox
tree.enableCheckBoxes(1);
//1、选中子节点，是否让其parent节点也选中，2、选中父节点，子节点全部选中
tree.enableThreeStateCheckboxes(true);
//自定义事件
tree.setOnCheckHandler(checkedFunc);//多选框是否被选中
//tree.setOnClickHandler(clickFunc);//单机事件
tree.setOnDblClickHandler(dbclickFunc);//双击事件
//打开有子节点的父节点出现的方法
tree.attachEvent("onOpenEnd", function(nodeId, event) {
alert("An id of open item is " + nodeId);
});
var json = {
id: 0,
item:[
{
id:"X1",
text:"一",
item:[
{
id:"X11",
text:"一一"
},
{
id:"X12",
text:"一二"
}
]
},
{
id:"X2",
text:"二",
item:[
{
id:"X21",
text:"二一"
},
{
id:"X22",
text:"二二"
}
]
}
]
};
var jsondata = {id:0, item:[{id:1,text:"first"},{id:2, text:"middle", item:[{id:"21", text:"child"}]},{id:3,text:"last"}]};
//tree.loadJSONObject(jsondata);
tree.loadJSONObject(json,function(){
//alert(1);
});
//动态添加的节点也能绑定之前设定的方法
tree.insertNewChild(0,"hb","hb");
</script>
</body>
</html>
?
?
