@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="main-content">
    <div id="breadcrumbs">
        <ul class="breadcrumb">
            <li><i class="icon-home"></i> <a href="#">用户列表</a><span class="divider"><i class="icon-angle-right"></i></span></li>
        </ul><!--.breadcrumb-->
    </div><!--#breadcrumbs-->
    <div class="page-content">
        <div class="row">
            <div class="col-sm-6" style="width:100%;">
                <div class="dataTables_filter" id="sample-table-2_filter">
                    <label>
                        关键字: <input type="text" id="txtSearch" aria-controls="sample-table-2" placeholder="帐号/手机" />
                        <a href="javascript:void(0)" id="btnSearch" class="btn btn-xs btn-pink" style="margin-top:-4px;">搜索</a>
                    </label>
                </div>
            </div>
            <!-- PAGE CONTENT BEGINS HERE -->
            <div class="col-xs-12">
                <table id="grid-table"></table>
                <div id="grid-pager"></div>
            </div><!--/row-->
            <!-- PAGE CONTENT ENDS HERE -->
        </div><!--/row-->
    </div><!--/#page-content-->
</div><!-- /.main-content -->

<script src="~/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="~/assets/js/jqGrid/i18n/grid.locale-en.js"></script>

<script type="text/javascript">
    $(function () {
        $("#btnSearch").click(function () {
            var searchString = $("#txtSearch").val();
            var grid = $('#grid-table');
            grid[0].p.search = true;
            $.extend(grid[0].p.postData, { kw: searchString });
            grid.trigger("reloadGrid", [{ page: 1 }]);
        });
        GetData();
    });
    function GetData() {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";
        jQuery(grid_selector).jqGrid({
            url: "/Home/LoadUsers",
            mtype: "post",
            datatype: "json",
            height: '100%',
            width: '100%',
            colNames: ['UserId', '用户帐号', '是否可用', '操作'],
            colModel: [
                { name: 'UserId', key: true, index: 'UserId', width: 30, editable: true, hidden: true },
                { name: 'Account', index: 'Account', width: 30, editable: false },
                {
                    name: 'Enabled', index: 'Enabled', width: 30, editable: true, edittype: "checkbox",
                    editoptions: { value: "true:false" }, unformat: aceSwitch
                },
                {
                    name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                    formatter: 'actions',
                    formatoptions: {
                        delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
                    }
                }
            ],
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pager_selector,
            altRows: true,
            //toppager: true,
            multiselect: true,
            multiboxonly: true,
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },
            editurl: '@Url.Action("Login","Account")',//编辑删除
            caption: "当前用户列表",
            autowidth: true
        });
        //行内编辑时，checkbox样式
        function aceSwitch(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=checkbox]')
                    .wrap('<label class="inline" />')
                    .addClass('ace ace-switch ace-switch-5')
                    .after('<span class="lbl"></span>');
            }, 0);
        }
        //分页栏中的功能按钮(只留了刷新功能）
        jQuery(grid_selector).jqGrid('navGrid', pager_selector,
        {   //navbar options
            edit: false,
            add: false,
            del: false,
            search: false,
            refresh: true,
            refreshicon: 'icon-refresh green',
            view: false,
        });
        //删除前的确认框
        function beforeDeleteCallback(e) {
            var form = $(e[0]);
            if (form.data('styled')) return false;
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
            buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
            buttons.eq(1).prepend('<i class="icon-remove"></i>');
            form.data('styled', true);
        }
        //更新分页栏的按钮
        function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                'ui-icon-seek-next': 'icon-angle-right bigger-140',
                'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            });
        }
        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({ container: 'body' });
            $(table).find('.ui-pg-div').tooltip({ container: 'body' });
        }
    }
</script>