dhtmlxtree学习笔记二(常用方法)

 

<!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>

 

 

你可能感兴趣的:(html)