核心：

rowspan:2   //占两行

colspan:3    //占三列

所有的colspan下的二级列表头，统一放在一个数组里。

文章一：

转载来源：https://blog.csdn.net/anaini1314/article/details/70849070

1效果图

2 html方式

3 javascript方式

文章二

javascript方式

https://blog.csdn.net/link_zz/article/details/10237099

https://www.cnblogs.com/nangong/p/ccdfabb7ccedbfa580acc6eeef286a27.html

如下图所示：

<script type="text/javascript">
    
    var datagrid;
    $(function(){
        $('#datagrid').datagrid({
            url:'{:U("Admin/Article/indexjson")}',
            title:'',
            iconCls:'icon-save',
            fit:true,
            //下面的page条
            pagination:true,
            pageSize:14,
            pageList:[14,20,30,40,50],
            //是否出现横向滚动条
            fitColumns:true,
            //数据折行
            nowrap:false,
            border:false,
            //帮你记住你选过的，做跨页删除
            idField:'id',
            columns:[[{
                        title:'',
                        field:'ck',
                        checkbox:true,
                        width:10,
                        rowspan:2
            },{
                        title:'ID',
                        field:'id',
                        width:50,
                        rowspan:2,
                        align:'center'
            },{
                        title:'文章标题',
                        field:'title',
                        width:350,
                        rowspan:2
            },{
                        title:'属性',
                        align:'center',
                        colspan:3
            },{
                        title:'所属栏目',
                        field:'name',
                        width:150,
                        rowspan:2
            },{
                        title:'所属专题',
                        field:'name',
                        width:150,
                        rowspan:2
            },{
                        title:'发布时间',
                        field:'time',
                        width:150,
                        align:'center',
                        rowspan:2
            }
        ],[
            {
                        title:'推荐',
                        field:'good',
                        width:50,
                        align:'center'
            },{
                        title:'热门',
                        field:'hits',
                        width:50,
                        align:'center'
            },{
                        title:'图',
                        field:'pic',
                        width:50,
                        align:'center'
            },
            
        ]],toolbar:"#tb"
        });
    });
    
    function doSearch(value){
        //alert('You input: ' + value);
         $('#datagrid').datagrid('load',{
             title:$('#tb').find('[name=search]').val()
        });

}
    
    function doAdd(){
        //alert('You input: ' + value);
        
    }
    
    function doSave(value){
        alert('You input: ' + value);
    }
    
    function doDel(value){
        alert('You input: ' + value);
    }
    
//    function doSearch(value){
//        alert('You input: ' + value);
//    }

</script>

数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。注意对象数组的嵌套书写形式
注意一下这两个属性是列字段嵌套的关键，必须有

rowspan:2   //占两行

colspan:3    //占三列

文章三

html方式

http://www.jeasyui.net/demo/334.html

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Column Group - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="../demo.css">

	<script type="text/javascript" src="../../jquery.min.js"></script>

	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>Column Group</h2>

	<p>The header cells can be merged. Useful to group columns under a category.</p>

	<div style="margin:20px 0;"></div>

	<table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"

			data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">

		<thead>

			<tr>

				<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>

				<th data-options="field:'productid',width:100" rowspan="2">Product</th>

				<th colspan="4">Item Details</th>

			</tr>

			<tr>

				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>

				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

				<th data-options="field:'attr1',width:240">Attribute</th>

				<th data-options="field:'status',width:60,align:'center'">Status</th>

			</tr>

		</thead>

	</table>

</body>

</html>

　　

easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 （转载）的更多相关文章

  1. 用JavaScript方式创建easyUI datagrid Column Group（列组）

    代码如下: <script type="text/javascript"> var datagrid; $(function(){ $('#datagrid').dat ...

  2. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  3. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  4. 扩展-Easyui Datagrid相同连续列合并扩展（一）

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  5. EasyUI DataGrid 相同连续列合并

    扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...

  6. DataGrid Column Group （合并表头）

    <thead> <tr> <th colspan=">swjg</th> <th colspan=">swbm</ ...

  7. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

  8. easyui datagrid自定义按钮列,即最后面的操作列（转）

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...

  9. Easyui datagrid 显示隐藏列

    html:         <div style="float: left; width: 1450px; height:auto;  ">             & ...

随机推荐

  1. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  2. 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  3. Qt常用类——Qstring

    Qstring有一些方面跟C/C++中的string的使用,例如把一个字符串追加到另一个字符串中,也是用“+”.也有append函数等. 下面是是Qstring的一些常用的具体函数示例: Qt的QSt ...

  4. ZROI 暑期高端峰会 A班 Day5 计算几何

    内积(点积) 很普及组,不讲了. \[(a,b)^2\le(a,a)(b,b)\] 外积(叉积) 也很普及组,不讲了. 旋转 对于矩阵 \(\begin{bmatrix}\cos\theta\\\si ...

  5. IRQL

    IRQL是Interrupt ReQuest Level,中断请求级别. 一个由windows虚拟出来的概念,划分在windows下中断的优先级,这里中断包括了硬中断和软中断,硬中断是由硬件产生,而软 ...

  6. 修改mysql存储过程或函数的定义着

    以root用户登录mysql控制台 (1)首先查询 mysql> select definer from mysql.proc; (2)然后根据条件进行更新 update mysql.proc ...

  7. Python OpenCV4获取轮廓最大内切圆和外接圆

    为了方便讲解,我们先来创建一个多边形做演示 第一步:创建图像,并绘制一个六边形.代码和生成图像如下: # Create an image r = 100 src = np.zeros((4*r, 4* ...

  8. winform 通用自动更新程序

    通用自动更新程序 主要功能: 1. 可用于 C/S 程序的更新,集成到宿主主程序非常简单和配置非常简单,或不集成到主程序独立运行. 2. 支持 HTTP.FTP.WebService等多种更新下载方式 ...

  9. python文件打包发布（引用的包也可以加进来）,打包出错解决了，运行出错解决了

    一开始,我以为,打包本来就很容易,可是没有..... 没想到打包还能遇到坑 T.T 打包步骤: 1.安装 pyinstaller (cmd) pip install pyinstaller 2.进入目 ...

  10. [转帖]Linux crontab 查看所有用户的crontab任务

    Linux crontab 查看所有用户的crontab任务 https://www.cnblogs.com/xzlive/p/11542176.html 查看所有用户的crontab任务 - mlz ...