@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
<link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" />
<script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>
<style>
    * {
        box-sizing: border-box;
    }
</style>
<script>
    var ColsName = $.request("ColsName");
    var SourceID = $.request("SourceID");
    var ReturnCol = $.request("ReturnCol");
    var cols = new Array();
    var gridData = new Array();

    $(function () {
        GetDate();
        // gridList();
        $(window).resize(function () {

            $("#gridList").setGridWidth($(window).width() * 0.99);
            $("#gridList").setGridWidth(document.body.clientWidth * 0.99);
            $("#gridList").setGridHeight($(window).height() - 98);
            $("#gridList").setGridHeight(document.body.clientHeight - 98);
        });
    });

    function GetDate() {
        $.ajax({
            url: "/SystemManage/CommonReport/GetColsSelectGrid?SourceID=" + SourceID + "&ColsName=" + escape(ColsName) + "&InputKey=" + escape($("#InputKey").val()) + "&" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != false && data != null) {
                    cols = eval(data.cols);
                    gridData = eval(data.gridData);
                    gridList();
                }
                else {
                    alert("获取栏位信息异常：" + data);
                }
            },
            error: function (aa) {
                alert("异常：" + aa.responseText);

            }
        });
    }

    function gridList() {
        document.getElementById("gridPanel").innerHTML = ' <table id="gridList"></table> ';//重置grid
        var $gridList = $("#gridList");
        $gridList.dataGrid({

            height: $(window).height() - 98,
            datatype: "local",
            colModel: cols,
            rowNum: 500,
            data: gridData,
            viewrecords: true,
            rownumbers: true,
            multiselect: true,
            gridComplete: function () {

            }

        });
    }

    function KeydownData()
    {
        var evt = window.event || e;
          if (evt.keyCode == 13){
              GetDate();
        }
    }

    function submitForm() {

        var RowDatas = $("#gridList").jqGrid('getDataIDs');
        var ids = $("#gridList").jqGrid('getGridParam', 'selarrrow'); //获取 多行数据
        if (ids.length <= 0 || ids.length > 1) {
            $.modalAlert("请选择一行数据！");
            return;
        }

        var RowData = $("#gridList").jqGrid('getRowData', ids[0]);
        var vv = RowData[ReturnCol].toString();
        return vv;
    }



    function Close() {
        $.modalClose();
    }


    function btn_Search() {
        GetDate();
    }

</script>

<form id="form1">
    <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">

        <table class="form">

            <tr>

                <td class="formValue" style="width:200px">
                    <input type="text" name="InputKey" class="form-control" id="InputKey" style="width:180px" onkeydown="KeydownData()" />
                    <input style="display:none" mce_style="display:none">
                </td>
                <td>
                    <a id="Btn_Search" authorize="yes" class="btn btn-primary dropdown-text  " onclick="btn_Search()"><i class="fa fa-search"></i></a>
                </td>
            </tr>
        </table>
        <div class="gridPanel" id="gridPanel">
            <table id="gridList"></table>
            @*<div id="gridPager"></div>*@
        </div>

    </div>
</form>