We_Relese/App/Relese/Views/Basic/GroupRole.cshtml

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

@{
    ViewBag.Title = "演练角色组预案信息维护";
    string activeMenu = PermissionNames.PagesBasicMgGroupRoleMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
	var searchForm = new SearchFormViewModel(new List<SearchItem>()
    {
        new SearchItem("roleGroupName","预案名称"),   
    },"search-form",false);

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "TrainingRoleGroup/GetAll", activeMenu, searchForm)
	.SetFields(new List<FieldItem>()
    {
        new FieldItem("roleGroupName", "预案名称"),
        new FieldItem("roleNames", "角色"),
    });
}
@section css{
    
}

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

@section modal{
    <!--Main Modal-->
    @{
        var modal = new ModalViewModel("角色组", new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new Input("roleGroupName", "预案名称"),   
            new InputTextarea("description", "预案描述").SetNotRequired(),   
        }));
    }
    @Html.Partial("Modals/_Modal", modal)
}

@section scripts
{
    <script type="text/javascript">
        var $table;
        $(function () {
            $table = LoadTable();
            var funs = window.iwbfuns || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function() {
                BtnCreate({
                    data: { id: "" },
                    dataFun: GetSaveData,
                    shownAfter: function() {
                        GetRoleInfo();
                    }
                });
            }
            funs["btnUpdate"] = function () {
                var row = $table.bootstrapTable('getSelections')[0];
                if (row) {
                    BtnUpdate({
                            disabled: "",
                            dataFun: GetSaveData,
                            shownAfter: function() {
                                GetRoleInfo(row.roles);
                            }
                        },
                        row);
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }

                BtnUpdate({ disabled: "" });
            };
        });

        function GetSaveData() {
            var data = $.formSerialize($('#modal form'));
            var roleNos = [];
            $('#modal #role-box input[name="role"]:checked').each(function () {
                if ($(this).is(':checked')) {
                    roleNos.push($(this).data('role-no'));
                }
            });
            data.roleNos = roleNos;
            return data;
        }
    </script>
    
    <script>
        function GetRoleInfo(roleNos) {
            $('#modal #role-box').remove();
            $.iwbAjax4({
                url: abp.appUrl + "TrainingRoleGroup/GetAllRoles",
                block: true,
                success: function(res) {
                    FormatterRoleBody(res, roleNos);
                }
            });
        }

        function FormatterRoleBody(data, roleNos) {
            var $Div = $('<div>', { 'css': { 'padding': '0 10px 10px' }, 'id': 'role-box' });
            var temp =
                '<label class="iwb-checkbox iwb-{3}"><input type="checkbox" id="role-{0}" data-role-no="{0}" name="role" value="{0}" {2}><span></span>{1}</label>';

            var $roleBox = $('<div>', { 'class': 'dynamic-box row', 'css': { 'margin': '10px', 'paddingBottom': '0' } });
            var roleArr = roleNos ? roleNos.split(',') : undefined;
            if (data) {
                data.forEach(function(v) {
                    var checkedStr = "";
                    if (roleArr && roleArr.indexOf(v.id) > -1) {
                        checkedStr = "checked";
                    }
                    var $role = $('<div>', { 'class': 'col-sm-3' })
                        .append(temp.format(v.id, v.roleName, checkedStr, 'green'));
                    $roleBox.append($role);
                });
            }
            var $info = $('<div>', { 'class': 'iwb-info-box iwb-sm',  'css': { 'padding': '0 10px' } });
            $info.append('<div class="box-header">演练角色</div>');
            $info.append($roleBox);
            $Div.append($info);
            $('#modal form').append($Div);
        }
    </script>

    <!--格式化-->
    <script  id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
            case 0:
                return '<span class="label label-danger">' + name +'</span>';
            default:
                return '<span class="label label-info">' + name +'</span>';
            }
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>

    @*@Html.DropDownList("hid-type", type)*@
</section>