本文介绍了jqGrid的搜索选项不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I implement jQgrid free version in my MVC4 application.

控制器

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

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

Add , Edit and Delete functions are works correctly in the toolbar. I implement the search

在网格页脚选项。当我点击搜索按钮,搜索选项出现

option in the grid footer. When i click the search button, search option is appear

正确但网格未正确进行过滤。请大家帮帮忙。

correctly but the grid is not filtered correctly. Please help.

推荐答案

我假设错误,因为包括jQuery的多,因为一旦存在。首先,你包括jQuery的有关于&LT;脚本的src =〜/脚本/ jQuery的-1.9.1.min.js&GT;&LT; / SCRIPT&GT; ,那么你包括jqGrid的关于对&LT;脚本的src =〜/脚本/ jquery.jqGrid.src.js&GT;&LT; / SCRIPT&GT; 。它定义了 $。jgrid jQuery.jgrid 等。毕竟你包括jQuery的一旦有更多的时间为包有关于 @ Scripts.Render(〜/包/ jQuery的)。它会覆盖 jQuery.jgrid ,而不是 $。jgrid 。在本地搜索或过滤语法 jQuery.jgrid 将被用于和 jQuery.jgrid 未定义一将有例外 jQuery.jgrid.getAccessor ​​

I suppose that the error exist because of including jQuery more as once. First you includes jQuery with respect of <script src="~/Scripts/jquery-1.9.1.min.js"></script>, then you includes jqGrid with respect of <script src="~/Scripts/jquery.jqGrid.src.js"></script>. It defines $.jgrid, jQuery.jgrid and other. After all you includes jQuery once more time as bundle with respect of @Scripts.Render("~/bundles/jquery"). It overwrites jQuery.jgrid, but not $.jgrid. During local searching or filtering the syntax jQuery.jgrid will be used and to jQuery.jgrid will be undefined and one will have exception in jQuery.jgrid.getAccessor.

要解决这个问题,你应该包括jQuery的一次。刚刚发表评论 @ Scripts.Render(〜/包/ jQuery的)如果你使用的话的 grid.locale- en.js jquery.jqGrid.src.js 。伊根应包括&LT;脚本的src =〜/脚本/国际化/ grid.locale-en.js&GT;&LT; / SCRIPT&GT; &LT;脚本的src =〜/脚本/ jquery.jqGrid.src.js&GT;&LT; / SCRIPT&GT; 的jQuery

To fix the problem you should include jQuery once. Just comment @Scripts.Render("~/bundles/jquery") if you use if after grid.locale-en.js and jquery.jqGrid.src.js. Ine should include <script src="~/Scripts/i18n/grid.locale-en.js"></script> and <script src="~/Scripts/jquery.jqGrid.src.js"></script> after jQuery.

这篇关于jqGrid的搜索选项不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-03 10:32