datagrid组合表头、行/列单元格融合、垂直滚动条留白取消

最新推荐文章于 2019-06-20 17:43:58 发布
最新推荐文章于 2019-06-20 17:43:58 发布
阅读量817 收藏 2
点赞数
分类专栏： 前端 文章标签： datagrid 行合并单元格 列合并单元格 组合表头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyBird3211/article/details/86157698
版权

datagrid组合表头、行/列单元格融合

一直做java后台开发，最近开始接触前端开发。将开发中碰见的问题整理在这里，方便以后查阅。
碰见的需求是这样的：
在这里插入图片描述

var data = [{"type":"平均值","two":"6.0%","three":"11.1%","four":"20.1%","five":"22.6%","six":"20.8%","seven":"11.1%","eight":"2.4%","nine":"0.2%","age":"5.6%","man":"31.6%","woman":"62.3%","gender":"6.1%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"1","two":"5.5%","three":"10.7%","four":"17.3%","five":"23.3%","six":"22.9%","seven":"13.5%","eight":"2.1%","nine":"0.2%","age":"4.6%","man":"41.0%","woman":"54.0%","gender":"5.0%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"2","two":"7.3%","three":"10.2%","four":"18.1%","five":"20.4%","six":"23.7%","seven":"12.4%","eight":"2.7%","nine":"0.1%","age":"5.2%","man":"36.0%","woman":"58.8%","gender":"5.1%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"3","two":"6.3%","three":"10.1%","four":"19.4%","five":"21.7%","six":"21.4%","seven":"11.5%","eight":"3.3%","nine":"0.3%","age":"5.9%","man":"32.1%","woman":"61.0%","gender":"7.0%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"4","two":"5.9%","three":"10.0%","four":"20.5%","five":"22.2%","six":"20.6%","seven":"12.2%","eight":"2.9%","nine":"0.1%","age":"5.6%","man":"32.2%","woman":"61.8%","gender":"6.0%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"5","two":"7.2%","three":"11.2%","four":"18.8%","five":"20.8%","six":"20.6%","seven":"12.4%","eight":"2.4%","nine":"0.1%","age":"6.5%","man":"30.3%","woman":"62.8%","gender":"7.0%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"6","two":"4.5%","three":"10.7%","four":"19.4%","five":"21.9%","six":"21.4%","seven":"13.4%","eight":"3.0%","nine":"0.3%","age":"5.2%","man":"29.6%","woman":"64.7%","gender":"5.7%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"7","two":"5.3%","three":"11.2%","four":"20.6%","five":"21.6%","six":"21.5%","seven":"11.2%","eight":"3.0%","nine":"0.3%","age":"5.3%","man":"28.9%","woman":"65.5%","gender":"5.6%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"8","two":"5.7%","three":"10.6%","four":"22.7%","five":"25.3%","six":"19.6%","seven":"9.4%","eight":"1.6%","nine":"0.0%","age":"5.1%","man":"29.9%","woman":"64.1%","gender":"5.9%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"9","two":"6.5%","three":"12.7%","four":"21.4%","five":"24.9%","six":"18.3%","seven":"8.2%","eight":"1.7%","nine":"0.0%","age":"6.2%","man":"29.6%","woman":"63.6%","gender":"6.8%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"},
    {"type":"10","two":"6.3%","three":"13.2%","four":"23.0%","five":"24.2%","six":"18.2%","seven":"7.1%","eight":"1.3%","nine":"0.1%","age":"6.6%","man":"26.3%","woman":"66.9%","gender":"6.8%","distance1":"0%","distance2":"0%","distance3":"0%","distance4":"0%","distance5":"0%","distance6":"0%"}];
    $('#table').datagrid({
    	data:data,
    	fitColumns:false,
    	scrollbarSize :0,
    	frozenColumns: [[  
            { title: '表格',field:'type',width:100,align:"left"}
        ]],
	    columns:[
	    	[
	    		{"title":"年龄",colspan:9,rowspan:2,id:"object_age"},
                {"title":"性别",colspan:2,id:"object_sex"},
                {"title":"测试",field:'gender',align:"right",halign: 'left',width:100,rowspan:3},
                {"title":"距离",colspan:5,id:"object_distance"},
                {field:'distance6',title:'其他',align:"right",halign: 'left',width:100,rowspan:3}
            ],
            [
                {"title":"性别二标题",colspan:2,id:"object_sex"},
	    		{"title":"距离二标题",colspan:5,id:"object_distance"}
            ],
	    	[
		        {field:'two',title:'20岁',align:"right",halign: 'left',width:100},
		        {field:'three',title:'30岁',align:"right",halign: 'left',width:100},
		        {field:'four',title:'40岁',align:"right",halign: 'left',width:100},
		        {field:'five',title:'50岁',align:"right",halign: 'left',width:100},
		        {field:'six',title:'60岁',align:"right",halign: 'left',width:100},
		        {field:'seven',title:'70岁',align:"right",halign: 'left',width:100},
		        {field:'eight',title:'80岁',align:"right",halign: 'left',width:100},
		        {field:'nine',title:'90岁',align:"right",halign: 'left',width:100},
		        {field:'age',title:'年龄不明',align:"right",halign: 'left',width:100},
		        {field:'man',title:'男性',align:"right",halign: 'left',width:100},
		        {field:'woman',title:'女性',align:"right",halign: 'left',width:100},
		        {field:'distance1',title:'１公里',align:"right",halign: 'left',width:100},
		        {field:'distance2',title:'１公里以上3公里未満',align:"right",halign: 'left',width:100},
		        {field:'distance3',title:'3公里以上５公里未満',align:"right",halign: 'left',width:100},
		        {field:'distance4',title:'５公里以上１０公里未満',align:"right",halign: 'left',width:100},
		        {field:'distance5',title:'10公里以上15公里未満',align:"right",halign: 'left',width:100}
	    	]
	    ]
	});

单元格的行融合或者列融合

首先，html页面上需要给datagrid一个回调函数：onLoadSuccess: onLoadSuccess。当datagrid加载成功后会执行onLoadSuccess方法。

<div style="width:100%;height:80%;" id="tab1_div">
	<table id = "table1" class ="easyui-datagrid" style = "width：100%;height ：380px;margin-right:15px;"fitColumns = "true"data-options="singleSelect: true,onLoadSuccess: onLoadSuccess">
		 <thead></thead>
	</table>
</div>

function onLoadSuccess(){
	//merges是被执行的操作的单元格的数组
	//其中index表示单元格的下标，rowspan表示要融合的行数。
	//下标按列分，从0开始
	var merges = [{index:1,rowspan:2},{index:3,rowspan:7}];
	for(var i=0; i<merges.length; i++){
		$('#table1').datagrid('mergeCells',{
			index:merges[i].index,
			field:'type',
			rowspan:merges[i].rowspan
		});
	}
	//列融合，index单元格下标
	$('#table1').datagrid('mergeCells', {
		index: 10,
		field: 'type',
		colspan: 2
	});
}
表格中取消垂直滚动条预留的空白位置

设置属性：
scrollbarSize :0

忽胖忽瘦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF Datagrid后台合并表头并数据绑定
IT界的小菜比
04-03 961
效果图 UI页面 <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">..
Easyui 去除jquery-easui tab页div自带滚动条的方法
11-29
测试环境 jquery-easyui-1.5.3 需求场景 打开tab页面时，自动载入一个iframe页面，除了iframe页面本身会出现一个滚动条，tab标签页也出现一个滚动条，如下图所示，需求就是去掉tab页面的滚动条 解决方法 通过观察html页面结构，发现这个滚动条归属class为pannel-body的div 所以，解决方案，只需要添加样式即可。如下，带背景色内容： <head> …… <style type="text/css"> /*去掉easyui tabs右侧滚动条*/ #tabs .tabs-panels>.panel>.panel-body { ov
datagrid合并单元格
占星安啦的博客
05-02 4289
表头合并 columns:[ [ {field:'bigarea',title:'大区',rowspan:2,width:$$.fillsize(0.1),align:'center'}, {field:'ProvinceName',title:'省份',rowspan:2,width:$$.fillsize(0....
easyui去掉datagrid的滚动条
热门推荐
我是IT小菜鸟的博客
02-27 2万+
工作过程中需要去掉滚动条这个功能，由于是特别小的知识点，所以在此记录，以防忘记。 带滚动条时，如果数据超过规定大小则出现滚动条，否则不出现 但滚动条所占的宽度依然存在，两种状态截图如下： 去掉滚动条的方法：打开jquery.easyui.min.js文件，找到wrap.width();所在位置，改为wrap.width()+20;即可。修改后截图：
easyui表格去右侧留白和滚动条的方法
qq_32177809的博客
05-31 3155
在easyui的使用中，会发现最右侧总是会多出来一点点，其实那个是留给滚动条的位置。这样影响了美观性，经过试验，如下方式可以成功去掉留白和滚动条。在datagrid中加入 fitColumns:true, scrollbarSize:0, 注意：这两个参数要同时写，只写一个是没有用的...
Easyui datagrid datagrid-view1纵向滚动条去除解决方法
amino77的专栏
04-25 8696
最近在使用easyui datagrid的过程中
dataGrid 多维表头、表头跨行跨列设计及绑定数据
10-27
dataGrid　其实就是一个html table,本文将介绍dataGrid 多维表头，表头跨行跨列设计方法需要了解的朋友可以参考下
C#语言WinForm框架下DataGridView合并表头列头和单元格示例
05-19
首先，理解“合并表头”通常意味着将多个相邻的列头单元格合并为一个更大的单元格，以便在显示多级分类或者创建宽表头时使用。在C#的WinForm应用中，可以通过设置DataGridViewColumnHeaderCell对象的...
00：asp-DataGrid 表头跨行跨列.pdf
08-21
tcl[0].Text="车间</th><th rowspan=3>批量<th colspan=16 scope=col valign=middle>当班生产状况</th><th colspan=11 scope=col valign=middle>状态机<...th scope=col valign=...
C#实现改变DataGrid某一行和单元格颜色的方法
09-04
在C#中，改变DataGrid的行和单元格颜色通常涉及到对WPF的DataGrid控件的操作，包括数据源的绑定、行和单元格的获取以及样式设置。以下是一个详细的步骤来实现这一功能： 1. **添加DataGrid控件**： 在XAML文件中，...
jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条
weixin_34013044的博客
02-06 243
jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条   ============================== 蕃薯耀 2018年2月6日 http://www.cnblogs.com/fanshuyao/   一、问题描述： 当jquery easyui datagrid中数据量大时，body页面又设置高度超出隐藏时（如：overflow-y:hidde...
DataGrid 实现复杂表头和合并行源码与示例
09-21
一、不需要编写任何样式、只需通过代码添加将 ColumnItem 集合添加到DataGrid列集合,需要引用空间 using System.Windows.Controls ，才能添加扩展函数。 二、支持实现复杂的表头、不限分级层次； 三、复杂表头支持位置拖动、 列宽度拖动，组内列会按比例自动调整； 四、支持模拟行合并，即对象中存在集合成员； 五、支持自定义转换器（IValueConverter）； 六、支持对象集合(ICollection)和支持动态字典集合(ICollection<IDictionary>)的绑定 ； 七、对象集合使用 AddBindingPathTemplateColumn 函数，字典集合使用 AddBindingParameterTemplateColumn 函数 八、详见示例。
wpf中datagrid表头合并（拆分）
m0_37184639的博客
08-18 7425
大家好，我是小小张，这是人生20年的第一次博客，写的不好请大家指正，并且因为是工作时间很短，可能未必有大家理解的深刻，有什么问题欢迎大家指正；     好了，正式开始，首先我要说明，我这里所说的是视觉上的合并，就像是这样的，在视觉上像是合并了行列，其实并不是按照你们想的去做的，好吧，我表示并不知道你想的是啥，哈哈哈。   不开玩笑，方法是很简单的，在datagrid的列中，重写这一列的模...
dataGrid 表头合并
qq_26461907的博客
11-19 563
columns = [ [ {field : ‘enterpriseName’,title : ‘企业名称’,width : 90,rowspan : 3,align : ‘center’}, {field : ‘month’,title : ‘月份’,width : 40,rowspan : 3,alig
datagrid合并表头——超好用方法
summonyyq的专栏
01-06 1339
最近用到datagrid合并表头，从网上找了好多种方法，但都不是很好用，昨天恰好发现个好方法。先贴出来与大家共享。1.、先用HTML代码的...把你的表头画出来，然后把 与去了，将剩下的代码保存成字符串,如    stringHeader="........".   2、就用到DataGrid的Caption属性     dataGrid.Caption   =   ""   +   st
EasyUi Datagrid合并单元格+添加合计 +JAVA
两岁就很帅
06-20 1328
1：先看效果图，我这截取一部分 2：话不多直接贴 前端代码 (1) JS 一.引用JS <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="...
easyui 中datagrid的列合并mergeCells，改变表头颜色
hgg923的专栏
07-20 6781
官网例子 推荐文章 核心在onLoadSuccess中添加如下： 一、合并表格 $("#dataGrid").datagrid('mergeCells',{ index: 0, //datagrid的index，表示从第几行开始合并(从0开始计数) field: 'typeNet', //合并单元格的field名称 rowspan:3 /...
datagrid的合并单元格（合并行、并列）
hulufeng1203的专栏
03-03 7784
并列很简单： columns:[[         {field:'examId',title:'批次',width:150,align:'center',rowspan:2,         //添加超级链          formatter:function(value,rowData,rowIndex){             //function里面的三个参数代表当前
WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行
最新发布
06-07
WPF DataGrid可以通过使用列组和行组来实现多表头/列头和多行头的效果。可以使用合并单元格的方式来合并单元格，这可以通过使用DataGrid的合并单元格功能来实现。另外，可以使用DataGrid的行模板来实现一列占据多行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值