超级便捷绘制html表格,js超简洁表格

完整demo下载

显示效果

表格样式

使用示例

html

js

var _data=[

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'},

{a:'adrian',b:'simon',c:'jack',d:'yxkk'}

]

var cs = new AJRD_table('cs_table',{

"headers":["1","2","3","4"], //必须

"data":_data, //必须

"displayNum": 20 //必须 默认 10

});

cs.init(0,9);

对象方法

init(begin,end)

begin 显示起始位置

end 显示截止位置

初始化表格

refresh()

刷新表格

setOption(option)

重设参数

setWidth(width)

设置宽度

setHeight(height)

设置高度

源码

/**

* 表格对象

* @param options

*/

function AJRD_table(tableId,options){

this._tableId=tableId;

this._options=options;

/**

* 抽象化表格

*/

function abstractTable(){

// ---------内容属性

this.id = null; // 每个表格都有唯一的一个id

this.tableobj = null; //表格对象

this.rowNum = 0; //行数

this.colNum = 0; //列数

this.header = []; //表头数据

this.content = []; //body数据

// ----------提供外部使用获得表格内部数据

this.currentClickRowID = 0; //当前点击的行数据

// --- 通过表头来获得这张表的列数

this.getColNum = function(){

this.colNum = this.header.length;

return this.colNum;

}

// ----------- 表格自我构建行为

this.clearTable = function(){};

this.showHeader = function(){};

this.showContent = function(begin,end){};

this.showFoot = function(){};

// --------- 分页功能属性

this.allDataNum = 0; // 总数据条数

this.displayNum = 10; // 每页显示条数

this.maxPageNum = 0; // 最大页码值

this.currentPageNum =1;// 当前页码值

//tfoot分页组

this.groupDataNum = 10; //每组显示10页

this.groupNum = 1; //当前组

// -------- 分页功能行为

this.paginationFromBeginToEnd = function(begin,end){}

this.first = function(){}//首页

this.last = function(){}//最后一页

this.prev = function(){}//上一页

this.next = function(){}//下一页

this.goto = function(){} //跳到某页

// ----------- 表格初始化

this.init = function(begin,end){}

}

/*

表格对象模板

*/

function tableTemplet(table_id){

abstractTable.call(this);

this.id = table_id;

}

var _self=this;

if(!options){return;}

if(!$.isPlainObject(options)){return;}

tableTemplet.call(this,_self._tableId);

console.log(this._tableId);

//得到表格对象

this.tableobj = $("#"+this._tableId);

//清空表格内容

this.clearTable = function(){

this.tableobj.html(" ");

}

// 实现分页行为

this.paginationFromBeginToEnd= function(x,y){

this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);

var arrPage = [];

for(var i= x;i

arrPage.push(this.content[i]);

}

return arrPage;

}

this.showHeader = function(){

if(this.header != null){

var $thead = $(""),

$tr = $("

"),

$th;

for(var i=0;i

$th = $("

").html(this.header[i]);

$th.appendTo($tr);

}

$tr.appendTo($thead);

$thead.appendTo(this.tableobj)

}

}

//初始化tbody

this.showContent = function(begin,end){

if(this.content != null){

var $tbody = $("

"),

$tr,

$td;

var tempDaTa = this.paginationFromBeginToEnd(begin,end),

len = tempDaTa.length;

// 循环创建行

for(var i=0;i

$tr = $("

").appendTo($tbody);

if(i%2==1){

$tr.addClass("evenrow");

}

// 循环创建列 取得对象中的键

for(var key in tempDaTa[i]){

$td = $("

").html(tempDaTa[i][key]).appendTo($tr);

}

}

this.tableobj.append($tbody);

}

}

//初始化tfoot

this.showFoot = function(){

var $tfoot = $("

"),

$tr = $("

"),

$td = $("

").attr("colspan",this.colNum).addClass("paging");

$tr.append($td);

$tfoot.append($tr);

this.tableobj.append($tfoot);

this.pagination($td);

}

//表格分页

this.pagination = function(tdCell){

var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);

//首页

var oA = $("");

oA.attr("href","#1");

oA.html("首页");

$td.append(oA);

//上一页

if(this.currentPageNum>=2){

var oA = $("");

oA.attr("href","#"+(this.currentPageNum - 1));

oA.html("上一页");

$td.append(oA);

}

//普通显示格式

if(this.maxPageNum <= this.groupDataNum){ // 10页以内 为一组

for(var i = 1;i <= this.maxPageNum ;i++){

var oA = $("");

oA.attr("href","#"+i);

if(this.currentPageNum == i){

oA.attr("class","current");

}

oA.html(i);

$td.append(oA);

}

}else{//超过10页以后(也就是第一组后)

if(this.groupNum<=1){//第一组显示

for(var j = 1;j <= this.groupDataNum ;j++){

var oA = $("");

oA.attr("href","#"+j);

if(this.currentPageNum == j){

oA.attr("class","current");

}

oA.html(j);

$td.append(oA);

}

}else{//第二组后面的显示

var begin = (this.groupDataNum*(this.groupNum-1))+ 1,

end ,

maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);

if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){

end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum

}else{

end = this.groupDataNum*(this.groupNum);

}

for(var j = begin;j <= end ;j++){

var oA = $("");

oA.attr("href","#"+j);

if(this.currentPageNum == j){

oA.attr("class","current");

}

oA.html(j);

$td.append(oA);

}

}

}

//下一页

if( (this.maxPageNum - this.currentPageNum) >= 1 ){

var oA = $("");

oA.attr("href","#" + (this.currentPageNum + 1));

oA.html("下一页");

$td.append(oA);

}

//尾页

var oA = $("");

oA.attr("href","#" + this.maxPageNum);

oA.html("尾页");

$td.append(oA);

var page_a = $td.find('a');

var tempThis = this;

page_a.unbind("click").bind("click",function(){

var nowNum = parseInt($(this).attr('href').substring(1));

if(nowNum>tempThis.currentPageNum){//下一组

if(tempThis.currentPageNum%tempThis.groupDataNum==0){

tempThis.groupNum += 1;

var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);

if(tempThis.groupNum>=maxGroupNum){

tempThis.groupNum = maxGroupNum;

}

}

}

if(nowNum

if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){

tempThis.groupNum -= 1;

if(tempThis.groupNum<=1){

tempThis.groupNum = 1;

}

}

}

if(nowNum==tempThis.maxPageNum){//直接点击尾页

var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);

tempThis.groupNum = maxGroupNum;

}

if(nowNum==1){

var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);

tempThis.groupNum = 1;

}

tempThis.currentPageNum = nowNum;

tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,

tempThis.currentPageNum*tempThis.displayNum);

return false;

});

}

//初始化

this.init = function(begin,end){

this.header = this._options.headers;

this.colNum = this.header.length;

this.content = this._options.data;

this.allDataNum = this.content.length;

if(this._options.displayNum){

this.displayNum = this._options.displayNum;

}

if(this._options.groupDataNum){

this.groupDataNum = this._options.groupDataNum;

}

this.clearTable();

this.showHeader();

this.showContent(begin,end);

this.showFoot();

}

this.refresh=function(){

this.init(0,this._options.displayNum);

}

this.setOption=function(option){

this._options=option;

}

this.setWidth=function(w){

$('#'+this._tableId+'_box').width(w);

}

this.setHeight=function(h){

$('#'+this._tableId+'_box').height(h);

}

}