@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="~/Content/js/datepicker/WdatePicker.js"></script>
<script>
    $(document).ready(function () {
        $("input.cell").keyup(function (e) {
            switch (e.keyCode) {
                // up arrow
                case 40:
                    $(this).parent()
                        .parent()
                        .next()
                        .children("td")
                        .children("input.cell[name="
                            + $(this).attr("name") + "]")
                        .focus();
                    break;

                    // down arrow
                case 38:
                    $(this).parent()
                        .parent()
                        .prev()
                        .children("td")
                        .children("input.cell[name="
                            + $(this).attr("name") + "]")
                        .focus();
                    break;
            }
        });
    });</script>
<script>
    $(function () {
        gridList();
    })

    function gridList() {
        var $gridList = $("#gridList");
        var queryJson = {
            UserCode: $("#txt_UserCode").val(),
            UserName: $("#txt_UserName").val()

        }
        $gridList.dataGrid({
            url: "/WMS/UerList/GetUserList" + "?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() - 180,
            width: $(window).width() - 400,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: '角色', name: '角色', align: 'left', width: 100, },
                { label: '用户编码', name: '用户编码', align: 'left',width: 100,  },
                { label: '用户名称', name: '用户名称', align: 'left', width: 180, },
            ],
            width: "100%",
            autowidth: true,
            gridComplete: function () {
            },
            //shrinkToFit: true,//宽度自适应
            pager: "#gridPager",
            sortname: '用户编码',
            sortorder: "desc",
            viewrecords: true,
            //multiselect: true,
            subGrid: true,  // (1)开启子表格支持
            subGridRowExpanded: function (subgrid_id, rowid) {  // (2)子表格容器的id和需要展开子表格的行id，将传入此事件函数
                $("#gridList").jqGrid("setSelection", rowid, false);
                bindSubGrid(subgrid_id, rowid)
            },
        });
        $("#btn_search").click(function () {
            var queryJson = {
               UserCode: $("#txt_UserCode").val(),
                UserName: $("#txt_UserName").val()
            }
            $gridList.jqGrid('setGridParam', {
                postData: { queryJson: JSON.stringify(queryJson) },
            }).trigger('reloadGrid');
        });

    }

    function bindSubGrid(subgrid_id, rowid) {
        $("#gridList").jqGrid("setSelection", rowid, false);
        var subgrid_table_id;
        subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id

        var subgrid_pager_id;
        subgrid_pager_id = subgrid_id + "_pgr"  // (4)根据subgrid_id定义对应的子表格的pager的id

        // (5)动态添加子报表的table和pager
        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + subgrid_pager_id + "' class='scroll'></div>");
        var queryJson = $("#gridList").jqGrid('getRowData', rowid).用户编码;
        // (6)创建jqGrid对象
        $("#" + subgrid_table_id).dataGrid({
            cellEdit: true,
            url: "/WMS/UerList/GetUserListDetails?queryJson=" + queryJson,  // (7)子表格数据对应的url，注意传入的contact.id参数
            colModel: [
                { label: "主键", name: "ID", hidden: true, key: true },
                { label: "菜单名称", name: "菜单名称", width: 180, align: 'left' },
                { label: '操作人', name: 'F_CreatorTime', width: 180, align: 'left' },
                { label: '操作时间', name: 'F_RealName', width: 180, align: 'left' },
            ],
            sortname: '菜单名称',
            shrinkToFit: true,//宽度自适应
            prmNames: { search: "search" },
            pager: subgrid_pager_id,
            viewrecords: true,
            height: "100%",
            rowNum: 20
        });



    }
    function btn_ExportAll() {
        var postData = "&keyValue=1";
        if ($("#txt_UserCode").val() != null && $("#txt_UserCode").val() != "") {
            postData += "&UserCode=" + $("#txt_UserCode").val()
        }
        if ($("#txt_UserName").val() != null && $("#txt_UserName").val() != "") {
            postData += "&UserName=" + $("#txt_UserName").val()
        }
        $.download("/SRM/UerList/ExportAll" + "?" + Math.random(), postData, 'post');
    }
</script>

<div class="topPanel" style="height:50px">
    <div class="toolbar">
        <div class="btn-group">
            @*<a id="NF-Export" authorize="yes" class="btn btn-primary" onclick="btn_Export()"><i class="fa fa-download"></i>当前页导出</a>*@
            <a id="NF-ExportAll" authorize="yes" class="btn btn-primary" onclick="btn_ExportAll()"><i class="fa fa-download"></i>全部导出</a>
            <a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <script>$('.toolbar').authorizeButton()</script>
    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <label>用户编号:</label>
                </td>
                <td>
                    <div class="input-group">
                        <input id="txt_UserCode" type="text" class="form-control" placeholder="用户编号" style="width: 100px;">
                    </div>
                </td>
                <td>
                    <label>&nbsp;&nbsp;&nbsp;用户名称:</label>
                </td>
                <td>
                    <div class="input-group">
                        <input id="txt_UserName" type="text" class="form-control" placeholder="用户名称" style="width: 100px;">
                        <span class="input-group-btn">
                            <button id="btn_search" type="button" class="btn  btn-primary"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                   
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="gridPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>