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中使 ...

随机推荐

不规则ROI的提取
在网上看到基于opencv3.0之前的API实现不规则ROI的提取,我自己试了一下发现opencv3.0不行,第一想法是我写的有问题,最后发现是API的改版.原理很简单. 目标:提取黑线作为ROI 原 ...
linux, Django安装MySQL-python==1.2.5报错
先安装 sudo apt-get install libmysqlclient-dev
(18/24) webpack实战技巧：快速入门webpack模块化配置
搞个小例子便于学习: 具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块. 1.在根目录新建一个config文件,然后新建webpac ...
(10/24) 图片跳坑大战--处理html中的图片
补充,在前面的服务启动执行命令中,我们在package.json中的配置信息为: "scripts": { "server": "webpack-de ...
leetcode324
class Solution { public void wiggleSort(int[] nums) { int[] temp = Arrays.copyOfRange(nums, 0, nums. ...
Struts2:No result defined for action com.yibai.user.action.LoginAction and result input
转自:https://zhidao.baidu.com/question/133574016.html 1 String 里面有5个static 常量分别是: ERROR INPUT LOGIN NO ...
使用AngularJS处理单选框和复选框的简单方法
在复选框中,可以绑定ng-model给false或者true值,即可选中或清除选中状态如下图而在单选框里就相对复杂一点,单选框要选中一个,就要给相同的name属性,然后绑定相同的ng-model, ...
css属性 writing-mode 改变文字书写方向
作为IE的私有属性之一,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性: #test{ -webkit-writing-mode: vertical-rl;/*horiz ...
浅谈实体类为什么要实现Serializable接口？
序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象的状态,重新创 ...
Others-接口集成方式
1. 异步通信方式可分为不互锁.半互锁和全互锁三种类型: a.不互锁方式主模块发出请求信号后,不等待接到从模块的回答信号,而是经过一段时间.确认从模块已收到请求信号后,便撤消其请求信号:从设备接到请 ...

jqgrid单元格合并

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

随机推荐

热门专题