Jqgrid合併單元格，左右合併，上下合併
先看樣例，下圖為普通html表格的合併單元格，程式碼在下面，把他儲存為html檔案開啟就行
縱向合併：rowspan:a合併a行並表示，需要把後面a-1的單元格隱藏display:none
橫向合併：colspan:a合併a行並表示 需要把後面a-1的單元格隱藏display:none
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格顯示</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0" width="120px"> <tr> <td colspan="2">1</td> <td style="display:none">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="2">7</td> <td>8</td> <td>9</td> </tr> <tr> <td style="display:none">10</td> <td>11</td> <td>12</td> </tr> </table> </body> </html>
之後我們來說jqgrid的合併
原理其實是一樣的，只是jqgrid是動態載入資料的，所以我們得動態的給每個需要合併的單元格設定id
cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合併單元格
return 'id=\'id' + rowId + "\'";
}之後是jqgrid完成後自動呼叫的一個方法：
gridComplete: function() { //在gridComplete呼叫合併方法 var gridName = "gridTable"; //動態合併縱行 MergerRowspan(gridName, 'id'); //寫死合併橫行（因為橫行一般是我們定義的固定數， //所以你可以根據我下面的例子自己加條件，合併哪些橫行，我這裡就寫死了，哈哈） MergerColspan(gridName,8, 'id','userName'); }
這裡是上面呼叫函式的程式碼
合併縱行無需修改，直接呼叫
//公共呼叫方法合併單元格（無需修改） function MergerRowspan(gridName, CellName) { //得到顯示到介面的id集合 var mya = $("#" + gridName + "").getDataIDs(); //當前顯示多少條 var length = mya.length; for (var i = 0; i < length; i++) { //從上到下獲取一條資訊 var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]); //定義合併行數 var rowSpanTaxCount = 1; for (j = i + 1; j <= length; j++) { //和上邊的資訊對比 如果值一樣就合併行數+1 然後設定rowspan 讓當前單元格隱藏 var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]); if (before[CellName] == end[CellName]) { rowSpanTaxCount++; $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' }); } else { rowSpanTaxCount = 1; break; } $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount); } } }
合併橫行，可以根據需要重寫這個方法
//公共呼叫方法合併單元格（根據需要修改修改）
function MergerColspan(gridName,rowId,id,CellName) {
$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
$("#" + CellName + "" + rowId + "").attr("colspan", 2);
}就是這樣了，下面貼一下完整程式碼和示例
示例：
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jqgrid</title>
<!-- jqgrid -->
<link rel="stylesheet" href="static/css/jqgrid/ui.jqgrid-bootstrap.css"/>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<!-- 表格jqgrid -->
<script src="static/js/jquery-1.9.1.js"></script>
<script src="static/js/jqgrid/jquery.jqGrid.min.js"></script>
<script src="static/js/jqgrid/grid.locale-cn.js"></script>
<script src="static/js/index.js"></script>
</head>
<body>
<table id="gridTable" border="1" cellspacing="0" cellpadding="0"></table>
</body>
</html>js
$(function(){
jQuery("#gridTable").jqGrid({
datatype: "local",
height: 250,
colNames:['編號','使用者名稱', '性別', '郵箱', 'QQ','手機號','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int",
cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合併單元格
return 'id=\'id' + rowId + "\'";
}},
{name:'userName',index:'userName', width:90,cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合併單元格
return 'id=\'userName' + rowId + "\'";
}},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:5,
rowList:[5,10,15],
pager:"#gridPager",
caption: "第一個jqGrid例子",
gridComplete: function() {
//在gridComplete呼叫合併方法
var gridName = "gridTable";
MergerRowspan(gridName, 'id');
MergerColspan(gridName,8, 'id','userName');
}
}).navGrid('#pager2',{edit:false,add:false,del:false});
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"[email protected]",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"1",userName:"李四",gender:"女",email:"[email protected]",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"[email protected]",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"馬六",gender:"女",email:"[email protected]",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"趙錢",gender:"男",email:"[email protected]",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"[email protected]",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"[email protected]",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"王先生",gender:"男",email:"[email protected]",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孫先",gender:"男",email:"[email protected]",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
//公共呼叫方法合併單元格（無需修改）
function MergerRowspan(gridName, CellName) {
//得到顯示到介面的id集合
var mya = $("#" + gridName + "").getDataIDs();
//當前顯示多少條
var length = mya.length;
for (var i = 0; i < length; i++) {
//從上到下獲取一條資訊
var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
//定義合併行數
var rowSpanTaxCount = 1;
for (j = i + 1; j <= length; j++) {
//和上邊的資訊對比 如果值一樣就合併行數+1 然後設定rowspan 讓當前單元格隱藏
var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
if (before[CellName] == end[CellName]) {
rowSpanTaxCount++;
$("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
}
}
}
//公共呼叫方法合併單元格（根據需要修改修改）
function MergerColspan(gridName,rowId,id,CellName) {
$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
$("#" + CellName + "" + rowId + "").attr("colspan", 2);
}
});
其他的引用就自己下了，這裡不好上傳。
相關推薦
ThinkPHP呼叫Excel類的基本用法設定（合併單元格,Sheet表標題，行高，列寬，字型，邊框，樣式）
合併單元格+字型樣式 //合併單元格 $objPHPExcel->getActiveSheet(0)->mergeCells('A1:R1'); //為合併單元格新增標題 $objPHPExcel->setActiveSheetIndex(0)
table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）
PS:該程式碼用於學習，大部分不是原創，在他（她）人程式碼的基礎上修改成自己想實現的效果，來源不明，因此沒有加轉載連結，如有問題，先在這裡抱歉，請聯絡我刪除。 內容實現的效果與上一篇一樣，但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性，所以這個版本可以相容IE的高版本和低版本，測試用的版本時IE8
POI合併單元格邊框顯示問題，笨方法解決。如有更好的方法，歡迎留言，求指教告知
網上找了好多關於POI合併單元格的文章，無奈智商捉雞，玩不出來，最後弄了個最麻煩的 //匯出excel，含有合併單元格 @Testpublic void exoprtExc_MergedRegion() {String realpath = PoiTemplate.cla
AsposeWords操作表格合併單元格(word已經有的table 列 合併 指定兩個單元格 既可以橫向合併也可以縱向合併)-http://www.xiaoguo123.com/p/aspose_w
20180725 親測可以 xjh 強大的AsposeWords for java不僅支援建立表格，還支援合併單元格。今天就簡明扼要記錄下如何實現合併單元格。 大家可以完全套用本文提供的程式碼，只需要提供開始和結束的單元格即可實現合併，無需理解複雜的過程，真是簡潔好用啊。 此
Jqgrid合併單元格，左右合併，上下合併
先看樣例，下圖為普通html表格的合併單元格，程式碼在下面，把他儲存為html檔案開啟就行 縱向合併：rowspan:a合併a行並表示，需要把後面a-1的單元格隱藏display:none 橫向合併：colspan:a合併a行並表示 需要把後面a-1的單元格隱藏di
vue中 表頭th 合併單元格，且表格列數不定的動態渲染方法
吐槽 今天，在vue中遇到 複雜表格的渲染 ，需要合併表頭的單元格，且合併單元格的那列還是動態資料，也就是說你不知道會有多少組要合併起來，哎，我也有點說不清楚，廢話不多說了，看程式碼把： 程式碼示例 data資料是後端介面返回的，其中的資料格式是這樣的： [ { "studentId
Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行-https://www.cnblogs.com/gylspx/p/5961070.html
Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行 Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行 模版格式，圖格式是最簡單的格式，但實際效果不是這種，實際效果圖如圖2 圖2 ，注意看紅色部分，一對一是正常的，但是有一對多的訂單，就得把前
jxl生成表格（合併單元格，字型，樣式。。。）
public static String testEx() { // a, 計算路徑 SimpleDateFormat sdf = new SimpleDateFormat("/yyyy-MM-dd/"); String datePath = sdf.form
JS生成表格，合併單元格
在網上找了這麼多都沒有JS生成表格然後JS操作合併單元格的，或者是別人寫的太負責了，又不想去理解，所以就自己動手寫了個簡單點的。 其實程式碼也不多，思路清晰就基本上可以了。一開始的時候是被colspan
HSSFWorkbook——匯出excel，動態合併單元格
一 前言 開發中，對於匯出一個excel表格這樣的功能很常見，這裡談談我所知道的相關知識 二 需求 匯出某個套餐所關聯的所有專案的一個Excel表格 三 HSSFWorkbook //建立一個Excel檔案 HSSFWorkbook&
table：表格設定table-layout：fixed屬性後，如果表格中第一行出現合併單元格，那麼後面tr中的td設定寬度無效
針對上面的問題，現在又兩種解決方法： 1 在表格的第一行設定一個隱藏的行如下:<tablestyle="table-layout: fixed; width:100%;"> <trstyle="display:none"> <
利用Freemarker生成doc檔案（包含list迴圈，ifelse判斷，合併單元格，嵌入表格單元格字數過多報錯等）
1、利用office等軟體開啟doc文件，另存為word2003xml形式的檔案。 2、修改xml中的需要動態生成的值，Freemarker變數為${data}格式的，修改完改成ftl字尾，複製到載入
phpexcel的居中顯示，合併單元格
phpexcel的居中顯示 所有單元格居中： $objPHPExcel->getDefaultStyle()->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZO
關於POI設定SHEET名稱以及合併單元格，複製單元格方法
//SHEET命名 Workbook workbook = ReadExcel.openExcleFile(srcXlsxPath); // 獲取合同到期工作簿 Sheet sheet1 = workbook.getSheetAt(0);// 獲取頁籤 wo
Java匯出Excel表，POI 實現合併單元格以及列自適應寬度
//字型 HSSFFont font = workbook.createFont(); font.setFontName("仿宋_GB2312"); font.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);//粗體顯示
poi匯出excel時，合併單元格後，求和不正確，即“假”合併
excel中所謂“真假”合併單元格 真合併：我們選擇一段連續的單元格,點選合併,這時候,EXCEL會提示如果合併只會顯示第一個單元格的資料,而且其他單元的的資料也會沒掉. 假合併：如果我們用一個已經合併的單元格,格式刷要合併的單元格,這時候沒有提示資料丟失的.事實上,這時候
Laravel Excel實現Excel/CSV檔案匯入匯出的功能詳解（合併單元格，設定單元格樣式）
Laravel Excel實現Excel/CSV檔案匯入匯出（合併單元格，設定單元格樣式） 這篇文章主要給大家介紹了關於在Laravel中如何使用Laravel Excel實現Excel/CSV檔案匯入匯出功能的相關資料，文中通過示例程式碼介紹的非常詳細，對大
java使用POI匯入Excel，並判斷合併單元格處，停止迴圈
public class ExcelCell { public static boolean isMergedRegion(HSSFSheet sheet,int row ,int colu
java將資料匯出，帶有合併單元格的excel--jxls技術
jxls技術可以生成各種樣式的報表，非常好用，深深地喜歡上了這個。說起用這個還是比較有意思的，當時專案有個匯出表格的功能，但是沒能合併單元格，客戶不是很滿意，當時專案中大家都說弄不了，我想著自己網上查查吧，就查到了這個，試了一下午完成了，很有成就感哪，哈哈。
java poi匯出Excel表，合併單元格
其他參考文章： http://www.cnblogs.com/bmbm/archive/2011/12/08/2342261.html http://www.cnblogs.com/xuyuanjia/p/5886056.html 這是一個struts2的act