【JqGrid】jqgrid合并单元格

1、jqgrid官方的事件和方法
http://www.trirand.com/jqgridwik ... %5B%5D=gridcomplete
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
2、Demo如下：

代码看下面：

代码可以直接copy到一个.html文件里就可以运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Just simple local grid</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css" /><link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script><script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.src.js"></script><script type="text/javascript">//<![CDATA[$(document).ready(function() {var mydata = [{ id: "1", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "2", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },{ id: "4", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "300.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "300.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },{ id: "13", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "14", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "15", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },{ id: "16", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "17", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "18", invdate: "2007-09-06", name: "test6", note: "note6", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },{ id: "19", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },{ id: "20", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },{ id: "21", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },{ id: "22", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },{ id: "23", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },{ id: "24", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }],grid = $("#list");grid.jqGrid({datatype: 'local',data: mydata,colNames: ['Inv No', 'Date', 'Client A', 'Client B', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],colModel: [{ name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int' },{ name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'},{ name: 'name', index: 'name', width: 70,cellattr: function(rowId, tv, rawObject, cm, rdata) {//合并单元格return 'id=\'name' + rowId + "\'";//if (Number(rowId) < 5) { return ' colspan=2' }}},{ name: 'nameB', index: 'nameB', width: 70,cellattr: function(rowId, tv, rawObject, cm, rdata) {//if (Number(rowId) < 5) { return ' style="display:none;"' }}},{ name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right',cellattr: function(rowId, tv, rawObject, cm, rdata) {//合并单元格return 'id=\'amount' + rowId + "\'";}},{ name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right',cellattr: function(rowId, tv, rawObject, cm, rdata) {//合并单元格return 'id=\'tax' + rowId + "\'";}},{ name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right',cellattr: function(rowId, tv, rawObject, cm, rdata) {//合并单元格return 'id=\'total' + rowId + "\'";}},{ name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }},{ name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },//①给当前想合并的单元格设置idcellattr: function(rowId, tv, rawObject, cm, rdata) {return 'id=\'ship_via' + rowId + "\'";}},{ name: 'note', index: 'note', width: 100, sortable: false }],rowNum: 15,rowList: [10, 15, 20, 30],pager: '#pager',gridview: true,rownumbers: true,sortname: 'invdate',viewrecords: true,sortorder: 'desc',caption: 'Just simple local grid',height: '100%',gridComplete: function() {//②在gridComplete调用合并方法var gridName = "list";Merger(gridName, 'amount');Merger(gridName, 'tax');Merger(gridName, 'total');Merger(gridName, 'name');Merger(gridName, 'ship_via');}});//公共调用方法function Merger(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);}}}});//]]></script></head>
<body><table id="list"><tr><td /></tr></table><div id="pager"></div>
</body>
</html>

在原先代码的基础上进行有优化提高了效率

function Merger(gridName, CellName) {  //得到显示到界面的id集合  var mya = $("#" + gridName + "").getDataIDs();  //数据总行数  var length = mya.length;  //定义合并行数  var rowSpanTaxCount = 1;  for (var i = 0; i < length; i += rowSpanTaxCount) {  //从当前行开始比对下面的信息  var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);  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 {  break;  }  }  $("#" + gridName + "").setCell(mya[i], CellName, '', '', { rowspan: rowSpanTaxCount });  }
}

调用方法：

[javascript] view plaincopy

gridComplete: function (data) {
Merger('listname', 'columnname');
}

【JqGrid】jqgrid合并单元格相关推荐

python 2x xlrd使用merged_cells 读取的合并单元格为空
一个简单的excel 如下代码如下 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys ...
cxgrid中纵横单元格合并_被合并单元格折磨疯的我，真后悔没早点知道这个Excel技巧！...
在大家日常的工作中,经常会用到Excel合并单元格,然而合并单元格其实只是美化了表格,它会使我们后续的统计工作遇到很多麻烦,今天就给大家提供两个解决这个问题的思路. 01 合并单元格的基本操作方法在 ...
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
ExtJs grid合并单元格
extjs中,如果要输出一些有合并单元格的表格,要怎么做呢?如图所示: 从网上找了个例子,其主要思想是表格的store装载完毕后,随即对这个grid的td进行一个个的控制,用的方法也是原始的javas ...
java excel导出 jxl_java使用JXL导出Excel及合并单元格
jxl是一个韩国人写的java操作excel的工具,在开源世界中,有两套比较有影响的API可供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文支持 ...
EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
python读写excel(合并单元格)
读取 import xlrddef read_excel(file_path):# 获取数据data = xlrd.open_workbook(file_path)# 获取所有sheet名字sheet ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
easyexcel读取合并单元格内容_一周一个小技巧 | excel不会核对内容？不会填充合并单元格？7个实用的EXCEL技巧，一起来看看吧...
上方蓝色字,获取更多就业信息~ 1 两列姓名核对如果要核对表二中的姓名在表一中有没有出现,一个公式马上搞定.=IF(COUNTIF(A:A,C2),"是","否&qu ...

【JqGrid】jqgrid合并单元格

【JqGrid】jqgrid合并单元格相关推荐

最新文章

热门文章