jqgrid单元格合并

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!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 id="head1" runat="server">

    <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: "", 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: "", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },

                    { id: "", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },

                    { id: "", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },

                    { id: "", invdate: "2007-10-04", name: "test7", note: "note7", amount: "300.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },

                    { id: "", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },

                    { id: "", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },

                    { id: "", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },

                    { id: "", invdate: "2007-09-10", name: "test12", note: "note12", amount: "300.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },

                    { id: "", 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: "", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },

                    { id: "", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },

                    { id: "", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-06", name: "test6", note: "note6", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },

                    { id: "", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },

                    { id: "", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },

                    { id: "", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },

                    { id: "", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },

                    { id: "", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },

                    { id: "", 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: , align: 'center', sorttype: 'int' },

                    { name: 'invdate', index: 'invdate', width: , align: 'center', sorttype: 'date',

                        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'

                    },

                    { name: 'name', index: 'name', width: ,

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            //合并单元格

                            return 'id=\'name' + rowId + "\'";

                            //if (Number(rowId) < 5) { return ' colspan=2' }

                        }

                    },

                    { name: 'nameB', index: 'nameB', width: ,

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            //if (Number(rowId) < 5) { return ' style="display:none;"' }

                        }

                    },

                    { name: 'amount', index: 'amount', width: , formatter: 'number', align: 'right',

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            //合并单元格

                            return 'id=\'amount' + rowId + "\'";

                        }

                    },

                    { name: 'tax', index: 'tax', width: , formatter: 'number', align: 'right',

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            //合并单元格

                            return 'id=\'tax' + rowId + "\'";

                        }

                    },

                    { name: 'total', index: 'total', width: , formatter: 'number', align: 'right',

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            //合并单元格

                            return 'id=\'total' + rowId + "\'";

                        }

                    },

                    { name: 'closed', index: 'closed', width: , align: 'center', formatter: 'checkbox',

                        edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }

                    },

                    { name: 'ship_via', index: 'ship_via', width: , align: 'center', formatter: 'select',

                        edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },

                        //①给当前想合并的单元格设置id

                        cellattr: function(rowId, tv, rawObject, cm, rdata) {

                            return 'id=\'ship_via' + rowId + "\'";

                        }

                    },

                    { name: 'note', index: 'note', width: , sortable: false }

                ],

                rowNum: ,

                rowList: [, , , ],

                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 = ; i < length; i++) {

                    //从上到下获取一条信息

                    var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);

                    //定义合并行数

                    var rowSpanTaxCount = ;

                    for (j = i + ; 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 = ;

                            break;

                        }

                        $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);

                    }

                }

            }

        }); 

        //]]>  

    </script>  

</head>

<body>

    <table id="list">

        <tr>

            <td />

        </tr>

    </table>

    <div id="pager">

    </div>

</body>

</html>

jqgrid单元格合并的更多相关文章

ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析首先创建一个Grid ...
NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
asp.net使用控件datagrid实现表头单元格合并
合并的要点: 1.datagid的单元格合并原理是table中tr,td的布局实现; 2.合并的时机实在其datagridcreate事件中实现; 3.认识一个对象TableCellCollectio ...
DataGridView单元格合并
本文章转载:http://www.cnblogs.com/xiaofengfeng/p/3382094.html 图: 代码就是如此简单文件下载:DataGridView单元格合并源码也可以参考: ...
devexpress实现单元格合并以及依据条件合并单元格
1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条 ...
SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格图 4.1 1.1.2. 导出excel合并单元格图 4.2 1.2. 调用说 ...
关于table动态添加数据单元格合并数组合并
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName&qu ...
excel技巧--单元格合并与拆分
如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...
element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...

随机推荐

如何在Windows中使用netsh命令进行端口转发
自Windows XP开始,Windows中就内置网络端口转发的功能.任何传入到本地端口的TCP连接(IPv4或IPv6)都可以被重定向到另一个本地端口,或远程计算机上的端口,并且系统不需要有一个专门 ...
OpenACC parallel
▶ 使用 kernels 导语并行化 for 循环 ● 同一段代码,使用 kernels,parallel 和 parallel + loop 进行对比 #include <stdio.h> ...
leetcode326
public class Solution { public bool IsPowerOfThree(int n) { && ( % n == ); } } https://leetc ...
J2SE 8的输入输出--Path/Paths File/Files; FileSystems 类的用法
Path的简单用法 //1. Path 正常用法 Path path = Paths.get("src/main/resource/zip"); logger.debug(path ...
AS3 在不规则区域内拖动
原理: 1.确保拖动对象在鼠标点上,如果不确定会出现瞬间移动的感觉 2.确保触碰到非通行区域,跳回到没触碰的点源码: import flash.events.MouseEvent; import f ...
转载：MySQL和Redis 数据同步解决方案整理
from: http://blog.csdn.net/langzi7758521/article/details/52611910 最近在做一个Redis箱格信息数据同步到数据库Mysql的功能. 自 ...
自动选择最佳特征进行分类－SVM (Halcon)
HALCON12里的example,classify_pills_auto_select_features.hdev. 执行流程: 1.选取相关特征(本例选取color和region组的所有特征)(本 ...
迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
常见jsp跳转总结
这次做项目,用到几种不同的JSP跳转的方式,在此总结5中常用方法. 常用的跳转方式有以下几种: (1)href超链接标记,属于客户端跳转 (2)使用javascript完成,属于客户端跳转 (3)提交 ...
复习：使用HTML编写简单程序
今天我试着用HTML编写了九九乘法表代码如下浏览器显示如下 2.输出静夜思代码如下 2.浏览器显示

jqgrid单元格合并

jqgrid单元格合并的更多相关文章

随机推荐

热门专题