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

 

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

您要找的是这个吗

https://blog.csdn.net/qq_37512323/article/details/88694768

 

第二个链接也能在html写excel

https://www.cnblogs.com/liuxianan/p/js-excel.html

http://demo.haoji.me/2017/02/08-js-xlsx/

<tdrowspan="2">   </td>

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

 

https://www.cnblogs.com/exmyth/archive/2013/04/18/3029609.html

https://www.pianshen.com/article/7580296219/

https://www.jb51.net/article/94597.htm

​
//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;
    }
}


//希望能对你有所启发

​

https://blog.csdn.net/T_zm_cross/article/details/51852554