Question

当我点击按钮并加载模态表单并从下拉列表中选择年份后，我想在jqgrid中加载每年的数据。 a diagram of the steps 但我不知道该怎么做。

这是我的源代码：

<!-- Page content -->
<div class="w3-content" style="max-width: 100%">

    <div class="container" style="width:40%;margin-top:2%">

        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Filter</a>

        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content"> 
                    <div class="modal-header">
                        <a href="#" dir="ltr" class="close" data-dismiss="modal">&times;</a> 
                    </div> 
                    <div class="modal-body"> 
                        <form id="myForm" dir="rtl"> 
                            <div class="form-group">
                                <label>Year</label> 
                                @Html.DropDownListFor(model => model.YEAR_ABBR, ViewBag.YearList as MultiSelectList, "--select--", new { @class = "form-control", @id = "ddlYear", multiple = "multiple" })
                            </div> 

                        </form> 
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                        <input type="reset" value="GetRep" class="btn btn-success" id="btnSubmit" />

                    </div>   </div> 
            </div>    </div>    </div>

    <div dir="rtl" align="center" style="overflow:auto" class="tablecontainer">
        <div id="rsperror"></div> 
        <table id="list" cellpadding="0" cellspacing="0"></table>
        <div id="pager" style="text-align:center;"></div>
    </div>

现在我的脚本是这样的：

 <script type="text/javascript">

        $(document).ready(function () { 
                bindData();
                $("#btnSubmit").click(function () {  
                        $('#list').trigger('reloadGrid');   }) 
        }); 
        var bindData = function () {

            $('#list').jqGrid({ 
                url: '@Url.Action("Get_RepContracts","Home")', 
                postData:  {  YEAR_ABBR: function () { return $('#YEAR_ABBR').val(); }   },
                datatype: 'json',
                jsonReader: {
                    root: "Rows",
                    page: "Page", 
                }, 
                mtype: 'GET',
                //columns names
                colNames: ['Vahed_Descript'   ], 
                colModel: [
    { name: 'Vahed_Descript', index: 'Vahed_Descript', align: 'right', width: 200, sorttype: "number",    }  
        ],
        pager: $('#pager'),
       rowNum: 800,
        rowList: [ 800 ,1000],
        sortname: 'Vahed_Descript',   
        hidegrid: false,
        direction: "rtl",
        gridview: true,
        rownumbers: true,
        footerrow: true,
        userDataOnFooter: true,
        loadComplete: function () {
            calculateTotal();
            $("tr.jqgrow:odd").css("background", "#E0E0E0");
        },
        loadError: function (xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }   , loadonce: true 
        })   ;

这里的按钮代码（我的模态窗体效果很好。当我点击过滤器按钮时，会出现我的模态窗体中的过滤器选项，然后我从模拟中选择年份下拉列表中的年份，然后单击报告按钮，之后，下面的代码触发，我可以看到所选年份的数据在行动“Get_RepContracts”但它没有绑定到我的jqgrid）：

提前致谢...

更新：现在我的代码如下：

$(document).ready(function () { 
                bindData();

       $("#btnSubmit").click(function () {
         var myPostData = $('#list').jqGrid("getGridParam", "postData");
                    $('#list').trigger('reloadGrid');
                    $("#myModal").modal("hide");
                })    });

        var bindData = function () {

            $('#list').jqGrid({  
                url: '@Url.Action("Get_RepContracts","Home")',  
                postData: {
                   YEAR_ABBR : function () { return $("#YEAR_ABBR").val();}, 
                 } , 
                datatype: 'json',
                jsonReader: { ........

Answer 1

在我看来，你使用select元素的正确id有一个小问题。您的HTML代码包含@id = "ddlYear"的{{1}}参数：

@Html.DropDownListFor

但你仍然使用

@Html.DropDownListFor(
    model => model.YEAR_ABBR,
    ViewBag.YearList as MultiSelectList,
    "--select--",
    new {
        @class = "form-control",
        @id = "ddlYear",
        multiple = "multiple"
    }
)

要解决此问题，您只需将代码修改为

即可

postData: {
    YEAR_ABBR: function () { return $("#YEAR_ABBR").val(); }
}

如何在按钮单击时加载jqgrid并将参数发送到MVC中jqGrid 4.6.0中的操作

1 个答案: