今天捣鼓了半天的jqGrid,搜索了很多结果看看这家伙怎么用,每个参数的含义,发现也不是很完美。比如本地排序+json绑定,貌似不支持。
虽然以前自己也写过类似的插件,不过自己都懒的维护,还是用jqGrid这样的,也方便项目的维护工作。
做了一个小小的封装,目前只支持json绑定。 用法如下:
前端代码:
<table id="lst" title="博客多次发表文章审核" multiselect=1>
<thead>
<tr>
<th name="UserName" width="100" sort=1>
用户名
</th>
<th name="Articles">
发表的文章
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<button function="checkedall">审核通过</button>
<button function="deleteall">批量封杀</button>
</td>
</tr>
</tfoot>
</table>
<div id="pager">
</div>
<script src="@Url.Content("~/Scripts/common.js")" type="text/javascript"></script>
<script type="text/javascript">
$("#lst").bindTable('MultiPostData?' + new Date().getTime(), function (data) {
$.each($("#lst").getDataIDs(), function (i) {
var html = "";
for (var j = 0; j < data.list[i].Articles.length; j++) {
var article = data.list[i].Articles[j];
html += "<li><a href=''>" + article.Title + "</a></li>";
}
$("#lst").jqGrid("setRowData", this, { "Articles": html });
});
});
</script>
后端代码:
public JsonResult MultiPostData()
{
var list = new List<dynamic>();
list.Add(new { UserName = "Test1", Articles = new[] { new { ArticleId = 1, Title = "测试文章1" }, new { ArticleId = 1, Title = "测试文章12" }, new { ArticleId = 1, Title = "测试文章23" } } });
list.Add(new { UserName = "Test2", Articles = new[] { new { ArticleId = 2, Title = "测试文章2" } } });
list.Add(new { UserName = "Test3", Articles = new[] { new { ArticleId = 3, Title = "测试文章3" } } });
list.Add(new { UserName = "Test4", Articles = new[] { new { ArticleId = 4, Title = "测试文章4" } } });
list.Add(new { UserName = "Test5", Articles = new[] { new { ArticleId = 5, Title = "测试文章5" } } });
return Json(new { page = Request.Query("page").ToInt(1), list, records = 50, total = 50 / list.Count }, JsonRequestBehavior.AllowGet);
}
封装的jqGrid,因为不封装,每次都要写一遍很麻烦。。。 改起来也不容易。
(function ($) {
$.fn.bindTable = function (url, callback, funcs) {
var me = this;
var pagesize = me.attr("pagesize");
var datatype = me.attr("datatype") || "json";
var multiselect = me.attr("multiselect") == "1";
var title = me.attr("title") || document.title;
var pagerId = me.attr("pager") || "pager";
var dataroot = me.attr("dataroot") || "list";
funcs = funcs || {};
var colNames = [];
var colModels = [];
var idx = multiselect ? 1 : 0;
$("thead th", me).each(function () {
var th = $(this);
colModels.push({
name: th.attr("name"),
width: parseInt(th.attr("width")) || 0,
sortable: th.attr("sort") == "1",
hidden: th.text() == "",
title: th.attr("showtitle") != "0",
type: th.attr("type") || "string",
index: idx++
});
colNames.push(th.text());
});
if (colNames.length == 0) {
alert("列为空");
return me;
}
if (typeof (arguments[1]) == "object") {
funcs = arguments[1];
callback = undefined;
}
var buttons = [];
$("tfoot button", me).each(function () {
var fname = $(this).attr("name");
var func = funcs[fname];
if (func == undefined) func = function () { eval(fname + "()"); };
buttons.push({
caption: $(this).text(),
onClickButton: func
});
});
me.jqGrid({
height: 'auto',
url: url,
datatype: datatype,
colNames: colNames,
colModel: colModels,
rowNum: pagesize,
pager: pagerId,
multiselect: multiselect,
autowidth: true,
jsonReader: { root: dataroot, repeatitems: false },
caption: title,
loadComplete: function (data) {
if (!!callback) callback(data, me);
setOrder(me.attr("id"), colModels);
}
});
me.navGrid("#" + pagerId, { edit: false, add: false, del: false, search: false, refresh: true });
if (buttons.length > 0) {
$.each(buttons, function (i) {
me.navButtonAdd("#" + pagerId, buttons[i]);
});
}
};
})(jQuery);