-----后台
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Text; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public string GetzNodes() { StringBuilder sb = new StringBuilder(); sb.Append("<script>"); sb.Append("var zNodes =["); //*****************************************加入遍历代码 for (int i = 0; i < 100; i++) { if (i > 50) { sb.Append(SetParametes(i.ToString(), "1", "b")); } else sb.Append(SetParametes(i.ToString(), "-1", "a")); } //******************************************************** sb.Append("];"); sb.Append("</script>"); return sb.ToString(); } /// <summary> /// 设置节点 /// </summary> /// <param name="id">id</param> /// <param name="pid">父级id</param> /// <param name="name">名称</param> /// <param name="open">是否展开?</param> /// <returns>返回节点</returns> private string SetParametes(string id, string pid, string name,bool open=false) { StringBuilder sb = new StringBuilder(); sb.Append("{"); sb.AppendFormat("id:{0},",id); sb.AppendFormat("pId:{0},",pid); if (open) { sb.AppendFormat("name:\"{0}\",", name); sb.Append("open: true"); } else { sb.AppendFormat("name:\"{0}\"", name); } sb.Append("},"); return sb.ToString(); } }
-----前台
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="../css/demo_new.css" rel="stylesheet" type="text/css" /> <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../js/jquery.ztree.core-3.5.js" type="text/javascript"></script> <script src="../js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script> </head> <%=GetzNodes()%> <script type="text/javascript"> var setting = { check: { enable: true, chkboxType: { "Y": "ps", "N": "ps"} }// //chkboxType: { "Y": "p", "N": "ps"}}//父级联动 //chkboxType : { "Y": "s", "N": "ps" } }//子级联动 //chkboxType : { "Y": "", "N": "ps" } }//不联动 ,view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick,onCheck: onCheck}}; $(document).ready(function () {$.fn.zTree.init($("#treeDemo"), setting, zNodes); }); function beforeClick(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function showMenu() { var cityObj = $("#citySel"); var cityOffset = $("#citySel").offset(); $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); } function hideMenu() { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) { hideMenu(); } } $(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); //选中之后触发的事件 function onCheck(e, treeId, treeNode) { //ids:存放着一组id //v:存放着一组值 var ids = ""; var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), v = ""; for (var i = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; ids += nodes[i].id + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); if (ids.length > 0) ids = ids.substring(0, ids.length - 1); var cityObj = $("#citySel"); cityObj.attr("value", v); } </script> <body> <form id="form1" runat="server"> <!------------------Treediv---------------------> <div class="zTreeDemoBackground left"> <ul class="list"> <li class="title"><asp:TextBox ID="citySel" ReadOnly="true" runat="server"></asp:TextBox> <a id="A1" href="#" οnclick="showMenu(); return false;">选择</a></li> </ul> </div> <div id="menuContent" class="menuContent" style="display:none; position: absolute;"> <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul> </div> <!------------------Treediv---------------------> </form> </body> </html>
转载于:https://blog.51cto.com/962410314/1596039