OpenAuth.Net/OpenAuth.Mvc/js/droptree.js

// ***********************************************************************
// Assembly         : OpenAuth.Mvc
// Author           : yubaolee
// Created          : 10-16-2016
//
// Last Modified By : yubaolee
// Last Modified On : 10-16-2016
// ***********************************************************************
// <copyright file="droptree.js" company="www.cnblogs.com/yubaolee">
//     版权所有 玉宝(C) 2017
// </copyright>
//单击文本框弹出的选择列表,可以多选。调用： layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds");
//如果想去掉layui，只需把layui.define改成一个普通的函数，最后的exports（xxx）改成一个闭包就行
// ***********************************************************************

layui.define(['jquery', 'layer'], function (exports) {
    var $ = layui.jquery;
    var layer = layui.layer;
    var options;
    var zTreeObj;
    var setting;

    var showMenu = function () {
        $("#menuContent").css({ left: "10px", top: $(options.nameDOM).outerHeight() + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    };
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    var setCheck = function () {   //设置初始选中的值
        zTreeObj.checkAllNodes(false);

        var value = $(options.idDOM).val();
        if (value == undefined) return;
        var nodeids = value.split(",");
        $.each(nodeids,
            function () {
                var node = zTreeObj.getNodeByParam("Id", this, null);
                if (node != null) {
                    zTreeObj.checkNode(node, true, false);
                }
            });

    }
    function onClick(e, treeId, treeNode) {
        var nodes = zTreeObj.getSelectedNodes();

        for (var i = 0, l = nodes.length; i < l; i++) {
            $(options.nameDOM).val(nodes[i].Name);
            $(options.idDOM).val(nodes[i].Id);
            break;
        }
        hideMenu();
    }
    function onCheck(e, treeId, treeNode) {
        var nodes = zTreeObj.getCheckedNodes(true);

        var ids = nodes.map(function (e) { return e.Id; }).join(",");
        var names = nodes.map(function (e) { return e.Name; }).join(",");
        $(options.nameDOM).val(names);
        $(options.idDOM).val(ids);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    var load = function () {
        var index = layer.load();
        $.getJSON(options.url,
            {
                page: 1, rows: 10000
            },
        function (json) {
            layer.close(index);
            if (json.length == 0) {
                $(options.nameDOM).val('');
                $(options.idDOM).val('');
                return;
            }
            zTreeObj = $.fn.zTree.init($("#org"), setting, json);
            setCheck();
            zTreeObj.expandAll(true);
            showMenu();
        });
    }

    exports('droptree', function (url, name, id) {
        options = {
            text: 'Name',
            key: 'Id',
            parentKey: 'ParentId',
            nameDOM: name,   //显示的文本框ID，如："#catetoryName"
            idDOM: id,   //隐藏的文本框，如："#categoryId"
            url: url
        }
        setting = {
            view: { selectedMulti: true },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
            },
            data: {
                key: {
                    name: options.text,
                    title: options.text
                },
                simpleData: {
                    enable: true,
                    idKey: options.key,
                    pIdKey: options.parentKey,
                    rootPId: 'null'
                }
            },
            callback: {
                onClick: onClick,
                onCheck: onCheck
            }
        };
        load();
    });
});