//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');
}

// 创建非自适应表格
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');
}


//显示加载器  
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) {
        let cols = opts.cols;
        let data = opts.data;
        let 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(let i=0; i<cols.length; i++) {
            let _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(let i=0; i<data.length; i++) {
            let _data = data[i];
            let tr = $('<tr></tr>');
            // 遍历cols的值
            for(let k=0; k<cols.length; k++) {
                let _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(let i=0; i<data.length; i++) {
            let _data = data[i];
            if(field in _data) {
                let fVal = _data[field];
                this.update(field, fVal, _data);        // 更新表格
            }else {
                console.log('该条数据不存在标识位'+field);
                console.log(_data);
            }
        }
    }
    ,update: function(field, fVal, data) {
        let rowsInfo = this._getRows(field, fVal);
        // 如果获取到了行号
        if(rowsInfo.code==1) {
            let rows = rowsInfo.data;       // 数据所在的行号
            this.updateTr(rows, data);
        }else {
            console.log(rowsInfo.msg);
        }
    }
    ,updateTr: function(rows, data) {
        let tbody = this.el.find('tbody');
        let tr = tbody.find('tr').eq(rows);
        let td = tr.find('td');
        // 遍历td的内容
        td.each(function() {
            let field = $(this).data('field');
            let 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(let i=0; i<data.length; i++) {
            let _data = data[i];
            if(field in _data) {
                let _fVal = _data[field];       // 获取当前数据的标识位的值
                if(_fVal == fVal) {
                    rs.code = 1;        // 标识获取到了下标
                    rs.data = i;        // 下标的值
                }
            }
        }

        // 返回结果
        return rs;
    }
};