//定义一个自动创建表格的函数
|
//ThArr表格的头数据，TdArr表格的单元格数据
|
function cTbl(ele,ThArr,TdArr){
|
ele.children('table').remove();
|
var _table=$('<table></table>');
|
var _thead=$('<thead></thead>');
|
var _tbody=$('<tbody></tbody>');
|
var ThArray=new Array(); //设置th的数组
|
var TrArray=new Array(); //设置tr的数组
|
var TdArray=new Array(); //设置td的数组
|
var TdLength; //获取单元格个数
|
var TrLength; //获取行数
|
TdLength=TdArr.length;
|
TrLength=Math.ceil(TdLength/ThArr.length);
|
// 给每个th设置值
|
for(var i=0;i<ThArr.length;i++)
|
{
|
// var dataStr = cutStrByLen(ThArr[i], 7);
|
ThArray[i]=$("<th>"+ThArr[i]+"<div class='drag'></div></th>");
|
}
|
// 给每个td设置值
|
for(var i=0;i<TdLength;i++)
|
{
|
// var dataStr = cutStrByLen(TdArr[i], 7);
|
TdArray[i]=$("<td>"+TdArr[i]+"</td>");
|
}
|
//设置tr
|
for(var i=0;i<TrLength;i++)
|
{
|
TrArray[i]=$("<tr></tr>");
|
}
|
//将td以col个赋给tr
|
var n=0;
|
for(var i=0;i<TrLength;i++)
|
{
|
for(var k=0;k<ThArr.length;k++)
|
{
|
TrArray[i].append(TdArray[n]);
|
n++;
|
}
|
}
|
//给th赋给thead
|
for(var i=0;i<ThArr.length;i++)
|
{
|
_thead.append(ThArray[i]);
|
}
|
_table.append(_thead);
|
// 将tr赋给table
|
for(var i=0;i<TrLength;i++)
|
{
|
_tbody.append(TrArray[i]);
|
}
|
_table.append(_tbody);
|
//将table添加到指定的容器中
|
ele.append(_table);
|
}
|
|
// 对长度超出len的字符串进行裁剪
|
function cutStrByLen(data, len) {
|
var _str = '';
|
// alert(data.length);
|
if(data.length > len)
|
{
|
_str = data.slice(0, len)+'...';
|
return _str;
|
}
|
return data;
|
}
|
// 使用构造函数模式创建表格选项
|
function TblOpt(tblHd, tblBody, hdData, bodyData) {
|
this.eleHd = tblHd; // 获取表头容器
|
this.eleBody = tblBody; // 获取body的容器
|
this.hdData = hdData; // 获取表格头部数据
|
this.bodyData = bodyData; // 获取表格body内的数据
|
|
// 创建表格
|
this.createTbl = function () {
|
cTbl(this.eleHd, this.hdData, this.bodyData);
|
cTbl(this.eleBody, this.hdData, this.bodyData);
|
|
// 使两个表格的宽度一致
|
var bodyWidth = this.eleBody.find('table').eq(0).width();
|
this.eleHd.find('table').eq(0).width(bodyWidth);
|
|
// 将表格上下对齐
|
var scrollX = this.eleBody.scrollLeft();
|
this.eleHd.find('table').css('left', -scrollX + 'px');
|
};
|
|
// 使两个表格同步滚动
|
this.scrollSame = function () {
|
// 将表格上下对齐
|
var scrollX = this.eleBody.scrollLeft();
|
this.eleHd.find('table').css('left', -scrollX + 'px');
|
};
|
|
// 浏览器窗口大小改变表格对齐
|
this.tblResize = function () {
|
var bodyWidth = this.eleBody.find('table').eq(0).width();
|
this.eleHd.find('table').eq(0).width(bodyWidth);
|
};
|
|
// 更新表格的数据
|
this.reflushTbl = function (newHdData, newBodyData) {
|
this.hdData = newHdData;
|
this.bodyData = newBodyData;
|
this.createTbl(); // 调用生成新的表格
|
};
|
|
// 给表格被点击的位置添加背景色
|
this.addBg = function (trIndex) {
|
// 移出表格行的背景
|
this.eleHd.find('tbody').find('tr').removeClass('tbl-tr-bg');
|
this.eleBody.find('tbody').find('tr').removeClass('tbl-tr-bg');
|
|
// 给特定行添加背景
|
this.eleHd.find('tbody').find('tr').eq(trIndex).addClass('tbl-tr-bg');
|
this.eleBody.find('tbody').find('tr').eq(trIndex).addClass('tbl-tr-bg');
|
};
|
|
// 自动调用生成表格
|
this.createTbl();
|
}
|
