JSTree + IFrame 布局

最新推荐文章于 2022-10-11 20:48:48 发布

Teln_小凯

最新推荐文章于 2022-10-11 20:48:48 发布

阅读量244

点赞数

文章标签： JSTree

本文链接：https://blog.csdn.net/qq873113580/article/details/113771032

版权

JSTree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用JSTree做的Demo，大概功能包括：

1、树的刷新功能，定位功能

2、右键菜单，根据不同节点显示不同的功能

3、左右联动

效果图

HTML页面

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>品牌规则管理页面</title>

    <link href="~/Content/HJS/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/HJS/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="~/Content/HJS/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <link href="~/Content/HJS/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="~/Content/HJS/css/animate.css" rel="stylesheet">
    <link href="~/Content/HJS/css/style.css?v=4.1.2" rel="stylesheet">
    <link href="~/Content/HJS/css/plugins/jsTree/style.min.css" rel="stylesheet" />


    <style>
        .top-heading {
            border-color: #c5c5c5;
            border-width: 1px;
            border-style: solid;
            background: white;
            padding: .22em .2em .28em;
            cursor: default;
            display: block;
            margin-bottom: 2px;
            border-top: none;
        }

        .top-title {
            height: 29px;
            line-height: 30px;
            padding: 0 11px 0 5px;
            font-size: 16px;
            font-weight: bold;
            color: #FE9301;
        }

        ::-webkit-scrollbar-track {
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar {
            height: 6px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #999;
        }

        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
            height: auto;
            word-break: break-all;
        }

        .jstree-contextmenu {
            z-index: 200;
        }

        .green {
            color: #5cb85c;
        }

        .yellow {
            color: #ed9c28;
        }

        .red {
            color: #c9302c;
        }

        .blue {
            color: #31b0d5;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight" style="padding: 0px;">
        <div class="row">
            <div class="col-sm-3" style="margin: 0px; padding: 0px;">
                <div class="ibox float-e-margins" style="margin-bottom: 0px;">
                    <div class="ibox-title" style="padding: 0px; padding-top: 5px; border-top: none;">
                        <table style="width: 100%; height: 35px;">
                            <tr>
                                <td style="text-align: left; padding-left: 25px; width: 90px;">规则年度：</td>
                                <td style="padding-right: 5px;">
                                    <select id="dopYear" onchange="changeYear();" class="editable inline-edit-cell form-control customelement">
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="ibox-content" style="padding: 0px; overflow: auto;">
                        <div style="background-color: #f9f9f9; padding-left: 25px;">提示：右键以下节点做增删改操作</div>
                        @*左边的规则*@
                        <div id="ruleTree" style="margin-left: 20px; margin-top: 10px;">
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-9" style="margin: 0px; padding-left: 5px;">
                <div class="ibox float-e-margins" style="margin-bottom: 0px;">
                    <div class="ibox-title" style="padding: 0px; padding-top: 5px; border-top: none;">
                        <table style="width: 100%; height: 35px;">
                            <tr>
                                <td style="text-align: left; padding-left: 10px;">规则设置：<span id="topTitle"></span></td>
                                <td style="padding-right: 5px;"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="ibox-content" style="padding: 0px;">

                        <iframe id="main" name="main" style="width: 100%" src="" marginwidth="1" marginheight="1" scrolling="no" frameborder="0"></iframe>

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


    </div>
    <!-- 全局js -->
    <script src="~/Content/HJS/js/jquery.min.js?v=2.1.4"></script>
    <script src="~/Content/HJS/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Peity -->
    <script src="~/Content/HJS/js/plugins/peity/jquery.peity.min.js"></script>
    <!-- layer javascript -->
    <script src="~/Content/HJS/js/plugins/layer/layer.min.js?v=1.1"></script>
    <!-- jqGrid -->
    <script src="~/Content/HJS/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="~/Content/HJS/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <script src="~/Content/HJS/js/plugins/jsTree/jstree.min.js"></script>
    <script src="~/Content/HJS/js/plugins/layer/laydate/laydate.js"></script>
    <!-- 主数据JS -->
    <script src="~/Areas/DSF20/Content/dsf20.main.js"></script>
    <script type="text/javascript">
        //加载中控件
        var loading = null;
        var isFirstLoad = true;
        //刷新前的状态
        var refreshState = "";
        //要打开的ID
        var refreshSId = "";
        //开始结束的插件
        var endDate = null;
        var startDate = null;
        //树的数据
        var treeData = null;

        $(function () {
            var mainHeight = $("body").height() - 50 - 3;
            $(".ibox-content").height(mainHeight);
            $("#main").height(mainHeight);

            //绑定年份
            for (var i = 2021; i <= new Date().getFullYear() + 2; i++) {
                $("#dopYear").append("<option value=\"" + i + "\">" + i + "</option>");
            }
            $("#dopYear").val(new Date().getFullYear());

            $('#ruleTree').jstree({
                "plugins": ["contextmenu"],
                "contextmenu": contentMenu(),
                'core': {
                    'check_callback': true,
                    'data': function (node, callback) {
                        $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/GetTreeData", { year: $("#dopYear").val() }, function (data) {

                            for (var i = 0; i < data.length; i++) {
                                //设置图标
                                var item = data[i];
                                if (item.rule.DBType == dsf20Main.RuleType.Company) {
                                    item.icon = "glyphicon glyphicon-home yellow";//首页
                                }
                                else if (item.rule.DBType == dsf20Main.RuleType.Rule) {
                                    item.text += "-" + item.rule.UsedTypeCN;
                                    //规则名-状态
                                    switch (item.rule.DBState) {
                                        case dsf20Main.DBState.Delete://删除
                                            item.icon = "glyphicon glyphicon-remove";
                                            break;
                                        case dsf20Main.DBState.Effect://启用
                                            item.icon = "glyphicon glyphicon-play green";
                                            break;
                                        case dsf20Main.DBState.Normal://停用
                                            item.icon = "glyphicon glyphicon-stop red";
                                            break;
                                        default:
                                            break;
                                    }
                                }
                                else {
                                    item.icon = "glyphicon glyphicon-file blue";//其他节点
                                }


                            }
                            treeData = data;
                            callback.call(this, data);
                            var selectId = data[0].id;
                            if (data.length > 1) {
                                selectId = data[1].id;
                            }
                            if (isFirstLoad) {
                                setTimeout(function () {
                                    $('#ruleTree').jstree('select_node', selectId);
                                    $('#ruleTree').jstree('open_node', selectId);
                                }, 200);
                                isFirstLoad = false;
                            }
                            if (refreshState == "add") {
                                setTimeout(function () {
                                    $('#ruleTree').jstree('deselect_all');
                                    $('#ruleTree').jstree('close_all');

                                    $('#ruleTree').jstree('select_node', refreshSId);
                                    $('#ruleTree').jstree('open_node', refreshSId);
                                    refreshState = "";
                                    refreshSId = "";
                                }, 200);

                            }

                        });
                        //[
                        //    { "id": "0", "parent": "#", "text": "根目录" },
                        //    { "id": "1", "parent": "0", "text": "2021-Q1-新车" },// "state": { "opened": true, "selected": true }
                        //    { "id": "1.1", "parent": "1", "text": "奥迪" },
                        //    { "id": "1.2.1", "parent": "1.1", "text": "股东方" },
                        //    { "id": "1.2.1.1", "parent": "1.2.1", "text": "A001" },
                        //    { "id": "1.2", "parent": "1", "text": "一汽大众" },
                        //    { "id": "1.3", "parent": "1", "text": "上汽大众" },
                        //    { "id": "1.4", "parent": "1", "text": "进口车" },
                        //    { "id": "1.5", "parent": "1", "text": "保时捷" },
                        //    { "id": "1.6", "parent": "1", "text": "兰博基尼和宾利" },
                        //    { "id": "1.7", "parent": "1", "text": "捷达" },
                        //    { "id": "2", "parent": "0", "text": "2021-Q1-二手车" },
                        //]
                    }
                }
            }).on('changed.jstree', function (e, data) {
                //所有的选中都会进这里
                var node = $('#ruleTree').jstree(true).get_selected(true)[0];
                if (node == null) {
                    return;
                }
                if (node.original.rule.DBType == dsf20Main.RuleType.Rule || node.original.rule.DBType == dsf20Main.RuleType.Param) {
                    //显示名字
                    var name = "";
                    for (var i = node.parents.length-3; i >=0 ; i--) {
                        
                        if (i == node.parents.length - 3) {
                            name += getNameById(node.parents[i]);
                        } else {
                            name += "&nbsp;>&nbsp;" + getNameById(node.parents[i]);
                        }
                    }
                    if (name == "") {
                        name +=  node.text;
                    }
                    else {
                        name += "&nbsp;>&nbsp;" + node.text;
                    }
                    $("#topTitle").html(name);
                    $("#main").attr("src", "@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix" + node.original.rule.PageUrl);
                }


            }).on('show_contextmenu.jstree', function (e, data) {
                //右键菜单显示隐藏
                showMenu(data.node.original.rule.DBType);
            });

        });
            //获取树的父名字
            function getNameById(id) {
                var name = "";
                for (var i = 0; i < treeData.length; i++) {
                    if (treeData[i].id == id) {
                        name = treeData[i].text;
                        break;
                    }
                }
                return name;
            }
            //显示隐藏右键菜单，类型：Company>Rule>Brand>Param>Product
            function showMenu(type) {
                //先隐藏所有
                $(".jstree-contextmenu li").hide();
                switch (type) {
                    case dsf20Main.RuleType.Company:
                        //显示和编辑
                        $(".menu_add").parent().parent().show();
                        $(".menu_rename").parent().parent().show();
                        break;
                    case dsf20Main.RuleType.Rule:
                        $(".jstree-contextmenu li").show();
                        //隐藏新增和改名
                        $(".menu_add").parent().parent().hide();
                        $(".menu_rename").parent().parent().hide();
                        var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                        //启动状态
                        if (data.rule.DBState == dsf20Main.DBState.Effect) {
                            //隐藏启动
                            $(".menu_play").parent().parent().hide();
                        }
                        //禁用状态
                        if (data.rule.DBState == dsf20Main.DBState.Normal) {
                            //隐藏禁用
                            $(".menu_stop").parent().parent().hide();
                        }
                        break;
                    default:
                        $(".jstree-contextmenu").hide();
                        break;
                }
            }
            //年度切换
            function changeYear() {
                isFirstLoad = true;
                $('#ruleTree').jstree('refresh');
                $("#topTitle").text("");
            }
            //右键菜单
            function contentMenu() {
                var item = {
                    //"select_node":false,
                    "items": {
                        "新增": {
                            "label": "新增",
                            "icon": "glyphicon glyphicon-plus menu_add",
                            "action": function (data) {
                                var addForm = layer.open({
                                    type: 1,
                                    title: '新增规则',
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['540px', '225px'], //宽高
                                    btn: ["新建", "取消"],
                                    content: $("#addform").html(),
                                    success: function (layero, index) {
                                        formLoaded();
                                    },
                                    yes: function () {
                                        var name = $.trim($("#txtRuleName").val())
                                        var start = $.trim($("#txtStart").val());
                                        var end = $.trim($("#txtEnd").val());
                                        if (name == "") {
                                            layer.msg("请填写规则名称", { icon: 0 });
                                            return;
                                        }
                                        if (start == "") {
                                            layer.msg("请选择生效开始日期", { icon: 0 });
                                            return;
                                        }
                                        if (end == "") {
                                            layer.msg("请选择生效结束日期", { icon: 0 });
                                            return;
                                        }
                                        loading = layer.load(0, {
                                            shade: [0.1, '#fff']
                                        });
                                        var param = {};
                                        param.year = $("#dopYear").val();
                                        param.start = encodeURIComponent(start);
                                        param.end = encodeURIComponent(end);
                                        param.name = encodeURIComponent(name);
                                        param.typeId = $("#txtUsedType").val();
                                        param.typeName = encodeURIComponent($("#txtUsedType").find("option:selected").text());
                                        param.pid = $('#ruleTree').jstree(true).get_selected(true)[0].id;
                                        param.brands = encodeURIComponent(JSON.stringify(dsf20Main.GetBrandList()));
                                        $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/AddRule", param, function (data) {
                                            layer.close(loading);
                                            var icon = 0;
                                            if (data.result == true) {
                                                icon = 1;
                                                layer.close(addForm);


                                                refreshState = "add";
                                                refreshSId = data.sid;

                                                $('#ruleTree').jstree('refresh');
                                            }
                                            layer.msg(data.msg, { icon: icon });
                                        });
                                    }
                                });

                            }
                        },
                        "编辑": {
                            "label": "编辑",
                            "icon": "glyphicon glyphicon-pencil menu_edit",
                            "action": function (data) {
                                var addForm = layer.open({
                                    type: 1,
                                    title: '编辑规则',
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['540px', '225px'], //宽高
                                    btn: ["修改", "取消"],
                                    content: $("#addform").html(),
                                    success: function (layero, index) {
                                        formLoaded(function () {
                                            //选中的值
                                            var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                            $("#hid_id").val(data.rule.ID);
                                            $("#txtRuleName").val(data.rule.Name);
                                            $("#txtUsedType").val(data.rule.UsedTypeID);
                                            $("#txtStart").val(changeDateFormat(data.rule.StartDate));
                                            $("#txtEnd").val(changeDateFormat(data.rule.EndDate));

                                            $("#txtUsedType").attr("disabled", "disabled").css("background-color", "white");

                                            startDate.max = $("#txtEnd").val();
                                            endDate.min = $("#txtStart").val();
                                        });
                                    },
                                    yes: function () {
                                        var name = $.trim($("#txtRuleName").val())
                                        var start = $.trim($("#txtStart").val());
                                        var end = $.trim($("#txtEnd").val());
                                        if (name == "") {
                                            layer.msg("请填写规则名称", { icon: 0 });
                                            return;
                                        }
                                        if (start == "") {
                                            layer.msg("请选择生效开始日期", { icon: 0 });
                                            return;
                                        }
                                        if (end == "") {
                                            layer.msg("请选择生效结束日期", { icon: 0 });
                                            return;
                                        }
                                        loading = layer.load(0, {
                                            shade: [0.1, '#fff']
                                        });
                                        var param = {};
                                        param.id = $("#hid_id").val();
                                        param.start = encodeURIComponent(start);
                                        param.end = encodeURIComponent(end);
                                        param.name = encodeURIComponent(name);
                                        param.typeId = $("#txtUsedType").val();
                                        param.typeName = encodeURIComponent($("#txtUsedType").find("option:selected").text());

                                        $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/EditRule", param, function (data) {
                                            layer.close(loading);
                                            var icon = 0;
                                            if (data.result == true) {
                                                icon = 1;
                                                layer.close(addForm);


                                                refreshState = "";
                                                refreshSId = "";

                                                $('#ruleTree').jstree('refresh');
                                            }
                                            layer.msg(data.msg, { icon: icon });
                                        });
                                    }
                                });
                            }
                        },
                        "改名": {
                            "label": "改名",
                            "icon": "glyphicon glyphicon-pencil menu_rename",
                            "action": function (data) {
                                var form = layer.open({
                                    type: 1,
                                    title: '改名',
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['340px', '170px'], //宽高
                                    btn: ["修改", "取消"],
                                    content: $("#renameform").html(),
                                    success: function (layero, index) {
                                        var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                        $("#txtReName").val(data.rule.Name);
                                    },
                                    yes: function () {
                                        var name = $.trim($("#txtReName").val())

                                        if (name == "") {
                                            layer.msg("请输入新名称", { icon: 0 });
                                            return;
                                        }
                                        //选中的值
                                        var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                        loading = layer.load(0, {
                                            shade: [0.1, '#fff']
                                        });
                                        var param = {};
                                        param.id = data.rule.ID;
                                        param.name = encodeURIComponent(name);
                                        $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/ReName", param, function (data) {
                                            layer.close(loading);
                                            var icon = 0;
                                            if (data.result == true) {
                                                icon = 1;
                                                layer.close(form);
                                                refreshState = "";
                                                refreshSId = "";

                                                $('#ruleTree').jstree('refresh');
                                            }
                                            layer.msg(data.msg, { icon: icon });
                                        });
                                    }
                                });
                            }
                        },
                        "启用": {
                            "label": "启用",
                            "icon": "glyphicon glyphicon-play menu_play",
                            "action": function (data) {

                                layer.confirm('确定启用？', function (index) {
                                    //选中的值
                                    var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                    loading = layer.load(0, {
                                        shade: [0.1, '#fff']
                                    });
                                    var param = {};
                                    param.id = data.rule.ID;
                                    param.state = dsf20Main.DBState.Effect;
                                    $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/EditDBState", param, function (data) {
                                        layer.close(loading);
                                        var icon = 0;
                                        if (data.result == true) {
                                            icon = 1;

                                            refreshState = "";
                                            refreshSId = "";

                                            $('#ruleTree').jstree('refresh');
                                        }
                                        layer.msg(data.msg, { icon: icon });
                                    });

                                });
                            }
                        },
                        "停用": {
                            "label": "停用",
                            "icon": "glyphicon glyphicon-stop menu_stop",
                            "action": function (data) {
                                layer.confirm('确定停用？', function (index) {
                                    //选中的值
                                    var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                    loading = layer.load(0, {
                                        shade: [0.1, '#fff']
                                    });
                                    var param = {};
                                    param.id = data.rule.ID;
                                    param.state = dsf20Main.DBState.Normal;
                                    $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/EditDBState", param, function (data) {
                                        layer.close(loading);
                                        var icon = 0;
                                        if (data.result == true) {
                                            icon = 1;

                                            refreshState = "";
                                            refreshSId = "";

                                            $('#ruleTree').jstree('refresh');
                                        }
                                        layer.msg(data.msg, { icon: icon });
                                    });

                                });
                            }
                        },
                        "删除": {
                            "label": "删除",
                            "icon": "glyphicon glyphicon-remove menu_remove",
                            "action": function (data) {
                                layer.confirm('确定删除？', function (index) {
                                    //选中的值
                                    var data = $('#ruleTree').jstree(true).get_selected(true)[0].original;
                                    loading = layer.load(0, {
                                        shade: [0.1, '#fff']
                                    });
                                    var param = {};
                                    param.id = data.rule.ID;
                                    param.state = dsf20Main.DBState.Delete;
                                    $.post("@aZaaS.KStar.Web.App_Start.WebCommon.WebPrefix/DSF20/RuleManager/EditDBState", param, function (data) {
                                        layer.close(loading);
                                        var icon = 0;
                                        if (data.result == true) {
                                            icon = 1;

                                            refreshState = "";
                                            refreshSId = "";

                                            $('#ruleTree').jstree('refresh');
                                        }
                                        layer.msg(data.msg, { icon: icon });
                                    });

                                });
                            }
                        }
                    }
                };
                return item;
            }
            function formLoaded(back) {
                setTimeout(function () {
                    dsf20Main.BindUsedTypeBySelect("txtUsedType");
                    //日期范围限制
                    startDate = {
                        elem: '#txtStart',
                        format: 'YYYY-MM-DD',
                        min: '2021-01-01', //设定最小日期为当前日期
                        max: '2088-12-31', //最大日期
                        //istime: true,
                        istoday: false,
                        choose: function (datas) {
                            endDate.min = datas; //开始日选好后，重置结束日的最小日期
                            endDate.startDate = datas //将结束日的初始值设定为开始日
                        }
                    };
                    endDate = {
                        elem: '#txtEnd',
                        format: 'YYYY-MM-DD',
                        min: '2021-01-01', //设定最小日期为当前日期
                        max: '2088-12-31', //最大日期
                        //istime: true,
                        istoday: false,
                        choose: function (datas) {
                            startDate.max = datas; //结束日选好后，重置开始日的最大日期

                        }
                    };
                    laydate(startDate);
                    laydate(endDate);
                    //成功后返回
                    if (back) {
                        back();
                    }
                }, 100);
            }
    </script>
    <script type="text/html" id="addform">
        <div style="margin: 20px 20px 10px 20px;">
            <input id="hid_id" value="" type="hidden" />
            <table style="width: 100%;">
                <tr>
                    <td>名称：</td>
                    <td>
                        <input id="txtRuleName" maxlength="14" placeholder="规则名称" style="width: 174px;" type="text" class="form-control" /></td>
                    <td style="padding-left: 10px;">类型：</td>
                    <td>
                        <select id="txtUsedType" style="width: 174px;" class="form-control">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>开始日期：</td>
                    <td>
                        <input id="txtStart" placeholder="生效开始日期" readonly="readonly" style="width: 174px; background-color: white;" type="text" class="laydate-icon form-control layer-date" /></td>
                    <td style="padding-left: 10px;">结束日期：</td>
                    <td>
                        <input id="txtEnd" placeholder="生效结束日期" readonly="readonly" style="width: 174px; background-color: white;" type="text" class="laydate-icon form-control layer-date" /></td>
                </tr>
            </table>
        </div>
    </script>
    <script type="text/html" id="renameform">
        <div style="margin: 20px 20px 10px 20px;">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 50px;">名称：</td>
                    <td>
                        <input id="txtReName" maxlength="14" placeholder="请输入新名称" type="text" class="form-control" /></td>

                </tr>
            </table>
        </div>
    </script>
