导言

在日常开发中经常会用到列表，相信用过easyui,Ext等很多，的确很强大，但想修改确实也不容易，我也用了几年的easyui，有时间时会想一下，自已随然没有前端的精湛技术，但可以在有这些技术的开源框架上封装一下组成自已的控件，方便又好上手，扩展容易。

我们经常用Layer弹窗控件，今天也用他家的分页控件layPage和都熟悉的腾讯的模板引擎artTemplate还有老牌Jquery封装一个小的datagrid功能简单够用就好，方便扩展用到功能再加

代码

/*  *基于Jquery 和 artTemplate 封装的列表控件 *可实现分页和无分页列表，功能单一欢迎大家补充 * Date: 2015-04-28            datagrid = $("#eTable").datagrid({                //pageIndex: 1,                //pageSize: 10,                //queryParams: $("#search").serialize(),                url: "/Layui/GetJson",                pagination: "pagination",                scriptHtml: "eTableHtml",                table: "eTableRow",                isPagination: true,                //onLoadSuccess: function (data) {                //    //alert(data);                //}            }); */(function ($) {    function init(options, obj) {        function getParam() {            var param = "pageIndex=" + opts.pageIndex + "&pageSize=" + opts.pageSize;            param = param + "&" + opts.queryParams;            return param;        }        function queryForm() {            var cells = document.getElementById(opts.table).rows.item(0).cells.length;            if (opts.isPagination) {                document.getElementById(opts.pagination).innerHTML = "";            }            var trStr = "{0}";            obj.html(trStr.replace("{0}", "数据正在加载中..."));            var url = opts.url + "?ts=" + Math.random();            $.post(url, getParam(), function (result) {                if (result.list.length == 0 || typeof (result.list.length) == "undefined") {                    obj.html(trStr.replace("{0}", "没有查询到您想要的数据"));                    return;                }                data.list = result.list;                var html = template(opts.scriptHtml, data);                obj.html(html);                if (result.totalCount > 0 && opts.isPagination) {                    totalCount = result.totalCount;                    pageInitialize(opts.pagination, opts.pageIndex, opts.pageSize, result.totalCount);                }                callbackFun();            });        }        function pageInitialize(pageID, pageIndex, pageSize, totalCount) {            laypage({                cont: pageID, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：
     
                pages: Math.ceil(totalCount / pageSize), //通过后台拿到的总页数                curr: pageIndex, //初始化当前页                jump: function (e, first) { //触发分页后的回调                    opts.pageIndex = e.curr;                    if (!first) { //一定要加此判断，否则初始时会无限刷新                        queryForm();                    }                }            });        }        function callbackFun() {            if (opts.onLoadSuccess != null) {                opts.onLoadSuccess();            }        }        var defaults = {            pageSize: 10,            pageIndex: 1,            queryParams: "",            pagination: "",            scriptHtml: "",            table: "",            url: "",            isPagination: false,            onLoadSuccess: null        }        var opts = $.extend(defaults, options);        var data = new Array();        var totalCount;        queryForm();        var method = {};        return method.getPageIndex = function () {            return this.pageIndex;        },//当前页刷新        method.onReload = function () {            queryForm();        },//重新加载        method.onLoad = function () {            opts.pageIndex = 0;            queryForm();        },        method.getData = function () {            return data;        },        method.getTotalCount = function () {            return totalCount;        },        method    }    $.fn.datagrid = function (options) {        return init(options, $(this));    }})(jQuery)

用法


     
                                                         ID                         Name

注：支持单页多列表多分页