标签:des style blog http color java 使用 os
一个很好用的Jquery树形控件
官网:http://www.ztree.me/v3/main.php#_zTreeInfo
我主要引用的文件为:
//最新版的JS压缩包
<script src="../Script/jquery-1.11.1.min.js" type="text/javascript"></script>
//Ztree样式 <link href="../CSS/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src="../Script/jquery.ztree.core-3.5.js" type="text/javascript"></script> <script src="../Script/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
根据项目需要主setting设置如下:
var setting1 = { check: { enable: true, chkboxType: { "Y": "ps", "N": "ps" } }, data: { simpleData: { enable: true } } };
var setting = { check: { enable: true, chkboxType: { "Y": "ps", "N": "ps" } }, async: { enable: true, // 设置 zTree是否开启异步加载模式 加载全部信息 url: "", // Ajax 获取数据的 URL 地址 autoParam: ["id"] // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"},异步加载时,提交参数 zId=1 }, data: { // 必须使用data simpleData: { enable: true, idKey: "id", // id编号命名 默认 pIdKey: "pId", // 父id编号命名 默认 rootPId: 0 // 用于修正根节点父节点数据,即 pIdKey 指定的属性值 } }, // 回调函数 callback: { //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数 onAsyncError: zTreeOnAsyncError, onAsyncSuccess: function (event, treeId, treeNode, msg) { var name = $("#<%=hdfValue.ClientID%>").val(); if (name != undefined && name != "") { //默认选中 $.ajax({
//设置同步 type: "POST", async: false, url: ‘‘, data: { type: ‘‘, name: name }, dataType: ‘json‘, success: function (data) { //对于获取的数据执行相关的操作,如:绑定、显示等 var treeObj = $.fn.zTree.getZTreeObj(‘Tree1‘); for (var i = 0; i < data.length; i++) { var node = treeObj.getNodeByParam("id", data[i].id, null); treeObj.checkNode(node); } } }); //学校信息 $.ajax({ type: "POST", async: false,//同步 url: ‘CategoryHandler.ashx‘, data: { type: ‘search‘, name: name }, dataType: ‘json‘, success: function (data) { //对于获取的数据执行相关的操作,如:绑定、显示等 //专业信息;eval将字符串转换为JSON串/
//可以使用http://www.bejson.com/ 检查是否自己的Json串正确与否
$.fn.zTree.init($("#Tree2"), setting1, eval(data[0].Specialty)); } }); } }, onRename: zTreeOnRename } };
// 加载错误提示 function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) { alert("加载错误:" + XMLHttpRequest); }; function beforeRemove(e, treeId, treeNode) { return confirm("你确定要删除吗?"); } function onRemove(e, treeId, treeNode) { if (treeNode.isParent) { var childNodes = zTree.removeChildNodes(treeNode); var paramsArray = new Array(); for (var i = 0; i < childNodes.length; i++) { paramsArray.push(childNodes[i].id); } alert("删除父节点的id为:" + treeNode.id + "\r\n他的孩子节点有:" + paramsArray.join(",")); return; } alert("你点击要删除的节点的名称为:" + treeNode.name + "\r\n" + "节点id为:" + treeNode.id); } function zTreeOnRename(event, treeId, treeNode, isCancel) { //可以自定义属性,然后根据这些属性来完成操作 alert(treeNode.id + ",重命名过后的回调函数 " + treeNode.name); //1.ajax更新数据库 }
//必备的在ztree加载方法
$(document).ready(function () { $.fn.zTree.init($("#Tree1"), setting);
$.fn.zTree.init($("#Tree2"), setting1); });
//将在ztree1中选中的信息填到ztree2
function OnclickRight() { var treeObj = $.fn.zTree.getZTreeObj(‘Tree1‘); var nodes = treeObj.getCheckedNodes(true); var checkedValues = ‘‘; var a = []; for (var i = 0; i < nodes.length; i++) { var obj = {}; obj.id = nodes[i].id; obj.pId = nodes[i].pId; obj.name = nodes[i].name; a.push(obj); } if (a.length > 0) { $.fn.zTree.init($("#Tree2"), setting1, a); } }
//清除选中的tree2节点 function OnclickLeft() { var treeObj = $.fn.zTree.getZTreeObj("Tree2"); var nodes = treeObj.getCheckedNodes(true); for (var i = 0, l = nodes.length; i < l; i++) { if (nodes[i].check_Child_State == 2) { treeObj.removeNode(nodes[i]); } else if (nodes[i].check_Child_State == -1 && !(nodes[i].isParent)) { treeObj.removeNode(nodes[i]); } else { treeObj.checkNode(nodes[i], false, false); } } }
附带这个页面的其他几个问题:
<asp:DropDownList ID="ddlB" runat="server"> </asp:DropDownList>
获取此下拉框数据: YJSEnglish = $("#ContentPlaceHolder1_ddlB").find("option:selected").val();
<asp:CheckBoxList ID="cblCategory" runat="server" RepeatDirection="Horizontal"> </asp:CheckBoxList>
获取多选框数据:
$("[id*=cblCategory] input:checked").each(function () {
Values += $(this).val() + ",";
});
大楷就这么多。待续。
http://www.ztree.me/v3/main.php#_zTreeInfo
标签:des style blog http color java 使用 os
原文地址:http://www.cnblogs.com/Jack_G/p/3922612.html