</body>

</html>

//所有基础数据的
var dsf20Main = {};
//品牌主数据
dsf20Main.BrandList = [
    {
        "BrandID": 1, "BrandCN": "奥迪", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "股东方有合同量编辑", "Url": "/xxxx/xxx.1" },
            { "Des": "股东方无合同量编辑", "Url": "/xxxx/xxx.2" },
            { "Des": "非股东方编辑", "Url": "/xxxx/xxx.3" }
        ]
    },
    {
        "BrandID": 2, "BrandCN": "一汽大众", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "一汽股东方", "Url": "http://xxxxx" }
        ]
    },
    {
        "BrandID": 3, "BrandCN": "进口车", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "股东方", "Url": "http://xxxxx" }
        ]
    },
    {
        "BrandID": 4, "BrandCN": "保时捷", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "股东方", "Url": "http://xxxxx" }
        ]
    },
    {
        "BrandID": 5, "BrandCN": "兰博基尼和宾利", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "股东方", "Url": "http://xxxxx" }
        ]
    },
    {
        "BrandID": 6, "BrandCN": "捷达", "BrandEN": "", "Children": [], "UrlList": [
            { "Des": "请选择", "Url": "" },
            { "Des": "股东方", "Url": "http://xxxxx" }
        ]
    },
];

