茗洋芳竹Easy UI 部分问题解决系列专题[datagrid 复杂表头]-阿里云开发者社区

开发者社区> 杰克.陈> 正文

茗洋芳竹Easy UI 部分问题解决系列专题[datagrid 复杂表头]

简介: 原文 http://www.cnblogs.com/Fresh-Air/archive/2013/05/14/3077948.html 1. 合并 datagrid 的表头信息【基础】,茗洋芳竹尝试Easy API的例子的延伸 部分效果图: 部分代码: $('#dg').
+关注继续查看

原文 http://www.cnblogs.com/Fresh-Air/archive/2013/05/14/3077948.html

1. 合并 datagrid 的表头信息【基础】,茗洋芳竹尝试Easy API的例子的延伸

部分效果图:

部分代码:

复制代码
 $('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60],
            columns: [[
            { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 2 },
            { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
            { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
            { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
            { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
            { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 },
            { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 2 },
            { title: '状态', align: 'center', colspan: 5 },
            { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 2,
                 formatter: function (value, row, index) {
                     var a = "<a href='javascript:view(" + value + ")'>查看</a>";
                     return a;
                 }
            }
            ], [
                { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
                { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
                { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
                { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
                { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter }

            ]
           ]
        });
复制代码

 看代码你应该就能看懂了。

 

 

======================== 我是茗洋芳竹,欢迎加群 :193247142 (WEB丰富资源群)==========

升级一下,此时你就要懂的原理了

效果图:

 

下面我来讲一下代码,让你随心所欲的可以使用了

复制代码
 1  $('#dg').datagrid({
 2             url: getUrl(),
 3             method: 'post',
 4             fitColumns: true,
 5             pagination: isPage,
 6             rownumbers: true,
 7             singleSelect: true,
 8             nowrap: false,
 9             pageList: [15, 30, 45, 60],
10             columns: [[
11             { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 2 },
12             { title: '基本信息', align: 'center', colspan: 5 },
13             { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 2 },
14             { title: '状态', align: 'center', colspan: 5 },
15             { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 2,
16                  formatter: function (value, row, index) {
17                      var a = "<a href='javascript:view(" + value + ")'>查看</a>";
18                      return a;
19                  }
20             }
21             ], [
22                 { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
23                 { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
24                 { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
25                 { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
26                 { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 }
27                  ,
28                 { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
29                 { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
30                 { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
31                 { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
32                 { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter },
33 
34 
35             ]
36 
37            ]
38         });
复制代码

我们重点看从columns属性:

整体结构是这样子的      [   [一些列A],[一些列B]   ]

首先我们的表头是两行,所以,在A列系列里面,rowspan:2

到了合并列的地方,我们只显示表头的文字,添加 title属性,并使用colspan等于了5,接下来我们又添加了一个列来测试,然后又到了一个合并的地方,colspan=5

这两个合并的地方,我们可以理解为 一个占位符,每个占5列。

好了,接下来,我们看第二个[B列系列]

这里面的顺序还是很重要的,从上往下,共有10个,也就是对应上面的,5,5长度的两个占位符,1-5给第一个使用了colspan的位置,6-10给第二个

不知道你懂了没有?

 

 

======================== 我是茗洋芳竹,欢迎加群 :193247142 (WEB丰富资源群)==========

再升级一下,这下要看你的理解了,你真的要掌握技巧了

效果图:

代码:

复制代码
 $('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60],
            columns: [
            [
            { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 3 },
            { title: '基本信息', align: 'center', colspan: 5 },
            { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 3 },
             { title: '状态', align: 'center', colspan: 5 },
            { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 3,
                formatter: function (value, row, index) {
                    var a = "<a href='javascript:view(" + value + ")'>查看</a>";
                    return a;
                }
            }
            ],[
                { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
                { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
                { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
                { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
                { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 }
                 ,
                { title: '基本状态', align: 'center', colspan: 3 },
                { title: '高级状态', align: 'center', colspan: 2 }

           ],
           [
                { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
                { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
                { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
                { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
                { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter },
           ]

           ]
        });
复制代码

对的,我们一共三行,第一行里面填充了2个占位符,每个长度为5

我们在第二长度5的占位符里面,继续开辟占位符,基本状态和高级状态,那么这些面的具体列在哪里呢

对的,我们继续在下面添加一个[上一个[]里面的占位列],还是跟顺序有关。

懂了吗?

======================== 我是茗洋芳竹,欢迎加群 :193247142 (WEB丰富资源群)==========

独家偏方,自定义表头,注意这里列可不能随便设宽度了,否则宽度会错位的,不过有办法解决的

①定义一个 table,并使用 class="easyui-datagrid"

table定义,自己定义一个表头

②开始javascript,补充剩余的属性

复制代码
$('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60]
        });
复制代码

当然你也可以写在 上面的table中

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  

效果图:

 

我是茗洋芳竹,欢迎加群 :193247142 (WEB丰富资源群)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4076 0
【DATAGUARD 学习】学习DATAGUARD 过程中遇到的问题
错误1:ORA-16057: DGID from server not in Data Guard configuration原因:主库没有设置参数log_archive_config解决方法*.
479 0
Gridview的item含有checkbox,setOnItemClickListener方法失效的问题
在开发中我们常常遇到一些莫名奇妙的问题,就比如Gridview的item含有checkbox,setOnItemClickListener方法失效的问题。 刚开始网上搜了一下,如http://my.oschina.net/fuckboogie/blog/346202 按这个没办法解决我上面的问题,于是我在item的子布局里面新增了 &lt;span style="font-size
755 0
【DataGuard】10GR2 DataGuard的几个redo log相关问题
1.备库启动报redo log不存在的问题: 错误信息: Errors in file /home/oracle/admin/kgbdwmyj/bdump/kgbdwmyj_mrp0_11986.
685 0
一起谈.NET技术,.NET并行(多核)编程系列之七 共享数据问题和解决概述
  之前的文章介绍了了并行编程的一些基础的知识,从本篇开始,将会讲述并行编程中实际遇到一些问题,接下来的几篇将会讲述数据共享问题。   本篇的议题如下:   1.数据竞争   2.解决方案提出   3.
636 0
silverlight问题解决: 对话框必须由用户启动 SecurityException: Dialogs must be user-initiated
转自:http://www.dotblogs.com.tw/junegoat/archive/2010/10/07/securityexception-dialogs-must-be-user-initiated.
877 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4519 0
手动绑定SQLDataSource到GridView后分页的问题(转)
由于GridView的数据源是后台CS文件中代码绑定的。所以程序运行时,点击分页数后没有反应。解决办法如下: using System;using System.Data;using System.Configuration;using System.
670 0
SpringMVC的JSP页面中中EL表达式不起作用的问题解决
今天,我在写SpringMVC代码的时候遇到了一个问题,就是在jsp页面中使用el表达式取值,取不到值,但是使用jsp中嵌套java代码可以取到值。
861 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载