<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="qsdn.master.cs" Inherits="qsdn.qsdn.qsdn" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../javascript/jquery-1.9.1.min.js"></script>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../bootstrap/js/bootstrap.min.js"></script> 
    <link href="../javascript/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> 
    <script src="../javascript/ztree/js/jquery.ztree.core.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>




   <script type="text/javascript">
 
      
    var setting = {
        view: {
            showLine: false,
            showIcon: false,
            selectedMulti: false,
            dblClickExpand: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true
            }
        },

        callback: { 
         onClick: onClick 
        }
    };

    var zNodes = [
        { id: 1, pId: 0, name: "启明星系统", open: true },
        { id: 11, pId: 1, name: "启明星会议系统Book" },
        { id: 111, pId: 11, name: "收件箱1" },
        { id: 112, pId: 111, name: "收件箱2" },
        { id: 113, pId: 112, name: "收件箱3" },
        { id: 114, pId: 113, name: "收件箱4" },
        { id: 12, pId: 1, name: "启明星帮助台Helpdesk" },
        { id: 13, pId: 1, name: "草稿" },
        { id: 14, pId: 1, name: "已发送邮件" },
        { id: 15, pId: 1, name: "已删除邮件" }
       
    ];

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeNav");
        zTree.expandNode(treeNode);
    }

    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
        icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);

        if (treeNode.level > 1) {
            var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            switchObj.before(spaceStr);
        }
    }

    

    $(document).ready(function () {
        var treeObj = $("#treeNav");
        $.fn.zTree.init(treeObj, setting, zNodes);
        
        var treeObj = $.fn.zTree.getZTreeObj("treeNav");
        // 根据树id来获取节点，这里treeId是树对象里节点id，不是页面元素id
         var node = treeObj.getNodeByParam("id", "114");
         // 根据节点，默认选中节点
         treeObj.selectNode(node);
         // 根据选中节点，触发点击事件，必须要选中节点，不然不生效
        treeObj.setting.callback.onClick(null, treeObj.setting.treeId, node);
          // 根据节点，默认展开节点
         treeObj.expandNode(node);
 
     
    });
 
	</script>

    <style>
        .content_wrap{ display:flex }
    </style>

	<style type="text/css">

.ztree * {font-size:14px;font-family:'Century Gothic'}
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree li a {width:200px;height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
.ztree li span {line-height:30px;}
.ztree li span.button {margin-top: -7px;}
.ztree li span.button.switch {width: 16px;height: 16px;}

.ztree li a.level0 span { font-weight:bold }

 

.ztree li span.button.noline_close:before { 
  content: "";
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px 3px 3px 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-top:6px;  
      margin-left:3px;     
}
.ztree li span.button.noline_open:before {
  content: "";
 border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
    margin-top:8px; 
    margin-left:3px;  

}
 
 
	</style>





</head>
<body>
    <form id="form1" runat="server">
    <div>

        <div class="content_wrap">

	<div class="left">
		<ul id="treeNav" class="ztree"></ul>
	</div>

	<div class="right">
        ffff
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>

       </div>
 </div>
        
    </div>



        <script>

           // var zTree = $.fn.zTree.getZTreeObj("treeNav"); 
           // var node = zTree.getNodeByParam("id", 114);
           // zTree.checkNode(node, true, true);
           // zTree.updateNode(node);
        </script>




    </form>
</body>
</html>
