c# - jQgrid 搜索选项未按预期工作

Question

我在我的 MVC4 应用程序中实现了 jQgrid 免费版本。

Controller

public class HomeController : Controller
{
    public ActionResult GridAction()
    {
        return View();
    }

    public JsonResult FillGrid(string sidx, string sord, int page, int rows)
    {
        var models = new List<Master> {
                new Master { Id = 1, Name = "AAA",Description = "test description 1", Created = DateTime.Now },
                new Master { Id = 2, Name = "BBB",Description = "test description 2", Created = DateTime.Now },
                new Master { Id = 3, Name = "CCC",Description = "test description 3", Created = DateTime.Now },
                new Master { Id = 4, Name = "DDD",Description = "test description 4", Created = DateTime.Now },
                new Master { Id = 5, Name = "EEE",Description = "test description 5", Created = DateTime.Now },
                new Master { Id = 6, Name = "FFF",Description = "test description 6", Created = DateTime.Now },
                new Master { Id = 7, Name = "GGG",Description = "test description 7", Created = DateTime.Now },
                new Master { Id = 8, Name = "HHH",Description = "test description 8", Created = DateTime.Now },
                new Master { Id = 9, Name = "III",Description = "test description 9", Created = DateTime.Now },
                new Master { Id = 10, Name = "JJJ",Description = "test description 10", Created = DateTime.Now },
                new Master { Id = 11, Name = "KKK",Description = "test description 11", Created = DateTime.Now },
                new Master { Id = 12, Name = "LLL",Description = "test description 12", Created = DateTime.Now },
                new Master { Id = 13, Name = "MMM",Description = "test description 13", Created = DateTime.Now },
                new Master { Id = 14, Name = "NNN",Description = "test description 14", Created = DateTime.Now },
                new Master { Id = 15, Name = "OOO",Description = "test description 15", Created = DateTime.Now },
                new Master { Id = 16, Name = "PPP",Description = "test description 16", Created = DateTime.Now },
                new Master { Id = 17, Name = "QQQ",Description = "test description 17", Created = DateTime.Now },
                new Master { Id = 18, Name = "RRR",Description = "test description 18", Created = DateTime.Now },
                new Master { Id = 19, Name = "SSS",Description = "test description 19", Created = DateTime.Now },
                new Master { Id = 20, Name = "TTT",Description = "test description 20", Created = DateTime.Now },
                new Master { Id = 21, Name = "UUU",Description = "test description 21", Created = DateTime.Now },
                new Master { Id = 22, Name = "VVV",Description = "test description 22", Created = DateTime.Now },
                new Master { Id = 23, Name = "WWW",Description = "test description 23", Created = DateTime.Now },
                new Master { Id = 24, Name = "XXX",Description = "test description 24", Created = DateTime.Now },
                new Master { Id = 25, Name = "YYY",Description = "test description 25", Created = DateTime.Now },
                new Master { Id = 26, Name = "ZZZ",Description = "test description 26", Created = DateTime.Now },
            };

        return Json((
            from master in models
            orderby master.Id descending
            select new[] {
                       master.Id.ToString(CultureInfo.InvariantCulture),
                       master.Name,
                       master.Description,
                       master.Created == null ? "" : ((DateTime)master.Created).ToString("o")
                   }
        ).ToArray(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Add(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Update(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Delete(int Id)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Search()
    {
        return Json(1);
    }
}

.cshtml

@{
ViewBag.Title = "GridAction";
}

<h2>GridAction</h2>
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<table id="search"></table>
<div id="filter"></div>
<script type="text/javascript">

jQuery("#jQGridDemo").jqGrid({
    url: '@Url.Action("FillGrid", "Home")',
    datatype: "json",
    mtype: "POST",
    colNames: ["Id", "Name", "Description", "Created"],
    colModel: [
        { name: "Id", width: 100, key: true, formatter: "integer", sorttype: "integer", hidden: true },
        { name: "Name", width: 200, sortable: true, editable: true, editrules: { required: true } },
        { name: "Description", width: 400, sortable: false, editable: true, editrules: { required: true } },
        { name: "Created", width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "n/j/Y g:i:s A" }, align: "center", sorttype: "date" },
    ],
    loadtext: "Loading...",
    rowNum: 10,
    gridview: true,
    autoencode: true,
    loadonce: true,
    height: "auto",
    rownumbers: true,
    prmNames: { id: "Id" },
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    caption: "CRUD on Local Data",
    editurl: '@Url.Action("Update", "Home")',
});

jQuery("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
    {
        searchtext: "Search",
        addtext: "Add",
        edittext: "Edit",
        deltext: "Delete"
    },
    {//EDIT
        url: '@Url.Action("Update", "Home")',
        width: "auto",
        jqModal: true,
        closeOnEscape: true,
        closeAfterEdit: true,
    },
    {//ADD
        width: "auto",
        // height: "auto"
        url: '@Url.Action("Add", "Home")',
        closeOnEscape: true,
        closeAfterAdd: true
    },
    {//DELETE
        url: '@Url.Action("Delete", "Home")',
        closeOnEscape: true
    },
    {//SEARCH
        closeOnEscape: true,
        searchOnEnter: true,
    });

jQuery("#jQGridDemo").jqGrid('searchGrid', {multipleSearch :true, caption: "Test caption" });

</script>

添加、编辑和删除功能在工具栏中正常工作。我在网格页脚中实现了搜索选项。当我单击搜索按钮时，搜索选项正确显示，但网格未正确过滤。

Answer 1

我想错误的存在是因为包含了 jQuery more as once。首先，您包含关于 <script src="~/Scripts/jquery-1.9.1.min.js"></script> 的 jQuery , 然后你包括关于 <script src="~/Scripts/jquery.jqGrid.src.js"></script> 的 jqGrid .它定义了 $.jgrid , jQuery.jgrid和别的。毕竟，关于 @Scripts.Render("~/bundles/jquery")，您将 jQuery 再次作为 bundle 包含 .它会覆盖 jQuery.jgrid , 但不是 $.jgrid .在本地搜索或过滤语法 jQuery.jgrid将用于jQuery.jgrid将是 undefined在 jQuery.jgrid.getAccessor 中会有异常(exception).

要解决此问题，您应该包含一次 jQuery。随便评论@Scripts.Render("~/bundles/jquery")如果你使用 if after grid.locale-en.js和 jquery.jqGrid.src.js . Ine 应该包括 <script src="~/Scripts/i18n/grid.locale-en.js"></script>和 <script src="~/Scripts/jquery.jqGrid.src.js"></script> 在 jQuery 之后。