你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET中使用开源插件zTree的小结

在最近的项目应用中,找到了zTree免费的好东西,这里总结一下:

源码下载:http://www.ztree.me/

效果是酱紫的:

 

前台代码:

  样式和脚本

  <link rel="stylesheet" href="JavaScript/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" />  <script type="text/javascript" src="JavaScript/zTree/js/jquery-1.4.4.min.js"></script>  <script type="text/javascript" src="JavaScript/zTree/js/jquery.ztree.core-3.5.js"></script>  <script type="text/javascript">    var curMenu = null, zTree_Menu = null;    var setting = {      view: {        showLine: true,        selectedMulti: false,        dblClickExpand: false      },      data: {        simpleData: {          enable:true,          idKey: "id",          pIdKey: "pId",          rootPId: ""        }      },      callback: {        beforeClick: function(treeId, treeNode) {          var zTree = $.fn.zTree.getZTreeObj("tree");          if (treeNode.isParent) {            zTree.expandNode(treeNode);            return false;          } else {            demoIframe.attr("src",treeNode.file);            return true;          }        }      }    };
var zNodes=<%=sbData.ToString() %>; function beforeClick(treeId, node) { if (node.isParent) { if (node.level === 0) { var pNode = curMenu; while (pNode && pNode.level !==0) { pNode = pNode.getParentNode(); } if (pNode !== node) { var a = $("#" + pNode.tId + "_a"); a.removeClass("cur"); zTree_Menu.expandNode(pNode, false); } a = $("#" + node.tId + "_a"); a.addClass("cur"); var isOpen = false; for (var i=0,l=node.children.length; i<l; i++) { if(node.children[i].open) { isOpen = true; break; } } if (isOpen) { zTree_Menu.expandNode(node, true); curMenu = node; } else { zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true); curMenu = node.children[0]; } } else { zTree_Menu.expandNode(node); } } return !node.isParent; } $(document).ready(function(){ var t = $("#tree"); t = $.fn.zTree.init(t, setting, zNodes); demoIframe = $("#testIframe"); demoIframe.bind("load", loadReady); var zTree = $.fn.zTree.getZTreeObj("tree"); zTree.selectNode(zTree.getNodeByParam("id", 101)); }); function loadReady() { var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, htmlH = demoIframe.contents().find("html").get(0).scrollHeight, maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH), h = demoIframe.height() >= maxH ? minH:maxH ; if (h < 530) h = 530; demoIframe.height(h); } </script> <style> body { margin:0; padding:0; text-align: center; } div, p, table, th, td { list-style:none; margin:0; padding:0; color:#333; font-size:12px; font-family:dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif; } #testIframe {margin-left: 10px;} .ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #66A3D1; border:1px silver solid;} .ztree li a.level0.cur {background-color: #66A3D2; } .ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;} .ztree li a.level0 span.button { float:right; margin-left: 10px; visibility: visible;display:none;} .ztree li span.button.switch.level0 {display:none;} .ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(JavaScript/zTree/css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} .ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(JavaScript/zTree/css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} </style>

  页面布局

<div>  <table border="0px" width="100%" align="left">    <tr>      <td colspan="2">        <iframe id="Iframe1" name="testIframe" frameborder="0" scrolling="no" width="100%" height="80" src="PageTop.aspx"></iframe>      </td>    </tr>    <tr>      <td width="15%" align="left" valign="top" style="border-right:#999 1px dashed;">        <ul id="tree" class="ztree" style="width:220px; height:600px; overflow:auto; margin:0px; border-style:none;"></ul>      </td>      <td width="85%" align="left" valign="top">        <iframe id="testIframe" name="testIframe" frameborder="0" scrolling="auto" width="100%" height="600px" src="blank.htm" style=" margin:0px;"></iframe>      </td>    </tr>  </table></div>

后台代码:

  SqlDAL sqlAccess = new SqlDAL();  public StringBuilder sbData = new StringBuilder();  protected void Page_Load(object sender, EventArgs e)  {    //1:项目 2:名称 3:操作    sbData.Append("[");    sbData.Append("{ id:1, pId:0, name:'项目', open:true},");    //加载项目    string strSql = "Select * from dbo.t_Menu";    System.Data.DataSet ds = sqlAccess.ReadFromDB(strSql);    if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)    {      System.Data.DataTable dt = ds.Tables[0];      for (int i = 0; i < dt.Rows.Count; i++)      {        string strProName = dt.Rows[i]["MenuName"].ToString();        string strId = "1" + Convert.ToString(i + 1);        string strPid = "1";        //sbData.Append(string.Format("{id:"+"{0}, pId:{1}, name:'{2}'"+"},", strId, strPid, strProName));//容易报错        sbData.Append("{ id:" + strId + ", pId:" + strPid + ", name:'" + strProName + "'},");        //加载名称        strSql = string.Format("Select * from dbo.t_Pars where MenuID='{0}'", dt.Rows[i]["ID"].ToString());        System.Data.DataSet ds2 = sqlAccess.ReadFromDB(strSql);        if (ds2 != null && ds2.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)        {          System.Data.DataTable dt2 = ds2.Tables[0];          string strId2 = strId + "1";//路径需要修改啊          sbData.Append("{ id:" + strId2 + ", pId:" + strId + ", name:'录入',iconSkin:'icon04',file:'Project/test.aspx'},");          for (int j = 0; j < dt2.Rows.Count; j++)          {            strProName = dt2.Rows[j]["Name"].ToString() + "图";            strId2 = strId + Convert.ToString(j + 2);//路径需要修改            sbData.Append("{ id:" + strId2 + ", pId:" + strId + ", name:'" + strProName + "',iconSkin:'icon06',file:'Project/test.aspx'},");          }        }      }    }    //加载定制    sbData.Append("{ id:2, pId:0, name:'项目管理', open:true},");    sbData.Append("{ id:21, pId:2, name:'项目制定'},");    sbData.Append("{ id:211, pId:21, name:'添加',iconSkin:'icon04',file:'Project/test.aspx'}");    sbData.Append("]");  }

PS: 

在此之前使用Ajax请求获取Json数据,Json数据是获取到了,可是,页面的就是显示不出来,感觉好奇怪啊,哎,Teng!

下面是获取代码,问题先记录下

$.post("AJAX/GetDynamicMenu.ashx",{action:"1"},function(data,status){        if(status=="success")        {          var zNodes = data;                    var t = $("#tree");          t = $.fn.zTree.init(t, setting, zNodes);          demoIframe = $("#testIframe");          demoIframe.bind("load", loadReady);          var zTree = $.fn.zTree.getZTreeObj("tree");          zTree.selectNode(zTree.getNodeByParam("id", 101));        }      });

 

待续......