Jquery+artTemplate+layPage 封装datagrid

导言

在日常开发中经常会用到列表，相信用过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 = "<tr><td colspan=" + cells + " style='text-align:center'>{0}</td></tr>";
            obj.html(trStr.replace("{0}", "<img src='/Scripts/datagrid/images/loading.gif'/>数据正在加载中..."));
            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}", "<img width='18' src='/Scripts/datagrid/images/smiley_027.png'/>没有查询到您想要的数据"));
                    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对象。【如该容器为】：<div id="page1"></div>
                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)

用法

    <table class="table table-compress mb20" id="eTableRow" width="800">
        <thead>
            <tr>
                <th width="50%">ID</th>
                <th width="50%">Name</th>
            </tr>
        </thead>
        <tbody id="eTable"></tbody>
    </table>
    <div class="page" id="pagination">
    </div>

    <script id="eTableHtml" type="text/html">

        {{each list as value i}}
        <tr>
            <td width="50%" style="text-align:center"><span class="font-arial">{{value.Name}}</span></td>
            <td width="50%" style="text-align:center">{{value.Address}}</td>
        </tr>
        {{/each}}

    </script>

    <script type="text/javascript">
        $(function () {
            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);
                //}
            });

        });

    </script>
</body>

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