$.extend($.fn, {
gridtable: function(opt) {
this.each(function(i) {
var that = this, $that = $(this);
var options = $.extend({}, $.fn.gridtable.options, opt);
var i, len, datas = {};
if(0 == options.colModel.length) {
alert("colModel不存在");
return;
}
if(0 == options.colName.length) {
for(i=0, len=options.colModel.length; i<len; i++) {
options.colName[i] = options.colModel[i].names;
}
}
if(options.colName.length != options.colModel.length) {
alert("colName和colModel長度不一致!");
return;
}
var newtable = function() {};
/**
* 得到table表頭
* @param {[object]} options []
* @return {[string]} [表頭字符串]
*/
newtable.prototype.getThead = function(options) {
var lengths = options.colModel.length;
var thead = "<thead><tr class='tb-head'>";
for(i=0, len=lengths; i<len; i++) {
if (!options.colModel[i].width) {
options.colModel[i].width = 150;
};
if (!options.colModel[i].align) {
options.colModel[i].align = "center";
};
thead += "<td style='width:"+options.colModel[i].width+"px;text-align:"+options.colModel[i].align+";'>"+options.colName[i]+"</td>";
}
thead += "</tr></thead>";
return thead;
};
/**
* 得到table主體
* @param {[object]} options []
* @param {[string]} url [獲取數據路徑]
* @return {[string]} [table主體字符串]
*/
newtable.prototype.getTbody = function(options) {
// this.getData(options);
// var data = this.datas.result;
var data = datas.result;
var tbody = "<tbody>";
for(i=0, len=data.length; i<len; i++) {
tbody += "<tr>";
for (var j = 0; j < options.colModel.length; j++) {
if (!options.colModel[j].width) {
options.colModel[j].width = 150;
};
if (!options.colModel[j].align) {
options.colModel[j].align = "center";
};
if (j == options.colModel.length-1 && options.colModel[j].names == "act") {
tbody += "<td class='td_"+options.colModel[j].names+"' style='width:"+options.colModel[j].width+"px;text-align:"+options.colModel[j].align+";'>"+options.colModel[j].contents+"</td>";
} else{
tbody += "<td class='td_"+options.colModel[j].names+"' style='width:"+options.colModel[j].width+"px;text-align:"+options.colModel[j].align+";'>"+data[i][options.colModel[j].names]+"</td>";
};
};
tbody += "</tr>";
}
tbody += "</tbody>";
return tbody;
};
/**
* 得到table字符串
* @param {[object]} options []
* @param {[string]} url [獲取數據路徑]
* @return {[string]}
*/
newtable.prototype.getTable = function(options) {
var thead = this.getThead(options);
var tbody = this.getTbody(options);
var table = thead + tbody;
return table;
};
newtable.prototype.onload = function(options) {
var table = this.getTable(options);
$that.append(table);
options.gridComplete(datas);
};
newtable.prototype.empty = function() {
$that.empty();
};
newtable.prototype.reload = function(options) {
this.empty();
this.onload(options);
};
function param(){
}
var page = function(){
this.defaults = {
pageNo : 1,
pageSize: 10
};
};
page.prototype.doinit = function(options, fn) {
var opts = $.extend({}, this.defaults, options);
var pageNo = parseInt(opts.pageNo);
var totalPages = opts.totalPages;
var str = '';
var startIndex = 1;
var params = opts;
var loopNum = Math.min(pageNo+3,totalPages);
delete params["totalPages"];
delete params["callback"];
if (totalPages <= 1) {
return false;
}
//添加上一頁
if (pageNo != 1) {
params["pageNo"] = pageNo -1;
str += '<a href="?';
str += $.param(params);
str += '" class="page-prev">上一頁</a> ';
}
if (totalPages < 6){
startIndex = 1;
loopNum = totalPages;
}
if (totalPages >= pageNo && pageNo > 4) {
startIndex = pageNo -3;
};
if (pageNo <=4 && totalPages > 6) {
loopNum = 6;
};
for (; startIndex <= loopNum; startIndex++) {
if (startIndex == pageNo) {
str += "<span>";
str += startIndex;
str += "</span> ";
} else {
params["pageNo"] = startIndex;
str += '<a href="?';
str += $.param(params);
str += '">';
str += startIndex;
str += '</a> ';
}
}
if (loopNum < totalPages) {
str += '<span class="page-dot">...</span> ';
};
//添加下一頁
if (totalPages !=0 && pageNo != totalPages) {
params["pageNo"] = pageNo +1;
str += '<a href="?';
str += $.param(params);
str += '" class="page-next">下一頁</a> ';
};
return str;
};
$.ajax({
url:options.url,
dataType:"json",
data:options.extraData,
async: true,
cache: false,
type:options.mtype,
success: function(result) {
datas = result.data;
var table = new newtable();
table.onload(options);
// var page = new page();
var obj = {
totalPages: datas.totalPages,
pageNo : datas.pageNo,
pageSize:datas.pageSize
};
$(options.page).html((new page()).doinit(obj));
},
error: function(e) {
console.log(e);
}
});
});
}
});
$.fn.gridtable.options = {
"colName":[],
"colModel":[],
mtype:"GET",
extraData:"",
gridComplete:function(data){}
};
歡迎大家指出不足的地方