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