ztree下拉框

css 参考https://gitee.com/zTree/zTree_v3/blob/master/css/zTreeStyle/zTreeStyle.css

js参考https://gitee.com/zTree/zTree_v3/blob/master/js/jquery.ztree.all.js

@section styles {
    <link type="text/css" rel="stylesheet" href="~/css/zTree/css/zTreeStyle.css" />
    <link href="@Url.Content("~/css/QA/KnowledgeNew.css?rank=20180705")" rel="stylesheet" type="text/css" />
    <style>
        .trg{
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 6px solid black;
            position: absolute;
            left:99%;
            top:8px;

        }
        .org-select{
            cursor: default;
            z-index: -1;
            width:100%;
        }
        .ztree {
          display:none; 
          position: absolute;
          border:1px solid #4aa5ff;
          width:100%;
          z-index:100;
          background-color:white
        }
    </style>
}

          <div class="form-group KNWelfare">
            <label for="" class="col-sm-1 control-label">福利地</label>
            <div class="col-sm-10">
                <div style="position: relative;">
                    <input id="orgName" class="org-select" readonly />  <!-- 模拟select点击框 以及option的text值显示-->
                    <i class="trg"style="position: absolute;"></i> <!-- 模拟select右侧倒三角 -->
                    <!-- zTree树状图 相对定位在其下方 -->
                    <div class="ztree">
                        <ul id="tree"></ul>
                    </div>  
                </div>
            </div>
          </div>

    <script src="@Url.Content("~/js/zTree/js/jquery.ztree.all-3.5_forked.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/js/QA/KnowledgeNew.js?token=2018121301")" type="text/javascript"></script>

    //获取福利地
    function getProviceCityWelfareTree(values) {
        var zTree;
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId"
                },
                key: {
                    name: "name"
                }
            },
            check: {
                enable: true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                nocheckInherit: true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
            },
            callback: {
                onCheck: zTreeOnCheck
            }
        };

        $.svc.post({
            api: 'QA.GetProviceCityWelfareTree',
            ptype: 'BaseReqParam',
            controller: '/Base/Action',
            data: {
                ExtraData: {
                }
            },
            success: function (data) {
                var zNodes = data.Entities;
                var t = $("#tree");
                $.fn.zTree.init(t, setting, zNodes);
                //selectNode("tree");
                checkNodes("tree", values);
            },
            fail: function (msg) {
                showMsg(msg);
            }
        });

        function zTreeOnCheck(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getCheckedNodes(true);
            var name = "";
            for (var i = 0; i < nodes.length; i++)
            {
                if (nodes[i].level == 2) {
                    name += nodes[i].name + ";";
                }
            }
            $('#orgName').val(name);
            $('#orgName').attr("title", name);
        }
    }

    //区域外点击事件
    function onBodyDownByActionType(event) {
        if (event.target.id.indexOf('tree') == -1) {
            if (event.target.id != 'selectDevType') {
                hideTree();
            }
        }
    }
    function checkNodes(ele, values)
    {
        var treeObj = $.fn.zTree.getZTreeObj(ele);
        var nodes = treeObj.getCheckedNodes(false);
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].level == 2) {
                for (var j = 0; j < values.length; j++) {
                    if (values[j] == nodes[i].name) {
                        treeObj.checkNode(nodes[i], true, true);
                    }
                }
            }
        }
    }
    $("#orgName").unbind('click').bind('click', function () {
        showTree();
    });
    //下拉框显示 隐藏
    function showTree() {
        if ($('.ztree').css('display') == 'none') {
            $('.ztree').css('display', 'block');
        } else {
            $('.ztree').css('display', 'none');
        }
        $("body").bind("mousedown", onBodyDownByActionType);
    }
    function hideTree() {
        $('.ztree').css('display', 'none');
        $("body").unbind("mousedown", onBodyDownByActionType);
        return false;
    }