//新车二手
dsf20Main.UsedTypeList = [
    { "UsedTypeID": 1, "UsedTypeCN": "新车", "UsedTypeEN": "" },
    { "UsedTypeID": 2, "UsedTypeCN": "二手车", "UsedTypeEN": "" }
];

//规则类型
dsf20Main.RuleType = {
    "Company": "Company",
    "Rule": "Rule",
    "Brand": "Brand",
    "Param": "Param",
    "Product": "Product"
};
//规则类型
dsf20Main.DBState = {
    "Delete": "Delete",// "删除";
    "Effect": "Effect",//"生效";
    "Normal": "Normal"// "正常";
};
//获取品牌
dsf20Main.GetBrandList = function () {
    var brandList = [];
    for (var i = 0; i < dsf20Main.BrandList.length; i++) {
        var item = dsf20Main.BrandList[i];
        brandList.push({ "ID": item.BrandID, "Name": item.BrandCN });
    }
    return brandList;
}
//获取主品牌的数据
dsf20Main.GetBrandByID = function (id) {
    var model = null;
    for (var i = 0; i < dsf20Main.BrandList.length; i++) {
        var item = dsf20Main.BrandList[i];
        if (item.BrandID.toString() == id) {
            model = item;
            break;
        }
    }
    return model;
}

