<%@ page contentType="text/html;charset=UTF-8" %>

<link rel="stylesheet" href="<%=request.getContextPath()%>/js/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/pagination.css">
<div class="page-container">
    <div class="left-tree">
        <input type="hidden" id="zNode_id" value=""/>
        <input type="hidden" id="zNode_p_id" value=""/>
        <div class="panel-header">
            组织机构
        </div>
        <div class="pd-10">
            <a class="btn btn-primary radius" style="font-size: 12px;padding:2px 6px;height: 26px;" onclick="javascript:addDept('zNode_p_id')">添加同级</a>
            <a class="btn btn-primary radius" style="font-size: 12px;padding:2px 6px;height: 26px;" onclick="javascript:addDept('zNode_id')">添加下级</a>
        </div>
        <div class="tree-div">
            <ul id="treeDemo" class="ztree" ></ul>
        </div>
    </div>
    <div class="right-content" >

        <div class="datalist " id="datalist">

        </div>
    </div>
</div>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.pagination.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">

    function searchDept() {
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {

                    $("#zNode_id").val(treeNode.id);
                    $("#zNode_p_id").val(treeNode.pId);
                    getDept(treeNode.id,treeNode.pId);
                }
            }
        };
        $.ajax({
            type: "post",
            url: "./dept_tree_ajax.jsp",
            success: function (data) {
                if (data != null && data.length == 0) {

                } else {
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取ztree对象
                    var node = zTree.getNodes()[0];//获取id为1的点
                    zTree.selectNode(node);//选择点
                    zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件
                }


            }
        });
    }
    function addDept(input_id){
        getDept('',$("#"+input_id).val());
    }
    function getDept(id,pid){
        $.ajax({
            type: "post",
            url: "./dept_add.jsp?p_id="+pid+"&id="+id,
            success: function (msg) {
                $("#datalist").html(msg);
            }
        });
    }

    $(function(){
        searchDept();

    });



</script>