treedemo实现复选框
<!DOCTYPE html> <html> <head> <title>ZTREE DEMO - Standard Data </title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" href="css/demo.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-3.4.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script> <!-- <script type="text/javascript" src="js/jquery.ztree.exedit-3.4.js"></script>--> <script type="text/javascript"> <!-- var setting = { check: { enable: true }, /*data: { simpleData: { enable: true } }*/ data: { simpleData: { enable: true } }, callback: { onCheck: onCheck }
};
var zNodes = [ { id: 1, pId: 0, name: "随意勾选 1", open: false }, { id: 11, pId: 1, name: "随意勾选 1-1", open: true }, { id: 111, pId: 11, name: "随意勾选 1-1-1" }, { id: 112, pId: 11, name: "随意勾选 1-1-2" }, { id: 12, pId: 1, name: "随意勾选 1-2", open: true }, { id: 121, pId: 12, name: "随意勾选 1-2-1" }, { id: 122, pId: 12, name: "随意勾选 1-2-2" }, { id: 2, pId: 0, name: "随意勾选 2", open: false }, { id: 21, pId: 2, name: "随意勾选 2-1" }, { id: 22, pId: 2, name: "随意勾选 2-2", open: true }, { id: 221, pId: 22, name: "随意勾选 2-2-1" }, { id: 222, pId: 22, name: "随意勾选 2-2-2" }, { id: 23, pId: 2, name: "随意勾选 2-13" } ];
$(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, zNodes); });
function onCheck(e, treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"), nodes = treeObj.getCheckedNodes(true), v = ""; for (var i = 0; i < nodes.length; i++) { v += nodes[i].name + ","; alert(nodes[i].id); //获取选中节点的值 }
} //--> </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"> </ul> </div> </body> </html>
