corick
corick
采纳率100%
2021-03-05 14:50

大佬,extj s6里怎么实现像这样的表格吗?单行显示俩行数据

50
已采纳

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

8条回答

  • showbo GoCityPass新加坡曼谷通票 1月前

    extjs4-你可以操作DOM来合并,ext5+ grippanel的数据行结构变了,每行是一个table,不是4-的tr作为数据行了。。所以要实现你这种合并效果搞不了,要从加载的数据源重新生成table。

    点赞 1 评论 复制链接分享
  • bill20100829 歇歇 1月前
  • Jacob946 code:9527 1月前
    ​
    //rowSpan 是行合并
    //colSpan 是列合并
    //num 是需要合并的行数,或需要合并的列数
    //组件名称.setAttribute('rowSpan',num),
    //进行循环判断
    for(var i in cols) 
    {
        if(i=="列1")
        {
            组件名称.setAttribute('rowSpan',num);
            列1.text=childNodes[列名].innerText;
        }
        else if(i="列4")
        {
            组件名称.setAttribute('rowSpan',num);
            列4.text=childNodes[列名].innerText;
        }
        else if(i="列5")
        {
            组件名称.setAttribute('rowSpan',num);
            列5.text=childNodes[列名].innerText;
        }
    }
    
    
    //希望能对你有所启发
    
    ​
    点赞 评论 复制链接分享
  • jslang 天际的海浪 1月前
    点赞 评论 复制链接分享
  • jslang 天际的海浪 1月前
  • jslang 天际的海浪 1月前
    <table id="tab" border="1" width="500">
    	<tr>
    		<th>第一列</th>
    		<th>第二列</th>
    		<th>第三列</th>
    	</tr>
    	<tr>
    		<td>A</td>
    		<td>A1</td>
    		<td>A11</td>
    	</tr>
    	<tr>
    		<td>A</td>
    		<td>A1</td>
    		<td>A12</td>
    	</tr>
    	<tr>
    		<td>A</td>
    		<td>A2</td>
    		<td>A21</td>
    	</tr>
    	<tr>
    		<td>A</td>
    		<td>A2</td>
    		<td>A22</td>
    	</tr>
    	<tr>
    		<td>B</td>
    		<td>B1</td>
    		<td>B11</td>
    	</tr>
    	<tr>
    		<td>B</td>
    		<td>B1</td>
    		<td>B12</td>
    	</tr>
    	<tr>
    		<td>B</td>
    		<td>B2</td>
    		<td>B21</td>
    	</tr>
    	<tr>
    		<td>B</td>
    		<td>B2</td>
    		<td>B22</td>
    	</tr>
    </table>
    
    <script type="text/javascript">
    
         //tbl:table对应的dom元素,
         //beginRow:从第几行开始合并(从0开始),
         //endRow:合并到哪一行,负数表示从底下数几行不合并
         //colIdxes:合并的列下标的数组,如[0,1]表示合并前两列,[0]表示只合并第一列
         function mergeSameCell(tbl,beginRow,endRow,colIdxes){
             var colIdx = colIdxes[0];
             var newColIdxes = colIdxes.concat();
             newColIdxes.splice(0,1)
             var delRows = new Array();
             var rs = tbl.rows;
             //endRow为0的时候合并到最后一行,小于0时表示最后有-endRow行不合并
             if(endRow === 0){
                 endRow = rs.length - 1;
             }else if(endRow < 0){
                 endRow = rs.length - 1 + endRow;
             }
             var rowSpan = 1; //要设置的rowSpan的值
             var rowIdx = beginRow; //要设置rowSpan的cell行下标
             var cellValue; //存储单元格里面的内容
             for(var i=beginRow; i<= endRow + 1; i++){
                 if(i === endRow + 1){//过了最后一行的时候合并前面的单元格
                     if(newColIdxes.length > 0){
                         mergeSameCell(tbl,rowIdx,endRow,newColIdxes);
                     }
                     rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
                 }else{
                     var cell = rs[i].cells[colIdx];
                     if(i === beginRow){//第一行的时候初始化各个参数
                         cellValue = cell.innerHTML;
                         rowSpan = 1;
                         rowIdx = i;
                     }else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格
                         cellValue = cell.innerHTML;
                         if(newColIdxes.length > 0){
                             mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
                         }
                         rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
                         rowSpan = 1;
                         rowIdx = i;
                     }else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格
                         rowSpan++;
                         delRows.push(i);
                     }
                 }
             }
             for(var j=0;j<delRows.length; j++){
                 rs[delRows[j]].deleteCell(colIdx);
             }
        }
    
    	mergeSameCell(document.getElementById("tab"),1,0,[0,1]);
    </script>
    
    
    点赞 评论 复制链接分享
  • weixin_41908433 知雀的天空 1月前

    <tdrowspan="2">   </td>

    点赞 评论 复制链接分享
  • bosaidongmomo bosaidongmomo 1月前
    点赞 评论 复制链接分享