今天看到一个很好的ASP.NET MVC Razor使用jqGrid的示例，本文正是学习此示例中的一个功能。有关jqGridImport的文档，请参考这里
jqGrid还有一个很有用的功能，可以导入和导出jqGrid的配置，这就意味着：使用c#的匿名类加上JsonResult(ASP.NET MVC)用C#的代码生成jqGrid，而不再使用js代码，很多人都怕写js，宁愿写两行C#都不愿意写一行js，这个功能对于不愿意写js的兄弟来说真是一个福音啊，天也不早了，直接上内容吧。
Razor下View是这样写的
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>jqGridImport</title>
<link href="@Url.Content("~/Content/themes/base/site.css")" rel="Stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.css")" rel="Stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.jqgrid.css")" rel="Stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/i18n/grid.locale-cn.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqgrid.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#grid').jqGridImport({
imptype: 'json',
impurl: '@Url.Action("Import", "Home")',
mtype: 'GET',
jsonGrid: {
config: 'configs'
}
});
});
</script>
</head>
<body style="padding: 10px;">
<div>
<table id="grid">
</table>
<div id="pager">
</div>
</div>
</body>
</html>
这里我对代码中用到的几个选项做个说明，没有用到的请参考这里的文档
imptype:jqGrid导入"模板"(请允许我给它起了这么一个不伦不类的名称，下同)是json格式的，当然，还可以是xml格式的，但是我想一般也没有人用xml，就没有深究。
impurl:jqGrid导入"模板"是从该url获取的。
mtype:这个简单，是获取导入"模板"的http方法。
jsonGrid：从哪里获取json格式的导入"模板"配置选项，这里稍作解释，从impurl中获取的是一个对象,jsonGrid中的config指的是获取到的这个对象的哪个属性是配置选项，过会看了后台代码就比较好理解了。
OK，现在来看后台代码是啥样的吧：
public ActionResult Import()
{
var configs = new
{
url = "/User/Index",
datatype = "json",
mtype = "GET",
colNames = new[] { "主键", "姓名", "邮箱" },
colModel = new[] {
new { name = "ID", index = "ID", width = 200, hidden=true, align = "left" },
new { name = "Name", index = "Name", width = 200,hidden=false, align = "left" },
new { name = "Mail", index = "Mail", width = 200,hidden=false, align = "left" }
},
sortname = "Name",
sortorder = "asc",
rowNum = 10,
rowList = new[] { 10, 15, 20 },
pager = "#pager",
viewrecords = true,
height = "auto",
width = "auto"
};
return Json(new { configs = configs }, JsonRequestBehavior.AllowGet);
}
以上这个Action就是提供导入"模板"配置选项的服务，假设你的View名称为ImportDemo.cshtml的话，那么整个请求用到的代码还应该包括一个MVC打开视图的Action:
public ActionResult ImportDemo()
{
return View();
}
最终，只要你开启ImportDemo视图，就会自动到Import服务中获取"模板"
附官方文档，很是对不起，昨晚我说官方没有文档，今天早上来就发现了
Importing
This method reads the grid configuration according to the rules in options and constructs the grid. When constructing the grid for first time it is possible to pass data to it again with the configuration. This is done with jqGirdImport
jQuery("#grid_id").jqGridImport(options);
Where
-
grid_id is the id of the table element where the grid should be constructed
-
options is array of pair name:value to set different configuration listed bellow
| Option | Type | Description | Default |
|---|---|---|---|
| imptype | string | Determines the type of import Can be one of the following values xml, json, xmlstring, jsonstring | xml |
| impstring | string | in case of xmlstring or jsonstring this should be set | |
| impurl | string | valid url to the configuration when xml or json. The data is obtained via ajax request | |
| mtype | string | Determines the type of request. Can be GET or POST | GET |
| impData | object | additional data that can be passed to the url in pair name:value | empty object {} |
| xmlGrid | object | describes from where to read the xml configuration and from where the data if any. The option config describes the configuration tag. The option data describes the data tag | config : “roots>grid”, data: “roots>rows” |
| jsonGrid | object | describes from where to read the json configuration and from where the data if any. The option config describes the configuration tag. The option data describes the data tag | config : “grid”, data: “data” |
| ajaxOptions | object | Additional options which can be passed to the ajax request | empty object {} |
Events
There is only one event which can be called in jqGridImport.
| Event | Description |
|---|---|
| importComplete | This event is called after the successfully import and when the grid is constructed. To this event we pas the request from server. Use this event to set additional parameters in the grid or to construct the navigator |