介绍
介绍
今天福哥带着大家给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来完成前端程序的了。