如何在asp.net mvc中重新加载jqgrid当我更改dropdownlist

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")。

我建议你使用当前版本的jqGrid从http://www.trirand.com/blog/?page_id=6（不要忘记在下载之前选择你需要的所有模块）。有关文档，请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs。您可以将jQuery 1.4.2与jQuery UI 1.8.1与任何jQuery主题一起使用。 jqGrid主题“咖啡”已过时，并且您不需要gridimgpath。表“名单”和格“寻呼机”也可以定义就像

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

看到http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid。 。

Answer 2

另一种选择是 的jQuery（ “＃清单”）的jqGrid（）setGridParam（网址：{url： 'NEWURL'}）。触发器（ “reloadGrid”）