问题描述
我在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的搜索选项不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！