jquery - 当我更改下拉列表时如何在 asp.net mvc 中重新加载 jqgrid

Question

这段代码有什么问题？当我更改下拉列表时，网格仅采用 ddl 的旧值，而不采用新选择的值，为什么？

<%--<asp:Content ID="Content2script" ContentPlaceHolderID="HeadScript" runat="server">
 <script type="text/javascript">

     $(function() {
     $("#StateId").change(function() {
             $('#TheForm').submit();
         });
     });
     $(function() {
         $("#CityId").change(function() {
             $('#TheForm').submit();
         });
     });
     $(function() {
     $("#HospitalName").change(function() {
             $('#TheForm').submit();
         });
     });

  </script >
</asp:Content>--%>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
     <link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css" 
      title="coffee" media="screen" />
    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>

  <script type="text/javascript">


      var gridimgpath = '/scripts/themes/coffee/images';
      var gridDataUrl = '/Claim/DynamicGridData/';




      jQuery(document).ready(function() {
          // $("#btnSearch").click(function() {
          var StateId = document.getElementById('StateId').value;
          var CityId = document.getElementById('CityId').value;
          var HName = document.getElementById('HospitalName').value;
//          alert(CityId);
//          alert(StateId);
//          alert(HName);
          if (StateId > 0 && CityId == '' && HName == '') {
              CityId = 0;
              HName = 'Default'.toString();
//              alert("elseif0" + HName.toString());
          }
          else if (CityId > 0 && StateId == '') {
//              alert("elseif1");
              alert("Please Select State..")
          }
          else if (CityId > 0 && StateId > 0 && HName == '') {
//              alert("elseif2");
              alert(CityId);
              alert(StateId);
              HName = "Default";
          }
          else {
//              alert("else");
              StateId = 0;
              CityId = 0;
              HName = "Default";

          }

          jQuery("#list").jqGrid({

              url: gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,

              datatype: 'json',
              mtype: 'GET',
              colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
              colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
                               { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
                               { name: 'Address1', Address: 'Address1', width: 300 },
                               { name: 'CityName', index: 'CityName', width: 100 },
                               { name: 'DistName', index: 'DistName', width: 100 },
                               { name: 'FaxNo', index: 'FaxNo', width: 100 },
                               { name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
                            ],
              pager: jQuery('#pager'),
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              // sortname: 'Id,',
              sortname: '1',
              sortorder: "asc",
              viewrecords: true,
              //multiselect: true,
              //multikey: "ctrlKey",
              // imgpath: '/scripts/themes/coffee/images',
              imgpath: gridimgpath,
              caption: 'Hospital Search',
              width: 700,
              height: 250


          });

          $(function() {
              // $("#btnSearch").click(function() {
          $('#CityId').change(function() {
          alert("kjasd");
                  // Set the vars whenever the date range changes and then filter the results
                  StateId = document.getElementById('StateId').value;
                  CityId = document.getElementById('CityId').value;
                  HName = 'default';

                 setGridUrl();
              });

              // Set the date range textbox values
              $('#StateId').val(StateId.toString());
              $('#CityId').val(CityId.toString());

              // Set the grid json url to get the data to display
               setGridUrl();
          });

          function setGridUrl() {

              alert(StateId);
              alert(CityId);
              alert("hi");
              var newGridDataUrl = gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName;


              jQuery('#list').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
          }
          //  });
      });

    </script> 

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" }))
--%>

   <table cellspacing="0" cellpadding="2" width="100%" border="0" >
        <tr>
            <td class ="Heading1">
                Hospital Search</td>
            <td class ="Heading1" align="right" width="50%" 
                    background="../images/homebg.gif">
               &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" >
               <% Html.RenderPartial("InsuredDetails"); %>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width="100%">
                    <tr>
                        <td class="subline" valign="middle">
                         State :  <% =Html.DropDownList("StateId", (SelectList)ViewData["States"], "--Select--", new { @class = "ddownmenu"  })%>  
                        &nbsp; City :  <% =Html.DropDownList("CityId", (SelectList)ViewData["Cities"], "--Select--", new { @class = "ddownmenu" })%>
                        &nbsp; Hospital Name :  <% =Html.TextBox("HospitalName")%>  &nbsp; 
                        &nbsp; <input id="btnSearch" type="submit" value="Search" />

                        </td>
                    </tr>
                </table>
            </td>
        </tr>   

        <tr>
            <td align="center" colspan="2">

        &nbsp;</td>
        </tr>
    </table>
        <div id="jqGridContainer">  
           <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
        </div>
</asp:Content>

Answer 1

你可以定义

jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});

并在change或click事件中调用trigger("reloadGrid")。

我建议您使用http://www.trirand.com/blog/?page_id=6中的当前版本的jqGrid (不要忘记在下载之前选择您需要的所有模块)。有关文档，请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs 。您可以将 jQuery 1.4.2 与 jQuery UI 1.8.1 与任何 jQuery 主题结合使用。 jqGrid 主题“coffee”已弃用，您不再需要 gridimgpath。表“list”和div“pager”也可以像这样定义

<table id="list"></table> 
<div id="pager"></div> 

参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid .