标签:
第一次写文章,关于这两天做的关于zTree插件的一些内容,不足之处希望各位见谅:
http://www.ztree.me/v3/main.php#_zTreeInfo zTree官网地址
zTree插件还是很强大的,操作灵活,界面也漂亮,做web的应该都了解的
代码附上
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="../Style/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../Script/ztree/jquery-1.4.4.min.js"></script> <script src="../Script/ztree/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript"> var zNodes; var treeNodes; var childCount; var setting = { async: { dataFilter: function (treeId, parentNode, responseData) {
//这里的内容为异步提交后 ,获取的数据进行处理,点击节点,去后台获取节点下的子节点,更新树结构 for (var i = 0; i < responseData.length; i++) {
//这里循环操作数据 把节点效果全部改成父节点样式 var F_PARENT_ID = responseData[i].F_RAD_ID; $.ajax({ type: ‘get‘, async: false, url: ‘../ASHX/SelectChildCount.ashx?F_PARENT_ID=‘+F_PARENT_ID, success: function (data) { if (data!=null || data!="0") { chiliCount = "1"; responseData[i].isParent = true; } else { chiliCount = "0"; responseData[i].isParent = false; } } }); } return responseData;//更新树结构 }, dataType: "json", enable: true, }, check: { enable: false, }, view: { showLine: true }, callback: { beforeExpand: function (treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.async.url = "../ASHX/TestData.ashx?ajaxMethod=AnsyData&F_RAD_ID=" + treeNode.F_RAD_ID; } }, data: { key: { name: "F_CHINESE" }, simpleData: { enable: true, idKey: "F_RAD_ID", pIdKey: "F_PARENT_ID", rootId: 0 } } }; //初始化ztree树 $(document).ready(function () { //配置静态的根节点 var zNodes2 = [{ "F_RAD_ID": 1, "F_PARENT_ID": 0, "F_CHINESE": "Radlex实体本体论", isParent: true }]; $.fn.zTree.init($("#treeDemo"), setting, zNodes2); }); </script> </head> <body> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/yw-blog/p/4290838.html