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>

 

注：支持單頁多列表多分頁