//ThArr表格的头数据，TdArr表格的单元格数据
|
/*function createTbl(ele,ThArr,TdArr){
|
ele.children('table').remove();
|
var _table=$('<table data-role="table" class="ui-responsive"></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++;
|
}
|
TrArray[i].append($('<td style="visibility: hidden"></td>'));
|
}
|
//给th赋给thead
|
var _tr = $('<tr></tr>');
|
for(var i=0;i<ThArr.length;i++)
|
{
|
_tr.append(ThArray[i]);
|
}
|
_tr.append($('<th style="visibility: hidden"></th>'));
|
_thead.append(_tr);
|
_table.append(_thead);
|
// 将tr赋给table
|
for(var i=0;i<TrLength;i++)
|
{
|
_tbody.append(TrArray[i]);
|
}
|
_table.append(_tbody);
|
//将table添加到指定的容器中
|
ele.append(_table).trigger('create');
|
}*/
|
|
//ThArr表格的头数据，TdArr表格的单元格数据
|
function createTbl(ele,ThArr,TdArr){
|
ele.children('table').remove();
|
|
var TdLength; //获取单元格个数
|
var TrLength; //获取行数 也就是最后的表格数
|
TdLength=TdArr.length;
|
TrLength=Math.ceil(TdLength/ThArr.length);
|
|
for (let i = 0; i < TrLength; i++) {
|
var _table=$('<table data-role="table" class="ui-responsive"></table>');
|
var _tbody=$('<tbody></tbody>');
|
for (let m = 0, n = ThArr.length; m < n; m++) {
|
_tbody.append('<tr><th>' + ThArr[m] + '</th><td>' + TdArr[n * i + m] + '</td></tr>')
|
}
|
_table.append(_tbody);
|
ele.append(_table);
|
}
|
}
|
|
// 创建非自适应表格
|
function createTblNoRes(ele,ThArr,TdArr){
|
ele.children('table').remove();
|
var _table=$('<table style="text-align:center;"></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
|
var _tr = $('<tr></tr>');
|
for(var i=0;i<ThArr.length;i++)
|
{
|
_tr.append(ThArray[i]);
|
}
|
_thead.append(_tr);
|
_table.append(_thead);
|
// 将tr赋给table
|
for(var i=0;i<TrLength;i++)
|
{
|
_tbody.append(TrArray[i]);
|
}
|
_table.append(_tbody);
|
//将table添加到指定的容器中
|
ele.append(_table).trigger('create');
|
}
|
/**
|
向表格内添加数据
|
@param object ele jquery对象表格容器
|
@param array ThArr 表格头部数据
|
@param array TdArr 表格数据
|
*/
|
/*function addTrToTbl(ele, ThArr, TdArr) {
|
var _table=$('<table data-role="table" class="ui-responsive"></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++;
|
}
|
TrArray[i].append($('<td style="visibility: hidden"></td>'));
|
}
|
//给th赋给thead
|
var _tr = $('<tr></tr>');
|
for(var i=0;i<ThArr.length;i++)
|
{
|
_tr.append(ThArray[i]);
|
}
|
_tr.append($('<th style="visibility: hidden"></th>'));
|
_thead.append(_tr);
|
_table.append(_thead);
|
// 将tr赋给table
|
for(var i=0;i<TrLength;i++)
|
{
|
_tbody.append(TrArray[i]);
|
}
|
_table.append(_tbody);
|
//将table添加到指定的容器中
|
ele.append(_table).trigger('create');
|
}*/
|
|
/**
|
向表格内添加数据
|
@param object ele jquery对象表格容器
|
@param array ThArr 表格头部数据
|
@param array TdArr 表格数据
|
*/
|
function addTrToTbl(ele, ThArr, TdArr) {
|
var TdLength; //获取单元格个数
|
var TrLength; //获取行数
|
TdLength=TdArr.length;
|
TrLength=Math.ceil(TdLength/ThArr.length);
|
for (let i = 0; i < TrLength; i++) {
|
var _table=$('<table data-role="table" class="ui-responsive"></table>');
|
var _tbody=$('<tbody></tbody>');
|
for (let m = 0, n = ThArr.length; m < n; m++) {
|
_tbody.append('<tr><th>' + ThArr[m] + '</th><td>' + TdArr[n * i + m] + '</td></tr>')
|
}
|
_table.append(_tbody);
|
ele.append(_table);
|
}
|
}
|
|
|
//显示加载器
|
function showLoader() {
|
//显示加载器.for jQuery Mobile 1.2.0
|
$.mobile.loading('show', {
|
text: '加载中...', //加载器中显示的文字
|
textVisible: true, //是否显示文字
|
theme: 'a', //加载器主题样式a-e
|
textonly: false, //是否只显示文字
|
html: "" //要显示的html内容，如图片等
|
});
|
}
|
|
//隐藏加载器.for jQuery Mobile 1.2.0
|
function hideLoader() {
|
//隐藏加载器
|
$.mobile.loading('hide');
|
}
|
|
// 判断是否显示翻页按钮
|
function setPageTurning(isShowPre, isShowNext) {
|
if(isShowPre) { // 判断是否显示向上翻页按钮
|
$('.pre-page').show();
|
}else {
|
$('.pre-page').hide();
|
}
|
|
if(isShowNext) { // 判断是否显示向下翻页按钮
|
$('.next-page').show();
|
}else {
|
$('.next-page').hide();
|
}
|
}
|
|
// 向页面中添加条使页面可以滚动
|
function addLongBar() {
|
if($('body').find('.long-bar').length == 0) {
|
var win_ht = $.mobile.getScreenHeight()+40;
|
var long_bar = $('<div class="long-bar"></div>');
|
long_bar.css({
|
'position': 'absolute',
|
'width': '10px',
|
'height': win_ht+'px',
|
'background-color': 'red'
|
});
|
$('body').append(long_bar);
|
}
|
}
|
|
$(function() {
|
$('.tbl-container').on('click', 'table tbody tr', function() {
|
$('.tbl-container table tbody tr').removeClass('active');
|
$(this).addClass('active');
|
});
|
});
|
|
//对mobile端数据表格进行操作
|
var MobileTbl = function(tbl, arrTh) {
|
this.tbl = tbl;
|
this.arrTh = arrTh;
|
};
|
|
// 定义对象的原型函数
|
MobileTbl.prototype = {
|
setArrTh:function(arrTh) { // 设置表格的头部数据
|
this.arrTh = arrTh;
|
}
|
,updateCell: function(rows, cols, value) { // 更新指定的单元格
|
var tbody = this.tbl.find('tbody'); // 获取tbody
|
var tr = tbody.find('tr').eq(rows); // 获取tr
|
var td = tr.find('td').eq(cols); // 获取td
|
var th = this.arrTh[cols]; // 列头部数据信息
|
|
// 生成html标记字符串
|
var tdHtml = '<b class="ui-table-cell-label">'+th+'</b>';
|
tdHtml += value;
|
|
// 添加内容到td
|
td.html(tdHtml);
|
}
|
};
|
|
//对于手机端表格进行的二次开发
|
var MobileTable = function(opts) {
|
this.opts = {}; // 生成表格的配置项
|
this.el = '';
|
this.cols = []; // 表格的头部
|
this.data = []; // 表格的内容
|
this.render(opts);
|
}
|
// 定义对象的原型函数
|
MobileTable.prototype = {
|
_setEl: function(el) { // 设置表格所在的容器
|
if(typeof el == 'object') {
|
this.el = el;
|
}else {
|
this.el = $(el);
|
}
|
}
|
,_setOpts: function(opts) { // 设置配置项
|
this.opts = opts;
|
}
|
,_setCols: function(cols) { // 设置表格的头部
|
this.cols = cols;
|
}
|
,_setData: function(data) {
|
this.data = data;
|
}
|
,_init: function(opts) {
|
var cols = opts.cols;
|
var data = opts.data;
|
var el = opts.el;
|
this._setOpts(opts); // 初始化配置项
|
this._setEl(el); // 初始化el
|
this._setCols(cols); // 初始化头部数据
|
this._setData(data); // 初始化表格数据
|
}
|
,render: function(opts) {
|
this._init(opts);
|
var table = $('<table data-role="table" class="ui-responsive"></table>');
|
var thead = this._getThead();
|
var tbody = this._getTbody();
|
|
// 生成表格
|
table.append(thead);
|
table.append(tbody);
|
// 清空容器
|
this.el.text('');
|
this.el.append(table).trigger('create');
|
}
|
,_getThead: function() { // 获取表格的头部
|
var cols = this.cols;
|
var thead = $('<thead></thead>');
|
var tr = $('<tr></tr>');
|
// 遍历cols的值,根据数据项thead添加内容
|
for(var i=0; i<cols.length; i++) {
|
var _cols = cols[i];
|
var th = $('<th></th>');
|
th.html(_cols.title);
|
th.attr('data-field', _cols.field);
|
tr.append(th)
|
|
}
|
thead.append(tr);
|
return thead;
|
}
|
,_getTbody: function() { // 获取表格的内容
|
var cols = this.cols;
|
var data = this.data;
|
var tbody = $('<tbody></tbody>');
|
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tr = $('<tr></tr>');
|
// 遍历cols的值
|
for(var k=0; k<cols.length; k++) {
|
var _cols = cols[k];
|
var field = _cols.field;
|
var title = _cols.title;
|
var td = $('<td></td>');
|
if(field in _data) {
|
td = $('<td>'+_data[field]+'</td>');
|
}
|
// 设置值
|
td.attr('data-field', field);
|
td.attr('data-title', title);
|
tr.append(td);
|
}
|
tr.append($('<td data-field="visibility" style="visibility: hidden"></td>'));
|
// 生成tr
|
tbody.append(tr);
|
}
|
|
// 返回结果
|
return tbody;
|
}
|
,updateAll: function(field, data) {
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(field in _data) {
|
var fVal = _data[field];
|
this.update(field, fVal, _data); // 更新表格
|
}else {
|
console.log('该条数据不存在标识位'+field);
|
console.log(_data);
|
}
|
}
|
}
|
,update: function(field, fVal, data) {
|
var rowsInfo = this._getRows(field, fVal);
|
// 如果获取到了行号
|
if(rowsInfo.code==1) {
|
var rows = rowsInfo.data; // 数据所在的行号
|
this.updateTr(rows, data);
|
}else {
|
console.log(rowsInfo.msg);
|
}
|
}
|
,updateTr: function(rows, data) {
|
var tbody = this.el.find('tbody');
|
var tr = tbody.find('tr').eq(rows);
|
var td = tr.find('td');
|
// 遍历td的内容
|
td.each(function() {
|
var field = $(this).data('field');
|
var title = $(this).data('title');
|
// 判断当前属性是否在data中
|
if(field in data) {
|
// 生成html标记字符串
|
var tdHtml = '<b class="ui-table-cell-label">'+title+'</b>';
|
tdHtml += data[field];
|
$(this).html(tdHtml);
|
}
|
});
|
|
}
|
,_getRows: function(field, fVal) { // 根据标识位的值获取当前数据所在的行
|
var rs = {
|
code: 0
|
,data: -1
|
,msg: '未获取到标识位'+field+':'+fVal+'所在的行'
|
};
|
var data = this.data;
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(field in _data) {
|
var _fVal = _data[field]; // 获取当前数据的标识位的值
|
if(_fVal == fVal) {
|
rs.code = 1; // 标识获取到了下标
|
rs.data = i; // 下标的值
|
}
|
}
|
}
|
|
// 返回结果
|
return rs;
|
}
|
};
|
