Jquery+artTemplate+layPage 封装datagrid

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

导言

在日常开发中经常会用到列表,相信用过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>

 

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

目录
相关文章
|
5月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
39 0
|
JSON 前端开发 JavaScript
jQuery封装Ajax,SpringMVC使用Ajax的配置
jQuery封装Ajax,SpringMVC使用Ajax的配置
144 0
jQuery封装Ajax,SpringMVC使用Ajax的配置
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1092 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
111 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
314 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
178 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
116 0
|
缓存 JavaScript 前端开发
|
XML 存储 前端开发
详解原生Ajax的实现,并模仿JQuery进行封装(上)
对于Ajax,肯定很多小伙伴都听过甚至用过了,那么没听过的也不用着急,本文会对Ajax进行讲解,其次,一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解,那么也不用着急,本文从最基本的Ajax开始讲起,然后最后会尽可能得模仿JQuery对其进行封装,让我刚才提到的两类人能对Ajax有进一步的了解。
125 0