//绑定品牌到下拉框
dsf20Main.BindBrandBySelect = function (eleId) {
    var html = "";
    for (var i = 0; i < dsf20Main.BrandList.length; i++) {
        var item = dsf20Main.BrandList[i];
        html += "<option value=\"" + item.BrandID + "\">" + item.BrandCN + "</option>";
    }
    $("#" + eleId).html(html);
}
//绑定新车二手到下拉框
dsf20Main.BindUsedTypeBySelect = function (eleId) {
    var html = "";
    for (var i = 0; i < dsf20Main.UsedTypeList.length; i++) {
        var item = dsf20Main.UsedTypeList[i];
        html += "<option value=\"" + item.UsedTypeID + "\">" + item.UsedTypeCN + "</option>";
    }
    $("#" + eleId).html(html);
}


//JQ相关插件

var jqgSelect = function (options) {
    var jqgSelect_element = function (value, options) {
        var ds = $.extend(true, {}, options.dataSource), colId = options.id,
            rowId = colId.substring(0, colId.indexOf(options.name) - 1),
            gridId = options.gridId || $("#" + rowId).parents("table").attr("id");
        var row = $("#" + gridId).jqGrid("getRowData", rowId);
        if (typeof ds == "object" && typeof ds.rows == "function") {
            ds.rows = ds.rows(row, gridId, rowId);
        }
        var selectOptions = "";
        for (var i = 0, l = ds.rows.length; i < l; i++) {
            selectOptions += "<option value=\"" + ds.rows[i][ds.valueField] + "\">" + ds.rows[i][ds.textField] + "</option>";
        }
        var $select = $('<select class="editable inline-edit-cell form-control" data-gridid =' + gridId + ' data-rowid =' + rowId + ' data-colname=' + options.name
            + ' data-hiddencol=' + (options.hiddenCol || "") + '>'
            + selectOptions + '</select>');
        $select.val(row[options.hiddenCol]);
        return $select;
    }
    var jqgSelect_value = function (elem, operation, value) {
        var rowId = $(elem).data('rowid');
        var hiddenCol = $(elem).data('hiddencol');
        $("#" + $(elem).data('gridid')).jqGrid("setCell", rowId, hiddenCol, elem ? $(elem).val() : '', "", "", true);
        var value = $(elem).find('option:selected').text();
        if (value == "请选择") {
            return "";
        }
        return value;
    }
    options = options || {};
    options.custom_element = jqgSelect_element;
    options.custom_value = jqgSelect_value;
    return options;
}

