-----后台
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 < 50; i++) { if (i == 0) { //父节点 sb.Append(SetParametes(i.ToString(), "-1", "a")); } else if (i < 10) //子节点 sb.Append(SetParametes(i.ToString(), "0", "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(", click:false"); 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 }, data: { simpleData: { enable: true} }, callback: { beforeClick: beforeClick } }; function beforeClick(treeId, treeNode, clickFlag) { className = (className === "dark" ? "" : "dark"); return (treeNode.click != false); } function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = { "Y": "ps", "N": "ps" };//父级子级联动 //type = { "Y": "p", "N": "ps" };//父级联动 //type = { "Y": "s", "N": "ps" };//子级联动 //type = { "Y": "", "N": "ps" };//不联动 zTree.setting.check.chkboxType = type; } $(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, zNodes); setCheck(); }); //显示div function showdiv() { $("#zhezhao").fadeIn(300); $("#treeDemodiv").fadeIn(300); } //隐藏div function closediv() { $("#zhezhao").fadeOut(300); $("#treeDemodiv").fadeOut(300); } //展示zTree function showZTree() { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var l = document.documentElement.clientWidth / 2 - $("#treeDemodiv").width() / 2; var t = document.documentElement.clientHeight / 2 - $("#treeDemodiv").height() / 2; $("#zhezhao").css({ "width": w + "px", "height": h + "px", "filter": "alpha(opacity=25)", "-moz-opacity": "0.25", "-khtml-opacity": "0.25", "opacity": "0.25" }); $("#treeDemodiv").css({ "left": l + "px", "top": t + "px" }); showdiv(); } //确定选中的数据 function zTreeOK() { //获取勾选的集合 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true); for (i = 0; i < nodes.length; i++) { alert(nodes[i].id + "," + nodes[i].name); } closediv(); } </script> <body> <form id="form1" runat="server"> <input type="button" value="显示" onclick="showZTree()"> <!------------------Treediv---------------------> <div id="treeDemodiv" class="zTreeDemoBackground left"> <ul > <li ><img onclick="closediv();" title="取消" src="../img/yzfalse.png" /></li> <li ><img onclick="zTreeOK();" title="确定" src="../img/yztrue.png" /></li></ul> <ul id="treeDemo" class="ztree"></ul> </div> <div id="zhezhao" ></div> <!------------------Treediv---------------------> </form> </body> </html>
整合包下载:http://down.51cto.com/data/1967063
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。