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

问题描述

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

what is wrong in this code?when i change drop down list,the grid takes old value of ddl only, not taken newely selected values why?

<%--<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>

推荐答案

你可以定义

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

and call trigger("reloadGrid") at change or click events.

我建议您使用 http://www.trirand.com/的当前版本的 jqGridblog/?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.表list"和divpager"也可以这样定义

I recommend you use current version of jqGrid from http://www.trirand.com/blog/?page_id=6 (don't forget select all modules which you need before download). For documentation see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs. You can use jQuery 1.4.2 with jQuery UI 1.8.1 with any of jQuery themes. jqGrid theme "coffee" is deprecated and gridimgpath you needs no more. Table "list" and div "pager" can be defined also just like

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

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

这篇关于当我更改下拉列表时如何在 asp.net mvc 中重新加载 jqgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！