jqGrid 与 ASP.NET MVC 问题显示记录

Question

我正在使用 Craig Stuntz 关于将 jqGrid 与 ASP.NET MVC 结合使用的文章：搜索和格式化，http://blogs.teamb.com/craigstuntz/2009/04/27/38243/ 使用 HttpFox 我可以看到成功返回的 json 数据，但它不会显示在网格中。显示正常，但没有数据和页码。任何人都可以看到这个问题

$(document).ready(function() {
$("#grid").jqGrid({
    url: '/Grid/DynamicGridData/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['EnquiryID', 'FirstName', 'Surname', 'PostCode'],
    colModel: [
      { name: 'EnquiryID', index: 'EnquiryID', width: 80, align: 'left' },
      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left' },
      { name: 'Surname', index: 'Surname', width: 150, align: 'left' },
      { name: 'PostCode', index: 'PostCode', width: 150, align: 'left'}],
    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'EnquiryID',
    sortorder: "desc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'My first grid'
});
$("#search").filterGrid("#grid", {
    gridModel: false,
    filterModel: [{
        label: 'Search',
        name: 'search',
        stype: 'text'
        }]

    });

}); 

调用上面的：

  <script language="javascript" type="text/javascript" src="<%= Url.Content          ("~/Scripts/Home.GridDemo.js") %>"></script>

<div id="search"></div>  
<table id="grid" cellpadding="0" cellspacing="0"></table>
<div id="pager"  style="text-align:center;"></div>

Answer 1

setGridDefaults 需要按照文章中的方式设置：

$(document).ready(function() {
GridDemo.Home.GridDemo.setupGrid($("#grid"), $("#pager"), $("#search"));
});

GridDemo.Home.GridDemo = {
setupGrid: function(grid, pager, search) {
    grid.jqGrid({
    colNames: ['Int', 'String', 'Date'],
        colModel: [
                    { name: 'IntProperty', index: 'IntProperty' },
                    { name: 'StringProperty', index: 'StringProperty' },
                    { name: 'DateProperty', index: 'DateProperty' }, 
                  ],
        pager: pager,
        sortname: 'IntProperty',
        rowNum: 10,
        rowList: [10, 20, 50],
        sortorder: "asc",
        url: "GridDemoData"
    }).navGrid(pager, { edit: false, add: false, del: false, search: false });        
    search.filterGrid("#" + grid.attr("id"), {
        gridModel: false,
        filterModel: [{
            label: 'Search',
            name: 'search',
            stype: 'text'
        }]
    });
}

};

Answer 2

我认为构建自己的网格表更容易。这是一个使用交替行颜色的示例，

<table class="results" width="100%" border="0" cellpadding="5">
<thead class="tablehead">
  <tr> 
    <td width="55px"><b>Country</b></td>
    <td width="55px"><b>State</b></td>
    <td width="55px"><b>City</b></td>
    <td width="55px"><b>Town</b></td>
    <td width="55px"><b>Postal</b></td>
  </tr>
</thead>
<tbody>
<% 
    int count = 0;
    foreach (var item in (IEnumerable<MY_RESULTS>)ViewData["My_Results"])
    {
        if (count % 2 == 0) { Response.Write("<tr class='even'>"); } else { Response.Write("<tr class='odd'>"); }   
    %>
            <td><%= Html.Encode(item.Country)%></td>
            <td><%= Html.Encode(item.State)%></td>
            <td><%= Html.Encode(item.City)%></td>
            <td><%= Html.Encode(item.Town)%></td>
            <td><%= Html.Encode(item.Postal)%></td>
        </tr>

    <% count += 1; } %>
</tbody>
</table>

您只需为奇数、偶数和表头背景颜色设置 css 类。