Question

我已经阅读了一些关于我的问题的话题但是代码对我不起作用。老实说，我不擅长jQuery。

我有这个工作视图和控制器，但它有很多缺点，这就是我切换到使用jQuery网格的原因。

工作代码（不使用jQuery网格）：

@using Custom.Helpers
@model IEnumerable<Models.DeviceMVC>

@{
    ViewBag.Title = "List";
}

<div id="page-title">
<h2>Device list</h2>
    <div id="Optiontab">
        @Html.ActionLink("Create New", "Create")
    </div>
</div>
<table id="table-list">
    <tr>
        <th>
            Branch
        </th>
        <th>
            Name
        </th>
        <th>
            Login id
        </th>
        <th>
            Serial number
        </th>
        <th>
            Brand
        </th>
        <th>
            Model
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.BranchName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LoginID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SerialNum)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Brand)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Model)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.DeviceID, branch = item.BranchName }) |
            @Html.ActionLink("Details", "Details", new { id=item.DeviceID })
        </td>
    </tr>
}
</table>

要解决侧面区域的链接，我使用这个助手：
Helper

加载数据：

public ActionResult Index()
{
    IDeviceComponentMVC mvc = new DeviceComponentMVC();
    return View(mvc.RetrieveAllDevices());
}

现在在jQuery（查看部分）：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '@Url.Content("~/Device/LoadDevice")',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Branch', 'Name', 'Username', 'Serial', 'Brand', 'Model'],
            colModel: [
          { name: 'Branch', index: 'Branch', width: 136, align: 'Branch', sortable: false },
          { name: 'Name', index: 'Name', width: 136, align: 'Name' },
          { name: 'LoginID', index: 'LoginID', width: 136, align: 'LoginID' },
          { name: 'SerialNum', index: 'SerialNum', width: 100, align: 'SerialNum' },
          { name: 'Brand', index: 'Brand', width: 136, align: 'Brand' },
          { name: 'Model', index: 'Model', width: 136, align: 'Model' }
          ],
            pager: jQuery('#pager'),
            rowNum: 5,
            rowList: [10, 50, 100, 150, 250, 300, 350, 400, 500],
            sortname: 'Name',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'Device list'
        })
    });

</script>  
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center; padding:50px;"></div>

控制器部分：

public JsonResult LoadDevice(string sidx, string sord, int page, int rows)
{
    using (DBase db = new DBase())
    {
        var context = db;
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = context.devices.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var devices = context.devices.OrderBy("it." + sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);

        var sorted = (from item in devices
                      select new
                      {
                          i = item.DeviceID,
                          cell = new List<string> { item.branch.Name, item.Name, item.LoginID, item.SerialNum, item.Brand, item.Model }
                      }).ToArray();

        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = sorted
        };
        return Json(jsonData);
    }
}

现在我的目标是放置这样的导航按钮：

enter image description here

但是这些按钮应该有特定的链接。链接就像我的第一个视图（没有jQuery网格）那样。

目前我有：

enter image description here

希望有人可以提供帮助。非常感谢！

Answer 1

您在脚本中遗漏了一行。将其附加到您的脚本，使最后一行看起来像这样：

       caption: 'Device list'
    }).navGrid("#pager, { add: false, edit: false, del: false }

有关此功能的所有详细信息，请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator。

如何在mvc3中启用jQuery网格的导航按钮并将按钮分配给特定链接？

1 个答案: