Extjs grid 合并行

最新推荐文章于 2021-02-15 20:18:30 发布

任彦章

最新推荐文章于 2021-02-15 20:18:30 发布

阅读量2.9k

点赞数 1

分类专栏：开发日志文章标签： extjs 合并

本文链接：https://blog.csdn.net/u010631302/article/details/78500206

版权

开发日志专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在实际开发中可能会遇到grid中要合并单元格的操作，可能是合并横向单元格，也可能是合并列的单元格，网络上有很多demo，大多是用css样式去控制，但是这样的话代码就会显得很多，不容易阅读，我们看到html <table> 类似 <td rowspan="2"> 的代码表示 table 该列向下合并两行。那么extjs grid 基本结构也是table ，我们可尝试采用这样的方式来控制。小白也在网上找了一些方法，并加以修改整合，写出以下demo，我会用详细的注释加以说明。

1 请自行正确引入关键js和css

以下是全部代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head id="Head1" runat="server">
<title>ExtJs</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>

</head>
<script type="text/javascript">
Ext.onReady(function(){

var mydata1 = new Ext.data.SimpleStore({

fields:[
'id',
'title',
'director',
{name:'released',type:'data',dataFormat:'Y-m-d'},
'genre',
'tagline'],
data:[[
'1',"office1","mike1","1999-02-19",'1',"work","19.98",'1'
],[
'2',"office1","mike1","1999-02-19",'1',"work","19.98",'1'
],[
'3',"office1","mike1","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office2","mike2","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office2","mike2","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office3","mike3","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office3","mike3","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office3","mike3","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office4","mike4","1999-02-19",'1',"work","19.98",'1'
],[
'4',"office4","mike4","1999-02-19",'1',"work","19.98",'1'
]]
});
var grid = new Ext.grid.GridPanel({
renderTo:document.body,
celType:'cellmodel',
freame:true,
title:'行合并测试',
width:600,
store:mydata1,
stripeRows:true, //斑马线效果
columns:[
{header:"title123",dataIndex:'title',editor: 'textfield'},
{header:"Director",dataIndex:'director',editor: 'textfield'},
{header:"date",dataIndex:'released',renderer:Ext.util.Format.dateRenderer('m/d/Y'),editor: 'datefield'},
{header:"Genre",dataIndex:'genre',editor: 'textfield'},
{header:"Tagline",dataIndex:'tagline',width: 198,fixed : true,editor: 'textfield'}
],
plugins:[
Ext.create('Ext.grid.plugin.RowEditing',{
clicksToEdit:2 //设置单击单元格编辑
})
],
tbar:[{
text:'合并',
id :'save',
handler:function(){
coalescing(grid,0,1); // 合并 grid 从第0行开始，第1列
coalescing(grid,0,0); // 合并 grid 从第0行开始，第0列
}
}]
});

function coalescing(grid, row, col) {
var id = grid.view.getId(); // 获取grid在document中的ID
var viewDiv = document.getElementById(id); // 获取div控件
var tables = viewDiv.getElementsByTagName("table"); //从 div中获取table控件，下面就对这个table[]操作
if (tables.length==0) {
return;
}
var trs = tables[0].getElementsByTagName("tr"); // 返回所有的行
var begin= trs[row].getElementsByTagName("td")[col]; //开始合并的单元格
var span= 1; // 向下合并的跨度
for (var i = row; i < trs.length; i++) {
var tr = trs[i];
var td = tr.getElementsByTagName("td")[col];
if (!td) {
continue;
}
if (td.innerHTML == begin.innerHTML) { // 如果单元格内容相等，就合并，否则跳过

if (i > row) {
span++;
begin.rowSpan = span; // 向下合并 num 行
begin.style["vertical-align"] = "middle"; //竖向居中
tr.removeChild(td); //删除被覆盖的单元格
}
}
else {
begin= td;
span= 1;
}
}
}

});
</script>
<body>
<div id="griddemo"> </div>
</body>
</html>