开发者社区> 天伟> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
0 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
0 0
论Jquery瀑布流做成插件的想法
现实中很多问题的根源说白了就是经济问题。
0 0
+关注
天伟
一个普通程序员
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript函数
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载