We_Relese/App/Relese/Views/BaseSystem/SysFunctions.cshtml

@using WeApp
@using WeApp.Authorization
@using WeApp.Configuration
@using WeApp.Views.Shared.Modals
@using WeApp.Views.Shared.Table
@{

    ViewBag.Title = L("FunctionTitle");
    string activeMenu = PermissionNames.PagesSystemMgFunctionMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu; //The menu item will be active for this page.
    List<SelectListItem> functionType = ViewBag.FunctionType;
    //CurrentUserViewModel currentUser = ViewBag.CurrentUser;
    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Functions/GetAll", activeMenu).SetFields(new List<FieldItem>()
    {
        new FieldItem("functionName", L("functionName"),align:"left"),
        new FieldItem("functionType", L("functionType"),"TypeFormatter"),
        new FieldItem("url", L("functionUrl")),
        new FieldItem("icon", L("functionIcon"),"IconFormatter"),
        new FieldItem("sort", L("functionSort")),
        new FieldItem("", L("Actions"),"ActionsFormatter"),
    }).SetPageArray(1000).SetOther(" data-row-attributes=\"RowAttributes\" ");
}
<style>
    .pagination-detail {
        display: none;
    }

    
</style>
@Html.Partial("Table/_Table", table)




@section modal {
    @{
        var inputs = new List<Input>()
        {
            new InputHide("id"),
            new InputHide("depth"),
            new InputHide("permissionName"),
            new InputHide("functionPath"),
            new Input("parentNo", L("functionParent"), InputTypes.List),
            new Input("functionNo", L("functionNo")),
            new Input("functionName", L("functionName")),
            new InputNumber("sort", L("functionSort")).SetRange(0,1000),
            new Input("icon", L("functionIcon")).SetNotRequired(),
        };
        if (AbpSession.UserType == UsersAndRolesTypeDefinition.Supper)
        {
            inputs.AddRange(new List<Input>
            {
                new Input("functionType", L("functionType")).SetSelectOptions((List<SelectListItem>) ViewBag.FunctionType),
                new Input("controller", L("functionController")).SetNotRequired(),
                new Input("action", L("functionAction")).SetNotRequired(),
                new Input("url", L("functionUrl")).SetNotRequired(),
                new Input("class", L("functionClass")).SetNotRequired(),
                new Input("script", L("functionScript")).SetNotRequired(),
            });
        }
        var modal = new ModalViewModel(L("function"), new ModalBodyViewModel(inputs));
        @Html.Partial("Modals/_Modal", modal)
    }
}

@section scripts
{
    <script type="text/javascript">
        var $table = $("#table");
        var actions = [], funs = [];

        $(function () {
            funs = LoadTreeTable({
                    idField: 'functionNo',
                    treeShowField: 'functionName',
                    parentIdField: 'parentNo',
                    customDataField: ['functionPath']
                }) ||
                { none: function() { console.log("No type"); } };
            var btnCreate = funs['btnCreate'];
            funs['btnCreate']= function(url,id) {
                console.log("Add", id);
                var row;
                if (typeof id === "string" && id !== "") {
                    row = $table.bootstrapTable("getRowByUniqueId", id);
                }
                if (row) {
                    $.iwbAjax4({
                        url: "/api/services/app/Functions/GetSelectStr",
                        success: function (res) {
                            $("#parentNo").empty().html(res);
                            btnCreate(url,id);
                            //BtnCreate({
                            //    data: { parentNo: row.functionNo, depth: row.depth + 1, functionPath: row.functionPath },
                            //    url: url,
                            //    disabled: "parentNo"
                            //});
                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            }
            var btnUpdate = funs['btnUpdate'];
            funs['btnUpdate']= function(url,id) {
                console.log("Edit", id);
                var row;
                if (typeof id === "string" && id !== "") {
                    row = $table.bootstrapTable("getRowByUniqueId", id);
                }
                if (row) {
                    $.iwbAjax4({
                        url: "/api/services/app/Functions/GetSelectStr",
                        success: function (res) {
                            $("#parentNo").empty().html(res);
                            btnUpdate(url,id);
                            //BtnUpdate({
                            //    url: url,
                            //    disabled: "parentNo,functionNo"
                            //});
                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            }
        });
 
        //自定义属性
        function RowAttributes(r) {
            return {
                "data-no": r.functionNo,
                "data-parent": r.parentNo
            };
        }
    </script>
    <script>
        function FunctionCall(type, url, id, that) {
            funs[type] ? funs[type].call(this, url, id, that) : funs["none"].call(this);
        }
    </script>
    <script>
        //格式化图标
        function IconFormatter(v) {
            if (v !== "") {
                return '<span class=" ' + v + '"></span>';
            }
            return v;
        }
        //操作按钮
        function ActionsFormatter(v, r) {
            var str = '<div class="btn-tool">';
            for (var i = 0; i < actions.length; i++) {
                //str += '<span class="table-action" onclick="funs[' + actions[i]["type"] + '](\'' + actions[i]["url"] + '\',\'' + r.id + '\',this)"><i class="' + actions[i]["icon"] + '"></i>' + actions[i]["name"] + ' </span>';
                str += '<span class="table-action" onclick="FunctionCall(\'' + actions[i]["type"] + '\',\'' + actions[i]["url"] + '\',\'' + r.id + '\',this)"><i class="' + actions[i]["icon"] + '"></i>' + actions[i]["name"] + ' </span>';
            }
            str += '</div>';
            return str;
        }
        
        // 格式化类型
        function TypeFormatter(v) {
            var functionTypeName = $('#hid-functionType option[value="' + v + '"]').text();
            switch (v) {
            case 9:
                return '<span class="label label-warning">' + functionTypeName + '</span>';
            case 1:
                return '<span class="label label-danger">' + functionTypeName + '</span>';
            case 2:
                return '<span class="label label-info">' + functionTypeName + '</span>';
            case 3:
                return '<span class="label label-success">' + functionTypeName + '</span>';
            default:
                return v;
            }
        }
    </script>

}
    <section style="display:none">
        @Html.DropDownList("hid-functionType", functionType)
    </section>