移动片 告警相关页面 修复 数据表格样式问题

whychw

2020-05-04 499d189ed8642aad40f080b177edef52287128a7

移动片 告警相关页面 修复 数据表格样式问题

 gx_tieta/WebRoot/mobil/css/tbl.css

@@ -14,18 +14,21 @@
.tbl-container table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 10px;

}

.tbl-container table th{

    border: 1px solid #ccc;

    line-height: 1.8em;

    white-space: nowrap;

    /*white-space: nowrap;*/

    width: 30%;

    background-color: #ddd;

}



.tbl-container td{

    border: 1px solid #ccc;

    white-space: nowrap;

    /*white-space: nowrap;*/

    line-height: 1.8em;

    padding: 4px;

}



tbody tr.active {


 gx_tieta/WebRoot/mobil/eleWarnPrmSet.html

@@ -447,7 +447,8 @@
                        ArrTd.push(data[i].alm_low_en==0?'<input type="checkbox" disabled />':'<input type="checkbox" checked="checked" disabled />');                    //告警下限使能                    

                        Alm_id.push(data[i].alm_id);                        //告警ID数组    

                    }

                    createTbl(tblCon, arrTh, ArrTd);     	
                    createTbl(tblCon, arrTh, ArrTd);

                    // createTBL(tblCon, arrTh, ArrTd);

                }

                else{

                        $('#searchNull').popup('open');


 gx_tieta/WebRoot/mobil/elewarn2.html

@@ -228,6 +228,7 @@
                    if(pagecurr == 1){

                           //setPage();

                           createTbl(tblCon, arrTh, ArrWarnTb);

                           // createTBL(tblCon, arrTh, ArrWarnTb);

                    }else

                    {

                        addTrToTbl(tblCon, arrTh, ArrWarnTb);


 gx_tieta/WebRoot/mobil/js/tbl.js

@@ -1,5 +1,5 @@
//ThArr表格的头数据，TdArr表格的单元格数据

function createTbl(ele,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>');

@@ -55,6 +55,26 @@
    _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);

  }

}



// 创建非自适应表格

@@ -119,61 +139,83 @@
    @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 _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');

    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);

  }

}