jQgrid搜索选项不起作用

时间:2014-02-13 10:18:09

标签: c# jquery ajax asp.net-mvc-4 jqgrid

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

控制器

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" });

添加,编辑和删除功能在工具栏中正常工作。我实现了搜索

网格页脚中的

选项。当我单击搜索按钮时,会出现搜索选项

正确但网格未正确过滤。请帮忙。

1 个答案:

答案 0 :(得分:2)

我认为错误的存在是因为包含jQuery更多次。首先,你包含了关于<script src="~/Scripts/jquery-1.9.1.min.js"></script>的jQuery,然后你包含了<script src="~/Scripts/jquery.jqGrid.src.js"></script>的jqGrid。它定义了$.jgridjQuery.jgrid等。毕竟你在@Scripts.Render("~/bundles/jquery")方面包含jQuery 再次作为包。它会覆盖jQuery.jgrid,但不会覆盖$.jgrid。在本地搜索或过滤期间,将使用语法jQuery.jgridjQuery.jgrid将为undefined,其中一个将在jQuery.jgrid.getAccessor中出现异常。

要解决此问题,您应该包含一次jQuery。如果您在 @Scripts.Render("~/bundles/jquery")grid.locale-en.js之后使用if ,请发表评论jquery.jqGrid.src.js。我应该在 jQuery之后添加<script src="~/Scripts/i18n/grid.locale-en.js"></script><script src="~/Scripts/jquery.jqGrid.src.js"></script>