jqGrid的封装

　　今天捣鼓了半天的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);