Merge branch 'dev_lxw' of https://gitlab.com/whyclxw1/gx_tieta.git into dev...

81041

2019-01-18 5fe2efb71f6ad809a1cfc59beab18bbea99fff5e

 gx_tieta/WebRoot/mobil/js/tbl.js

@@ -231,3 +231,189 @@
      $(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;

    }

};