//验证区域值的
var validateRange = function (value, name) {
    if ($.trim(value) == "") {
        return [true, ""];
    }
    var reg = /^[\(\[](\*|((\-|\+)?\d+(\.\d+)?))\,(\*|((\-|\+)?\d+(\.\d+)?))[\]\)]$/;
    if (reg.test(value)) {
        if (value.lastIndexOf("*") > 0) {
            return [true, ""];
        }
        var arrays = value.replace("(", "").replace(")", "").replace("[", "").replace("]", "").split(",");
        if (parseFloat(arrays[0]) > parseFloat(arrays[1])) {
            return [false, name + "：第一个值不能大于第二个值"];
        }
        return [true, ""];
    }
    else {
        return [false, name + "：格式有误，参考格式：[1,*)"];
    }
}

//Excel导出
var openDownloadDialog = function (url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
var sheet2blob = function (sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}

//excel导入
var importf = function (obj, backData) {//导入
    if (!obj.files) {
        return;
    }
    var wb;//读取完成的数据
    var rABS = false;//是否将文件读取为二进制字符串
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        var datas = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        backData(datas);
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}

var fixdata = function (data) { //文件流转BinaryString
    var o = "",
        l = 0,
        w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}

//时间戳转为正常的如期格式  参数时间戳
var changeDateFormat = function (timestamp) {
    var date = new Date(parseInt(timestamp.replace("/Date(", "").replace(")/", ""), 10));
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());// + ' ';
    h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
    m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
    s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
    //return Y + M + D + h + m + s;
    return Y + M + D;
}

树的Model，例子采用的是ID-PID格式，ID-Children做起来太麻烦了就没用

using aZaaS.Business.DAL.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace aZaaS.Business.DAL.ViewModel
{
    public class VURule
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
        public R_Rule rule { get; set; }

        /// <summary>
        /// 数据模型转实体模型
        /// </summary>
        /// <param name="list"></param>
        /// <returns></returns>
        public static List<VURule> ConvertToUIModel(List<R_Rule> list)
        {
            List<VURule> uiList = new List<VURule>();
            foreach (var rule in list)
            {
                VURule vu = new VURule();
                vu.id = rule.SID.ToString();
                vu.parent = rule.PID == Guid.Empty ? "#" : rule.PID.ToString();
                vu.text = rule.Name;
                vu.rule = rule;
                uiList.Add(vu);
            }
            return uiList;
        }
    }
}