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！

下面是獲取代碼，