zTree klicken Sie auf den Text, um das Kontrollkästchen zu aktivieren-js-Tutorial-php.cn

zTree klicken Sie auf den Text, um das Kontrollkästchen zu aktivieren

黄舟

Freigeben： 2017-02-18 13:23:40

Original

2096 Leute haben es durchsucht

1. Problemhintergrund

Das System verwendet das zTree-Plugin, um einen Dropdown-Prüfbaum zu generieren. Klicken Sie auf den Text, um das Kontrollkästchen zu aktivieren

2. Implementierungsquellcode

<!DOCTYPE html>
<html>
<head>
	<title>zTree点击文字勾选复选框</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//初始化树
			zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);
		});
	
		//设置
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: { 
			 	onClick: function (e, treeId, treeNode, clickFlag) { 
			 		zTree.checkNode(treeNode, !treeNode.checked, true); 
			 	} 
			},
    	}, zTree;

		//数据
		var datas =[
			{ id:1, pId:0, name:"树", open:true},
			{ id:11, pId:1, name:"松树", open:true},
			{ id:12, pId:1, name:"樟树", open:true},
			{ id:2, pId:0, name:"花", checked:true, open:true},
			{ id:21, pId:2, name:"梅花"},
			{ id:22, pId:2, name:"桃花", open:true}
		];
	</script>
</head>

<body>
	<p style="vertical-align: middle; text-align: center;">
		<p>
			<ul id="treeSelect" class="ztree"></ul>
		</p>
	</p>
</body>
</html>

Nach dem Login kopieren

3. Implementierungsergebnis

zTree klicken Sie auf den Text, um das Kontrollkästchen zu aktivieren

Das Obige ist der Inhalt von zTree Klicken Sie auf den Text, um das Kontrollkästchen zu aktivieren. Weitere Informationen finden Sie im Inhalt der chinesischen PHP-Website (www.php.cn).