//定义一个自动创建表格的函数
|
//cont容器id,cla表格的类名，col表格的行数，
|
//ThArr表格的头数据，TdArr表格的单元格数据
|
function createTable(cont,cla,col,ThArr,TdArr){
|
$("#"+cont).children('table').remove();
|
var _table=$('<table class="' + cla + '"></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/col);
|
// 给每个th设置值
|
for(var i=0;i<col;i++)
|
{
|
ThArray[i]=$("<th>"+ThArr[i]+"</th>");
|
}
|
// 给每个td设置值
|
for(var i=0;i<TdLength;i++)
|
{
|
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<col;k++)
|
{
|
TrArray[i].append(TdArray[n]);
|
n++;
|
}
|
}
|
//给th赋给thead
|
for(var i=0;i<col;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添加到指定的容器中
|
$("#"+cont).append(_table);
|
}
|
|
//定义一个自动创建表格的函数
|
//ThArr表格的头数据，TdArr表格的单元格数据
|
function createTablenew(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++)
|
{
|
ThArray[i]=$("<th>"+ThArr[i]+"</th>");
|
}
|
// 给每个td设置值
|
for(var i=0;i<TdLength;i++)
|
{
|
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);
|
}
|
|
//定义一个自动创建表格的函数
|
//ThArr表格的头数据;TdArr表格的单元格数据;TrArr表格的行编号数据
|
function createTbl(ele,ThArr,TdArr,TrArr){
|
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++)
|
{
|
ThArray[i]=$("<th>"+ThArr[i]+"</th>");
|
}
|
// 给每个td设置值
|
for(var i=0;i<TdLength;i++)
|
{
|
TdArray[i]=$("<td>"+TdArr[i]+"</td>");
|
}
|
//设置tr
|
for(var i=0;i<TrLength;i++)
|
{
|
TrArray[i]=$("<tr num='"+TrArr[i]+"'></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);
|
}
|
|
//向表格中追加数据
|
function addTd(ele,len,__ArrTd){
|
//定义tr和td标签
|
var __ArrTagTr=new Array();
|
var __ArrTagTd=new Array();
|
var __TrLength=0;
|
__TrLength=Math.ceil(__ArrTd.length/len);
|
//创建tr
|
for(var i=0;i<__TrLength;i++)
|
{
|
__ArrTagTr[i]=$('<tr class="red" newTd></tr>');
|
}
|
//给每个td添加文本
|
for(var i=0;i<__ArrTd.length;i++)
|
{
|
__ArrTagTd[i]=$('<td>'+__ArrTd[i]+'</td>');
|
}
|
var n=0;
|
//根据len将td添加到对应的行
|
for(var i=0;i<__TrLength;i++)
|
{
|
for(var k=0;k<len;k++)
|
{
|
__ArrTagTr[i].append(__ArrTagTd[n]);
|
n++;
|
}
|
}
|
for(var i=0;i<__TrLength;i++)
|
{
|
ele.append(__ArrTagTr[i]);
|
}
|
}
|
|
|
//js创建表格选项内容
|
function createCard(ele,ArrTh,ArrTd){
|
ele.children('table').remove();
|
var __table=$('<table></table>');
|
var __thead=$('<thead></thead>');
|
var __tbody=$('<tbody></tbody>');
|
var __ArrTh=new Array();
|
var __ArrTr=new Array();
|
var __ArrTd=new Array();
|
|
// 通过for循环将值给th
|
for(var i=0;i<ArrTh.length;i++)
|
{
|
__ArrTh[i]=$('<th>'+ArrTh[i]+'</th>');
|
}
|
// 将th放到thead内
|
for(var i=0;i<ArrTh.length;i++)
|
{
|
__thead.append(__ArrTh[i]);
|
}
|
//通过ArrTd的长度设置tr的个数
|
for(var i=0;i<ArrTd.length;i++)
|
{
|
__ArrTr[i]=$('<tr></tr>');
|
}
|
// 通过for循环将值给td
|
for(var i=0;i<ArrTd.length;i++)
|
{
|
for(var k=0;k<ArrTd[0].length;k++)
|
{
|
var n=i*ArrTd[0].length+k;
|
__ArrTd[n]=$('<td>'+ArrTd[i][k]+'</td>');
|
}
|
}
|
// 将td放到tr中
|
for(var i=0;i<ArrTd.length;i++)
|
{
|
for(var k=0;k<ArrTd[0].length;k++)
|
{
|
var n=i*ArrTd[0].length+k;
|
__ArrTr[i].append(__ArrTd[n]);
|
}
|
}
|
// 将tr放到tbody中
|
for(var i=0;i<ArrTd.length;i++)
|
{
|
__tbody.append(__ArrTr[i]);
|
}
|
//将thead和tbody添加到table中
|
__table.append(__thead);
|
__table.append(__tbody);
|
//将span添加到容器中
|
ele.append(__table);
|
}
|
|
//创建等待的框框
|
function createWait(ele){
|
var __eleWidth=ele.width();
|
var __wait=$('<div class="wait">'+"数据加载中，请稍等..."+'</div>');
|
//var __mask=$('<div class="mask"></div>');
|
var __left=ele.scrollLeft()+__eleWidth/2;
|
ele.append(__wait);
|
//定义等待框的css
|
ele.children('.wait').css({
|
'position':'absolute',
|
'z-index':'100',
|
'top':'50%',
|
'margin-top':'-30px',
|
'left':__left+'px',
|
'margin-left':'-100px',
|
'width':'200px',
|
'height':'60px',
|
'line-height':'60px',
|
'text-align':'center',
|
'font-size':'16px',
|
'background-color':'#ccc',
|
'color':'#000'
|
});
|
}
|
|
//移除等待框
|
function removeWait(ele){
|
ele.children('.wait').remove();
|
$('body').children('.mask').remove();
|
}
|
|
|
$(document).ready(function(){
|
// 点击显示表格选项
|
$('#container .cardOpt').click(function(){
|
$('#cardOption').show();
|
$('#allShade').show();
|
$('body').css('overflow','hidden');
|
});
|
// 点击隐藏表格选项
|
$('#outCardOption').click(function(){
|
$('#cardOption').hide();
|
$('#allShade').hide();
|
$('body').css('overflow','scroll');
|
});
|
// 浏览器滚动时表格选项和遮罩层的位置改变
|
$(document).scroll(function(){
|
var scrollY=$(this).scrollTop();
|
$('#cardOption').css('top',scrollY+50+'px');
|
$('#cardResisOption').css('top',scrollY+50+'px');
|
$('#allShade').css('top',scrollY+'px');
|
});
|
});
|
//在容器中创建文本框
|
function createInput(ele,val){
|
if(ele.find('input').length==0)
|
{
|
ele.text('');
|
var __input=$('<input type="text" value="'+val+'" focus/>');
|
ele.append(__input);
|
}
|
}
|
//通过表格选项的值返回表头数据
|
function getArrTh(__stateArr,__arrTh){
|
var __thIndex=0; //新表头数据的下标
|
var __newTh=new Array(); //存储新的表头数据
|
for(var i=0;i<__arrTh.length;i++)
|
{
|
if(__stateArr[i]==1)
|
{
|
__newTh[__thIndex]=__arrTh[i];
|
__thIndex++;
|
}
|
}
|
return __newTh;
|
}
|
//通过表格选项的值返回表内数据
|
function getArrTd(__stateArr,__arrTd){
|
var __tdIndex=0;
|
var __newTd=new Array();
|
for(var i=0;i<__arrTd.length;i++)
|
{
|
var stateIndex=i%__stateArr.length; //获取stateArr的下标
|
if(__stateArr[stateIndex]==1)
|
{
|
__newTd[__tdIndex]=__arrTd[i];
|
__tdIndex++;
|
}
|
}
|
return __newTd;
|
}
|
//让表格头和表格内的宽度相等
|
function widthEqual(eleHead,eleBody){
|
var widthHead=new Array(); //获取头部单元格的宽度
|
var widthBody=new Array(); //获取表格内的单元格的宽度
|
var maxWidth=new Array(); //获取表格最宽
|
for(var i=0;i<eleHead.length;i++)
|
{
|
widthHead[i]=eleHead.eq(i).width();
|
}
|
for(var i=0;i<eleHead.length;i++)
|
{
|
widthBody[i]=eleBody.eq(i).width();
|
}
|
for(var i=0;i<eleHead.length;i++)
|
{
|
if(widthHead[i]>widthBody[i])
|
{
|
maxWidth[i]=widthHead[i];
|
}else{
|
maxWidth[i]=widthBody[i];
|
}
|
}
|
// 将表格的第一行和头部的宽度相等
|
for(var i=0;i<eleHead.length;i++)
|
{
|
eleHead.eq(i).css('width',maxWidth[i]+'px');
|
eleBody.eq(i).css('width',maxWidth[i]+'px');
|
}
|
}
|
//在点击的容器内创建select标签
|
//ele为容器，optArr为option的数据，txt为容器固有内容
|
function createSelect(ele,optArr,txt){
|
ele.text('');
|
var __select=$('<select></select>');
|
var __option=new Array();
|
for(var i=0;i<optArr.length;i++)
|
{
|
if(txt==optArr[i])
|
{
|
__option[i]=$('<option value="'+optArr[i]+'" selected>'+optArr[i]+'</option>');
|
}else{
|
__option[i]=$('<option value="'+optArr[i]+'">'+optArr[i]+'</option>');
|
}
|
}
|
for(var i=0;i<optArr.length;i++)
|
{
|
__select.append(__option[i]);
|
}
|
ele.append(__select);
|
}
|
|
// 在下拉列表中生成option
|
function createOptions(ele, optList, all) {
|
// 清空ele
|
ele.text("");
|
// 根据all判断是否有全部的选项
|
if(all) {
|
var _option = $('<option value="">全部（共'+optList.length+'种）</option>');
|
ele.append(_option);
|
}
|
|
// 根据optList的值生成内容
|
for(var i=0; i<optList.length; i++) {
|
var _data = optList[i];
|
var _option = $('<option value="'+_data.val+'">'+_data.txt+'</option>');
|
_option.attr('selected', _data.selected);
|
_option.data('attr', _data.data);
|
|
Object.keys(_data.attr).forEach(function(key) {
|
_option.attr(key, _data.attr[key]);
|
});
|
|
ele.append(_option);
|
}
|
}
|
|
// 获取生成下拉列表的数据
|
function getOptionsData(txt, val, data, attr, isSelected) {
|
var _tmp = {};
|
_tmp.txt = txt;
|
_tmp.val = val;
|
_tmp.attr = attr || {};
|
_tmp.data = data || {};
|
_tmp.selected = isSelected?true:false;
|
return _tmp;
|
}
|
|
/*
|
创建表格
|
@param jquery对象 eleHead 表格头部容器
|
@param jquery对象 eleBody 表格body容器
|
@param array thList 表格头部数据
|
@param array tdList 表格body数据
|
@param array status 表格状态数组(没有则默认全部显示)
|
*/
|
function createFullTbl(eleHead, eleBody, thList, tdList, status) {
|
if(arguments.length < 5) {
|
var status = new Array();
|
for(var i = 0; i < thList.length; i++) {
|
status.push(1);
|
}
|
}
|
var arrNewTh = getArrTh(status, thList);
|
var arrNewTd = getArrTd(status, tdList);
|
|
createTablenew(eleHead, arrNewTh, arrNewTd);
|
createTablenew(eleBody, arrNewTh, arrNewTd);
|
|
setTblWidth(eleHead, eleBody);
|
eleBody.scroll(function() {
|
setTblWidth(eleHead, eleBody);
|
});
|
}
|
|
/*
|
使表格的头部和body内容对齐
|
@param jquery对象 eleHead 表格头部容器
|
@param jquery对象 eleBody 表格body容器
|
*/
|
function setTblWidth(tbHead, tbBody) {
|
var tblBdWd = tbBody.find('table').width();
|
tbHead.find('table').width(tblBdWd);
|
var tbScrollLeft = tbBody.scrollLeft();
|
tbHead.find('table').css('left', -tbScrollLeft + 'px');
|
}
|
|
// 向已有的表格添加td
|
function addTr(ele, TdArr) {
|
var _tbody=ele.find('tbody');
|
var TdArray=new Array(); //设置td的数组
|
// 给每个td设置值
|
for(var i=0;i<TdArr.length;i++)
|
{
|
TdArray[i]=$("<td>"+TdArr[i]+"</td>");
|
}
|
var _tr = $('<tr></tr>');
|
_tr.append(TdArray);
|
//将tr添加到tbody的容器中
|
_tbody.append(_tr);
|
}
|
|
/*
|
创建表格
|
@param jquery对象 eleHead 表格头部容器
|
@param jquery对象 eleBody 表格body容器
|
@param array thList 表格头部数据
|
@param array tdList 表格body数据
|
@param array status 表格状态数组(没有则默认全部显示)
|
*/
|
function addFullTr(eleHead, eleBody, thList, tdList, status) {
|
if(arguments.length < 5) {
|
var status = new Array();
|
for(var i = 0; i < thList.length; i++) {
|
status.push(1);
|
}
|
}
|
var arrNewTd = getArrTd(status, tdList);
|
addTr(eleHead, arrNewTd);
|
addTr(eleBody, arrNewTd);
|
|
setTblWidth(eleHead, eleBody);
|
}
|
|
|
/*
|
更新表格的特定的单元格的值
|
@param 表格头部容器 tblHd
|
@param 表格内容容器 tblBd
|
@param 对象数组 list 存储更新表格的行列以及对应的值
|
{row:, col:, val:} row行号， col列号， val值
|
*/
|
function updataTbl(tblHd, tblBd, list) {
|
var _hdTbody = tblHd.find('tbody'); // 表格头部的tbody
|
var _bdTbody = tblBd.find('tbody'); // 表格body的tbody
|
|
// 遍历list给特定的位置重新定义文本值
|
for(var i = 0; i < list.length; i++) {
|
var row = list[i].row;
|
var col = list[i].col;
|
var value = list[i].val;
|
_hdTbody.find('tr').eq(row).find('td').eq(col).text(value);
|
_bdTbody.find('tr').eq(row).find('td').eq(col).text(value);
|
}
|
}
|
|
|
/*
|
* 根据页面中表格数据生成表格第一次默认加载50条
|
* @param jquery tblHd 表格头部容器
|
* @param jquery tblBd 表格内容容器
|
* @param array thList 表格头部数据
|
* @param array tdList 所有的表格数据(全部查询出来)
|
* @param array status 表格状态数组(没有则默认全部显示)
|
*
|
*/
|
function createTblByAllData(tblHd, tblBd, thList, tdList, status) {
|
if(arguments.length < 5) {
|
var status = new Array();
|
for(var i = 0; i < thList.length; i++) {
|
status.push(1);
|
}
|
}
|
|
// 判断容器内是否有表格,如果不存在就截取表格数据的前50行数据进行创建表格
|
if(tblBd.find('table').length == 0) {
|
var newTdList = getArrTdList();
|
createFullTbl(tblHd, tblBd, thList, newTdList, status);
|
}
|
|
|
}
|
|
/*
|
*根据行号和获取行数获取td的数据
|
*@param array thList 表格的头部数据
|
*@param array tdList 所有的表格数据(全部查询出来)
|
*@param int row 当前的行号
|
*@param int rows 要添加的行数
|
*/
|
function getArrTdList(thList, tdList, row, rows) {
|
var tdList =new Array();
|
|
}
|
