介绍

介绍

今天福哥带着大家给TFUMS系统增加一个jQuery控件——table，使用这个控件可以完成列表功能的前端，包括AJAX方式的数据请求，还有视图模板的渲染处理。

这个控件设计相对比较简单，使用前端控件时候传入的列表数据接口载入列表数据，然后再提供三个回调方法给前端程序，这三个回调方法用来渲染数据列表的界面内容。

福哥曾经想过实现一个自动输出HTML的table标签结构的功能，不过考虑到实际使用场景的前端模板用的table标签结构不见得是福哥设想的结构，最后决定还是通过回调方法由前端程序自己去渲染比较好。

JQ的table控件

福哥封装了一个简单的jQuery控件，可以实现对列表功能的数据加载并在视图模板里渲染出来的目的。这个控件还非常简单，不要着急，我们一步一步地完善它。

JavaScript

(function ($){
    var myTable = {
        table : null,
        opts : null,
        pn : 0,

        start : function(){
            this.pn = (this.opts.pn) ? this.opts.pn : 1;
            this._doLoadEvent();
        },

        // ajax functions

        _doLoadEvent : function(){
            var ex=this;

            this._doAjax({
                success: function (d) {
                    ex._doAjaxSuccess(d, ex.opts);
                },
                error: function (d) {
                    ex._doAjaxError(d, ex.opts);
                }
            }, this.opts);
        },

        _doAjax : function(opts, defOpts){
            opts.url = defOpts.dataUrl;
            opts.url = opts.url.replace( /\{pn\}/ , this.pn);
            opts.method = defOpts.dataMethod;
            opts.contentType = false;
            opts.processData = false;
            if(opts.method == null){
                opts.method = "get";
            }
            if(opts.dataType == null){
                opts.dataType = "json";
            }
            $.ajax(opts);
        },

        _doAjaxSuccess : function(d, opts){
            if(this.opts.dataType == "classic"){
                this._doDataTypeClassic(d, opts);
                this._doAttachCommonEvents();
            }
            else if(opts.onSuccess){
                opts.onSuccess.call(this, d);
            }
        },

        _doDataTypeClassic : function(d, opts){
            if(d && d instanceof Object
                && d.page && d.page instanceof Object
                && d.data && d.data instanceof Array){
                if(opts.onSuccess){
                    opts.onSuccess.call(this, d, this.table);
                }
                if(opts.onRenderTable){
                    opts.onRenderTable.call(this, d, this.table);
                }
                if(opts.onRenderRow){
                    for(var i=0;i<d.data.length;i++){
                        opts.onRenderRow.call(this, d.data[i], this.table);
                    }
                }
                if(opts.onRenderPage){
                    opts.onRenderPage.call(this, d.page, this.table);
                }
            }
            else{
                if(opts.onError){
                    opts.onError.call(this, d, this.table);
                }
            }
        },

        _doAttachCommonEvents : function(){
            var ex=this;

            this.table.find('[page-num]').click(function(){
                ex.pn = $(this).attr('page-num');
                ex._doLoadEvent();
            });
        },

        _doAjaxError : function(d, opts){
            if(opts.onError){
                opts.onError.call(this, d);
            }
        },

        init : function(table, opts){
            if(!opts instanceof Object){
                opts = {};
            }
            this.table = $(table);
            this.opts = opts;
        }
    }
    myTable.init.prototype = myTable;

    $.fn.table=function (options) {
        var my = new myTable.init(this, options);
        my.start();
    }
})(jQuery);

文档列表

HTML

<div class="row">
    <div class="col-12 table article-list">
        <div class="row">
            <div class="col-12">
                <table class="article-list-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>日期</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <ul class="pagination article-list-page" style="margin-top: 12px;">

                </ul>
            </div>
        </div>
    </div>
</div>

JS

$('.article-list').table({
    dataUrl: "<% $TFReq->server->BASE_URI %>api/article/article/_list?pn={pn}",
    dataMethod: "post",
    dataType: "classic",
    onRenderTable: function(data, table){
        var obj = table.find(".article-list-table").find('tbody');
        obj.html("");
    },
    onRenderRow: function(row, table){
        var obj = table.find(".article-list-table").find('tbody');
        obj.append('<tr>' +
            '   <td>'+ row.mId +'</td>' +
            '   <td><a href="<% $TFReq->server->BASE_URI %>home/'+ row.authorId +'/blog/'+ row.mId +'.html" target="_blank">'+row.mTitle+'</a></td> ' +
            '   <td>'+ row.mDatetime.replace( /[ ].*$/ , "") +'</td>' +
            '</tr>');
    },
    onRenderPage: function(page, table){
        var obj = table.find(".article-list-page"), html = "";
        obj.html("");
        if(page.pageNum > 1){
            obj.append('<li><a page-num="1">第一页</a></li>');
            obj.append('<li><a page-num="'+ (page.pageNum-1) +'">前一页</a></li>');
        }
        if(page.pageTeamArgv){
            for(var p=page.pageTeamArgv.low;p<=page.pageTeamArgv.high;p++){
                obj.append('<li><a page-num="'+ p +'">'+ p +'</a></li>');
            }
            obj.find('[page-num="'+ page.pageNum + '"]').parent().addClass("active");
        }
        if(page.pageNum < page.pageTotal){
            obj.append('<li><a page-num="'+ (page.pageNum+1) +'">后一页</a></li>');
            obj.append('<li><a page-num="'+ page.pageTotal +'">最后页</a></li>');
        }
    },
    onError: function(d){

    }
});

讲解

文档列表

HTML

这是一个标准的数据列表的HTML结构，福哥留出了几个特殊的样式名称给前端程序调用使用

JS

这是调用JQ控件table的实例，本身代码没有什么，主要逻辑在三个回调方法里。包括：onRenderTable、onRenderRow和onRenderPage三个回调方法，这三个方法传入的第一个参数不一样，分别对应不同回调方法的功能而定。

使用

效果

总结

今天福哥带着童鞋们实现了JQ控件table的功能，并且在TFUMS系统里面制作了一个使用这个JQ控件table的实例。不过，福哥的这个实例不是TFUMS系统的user模块的数据，而是同福网站的文档数据。没有关系，后面福哥会继续完善TFUMS系统的同时，给出用户列表的程序代码，而到时候肯定还是使用JQ控件table来完成前端程序的了。