easyui将原本field为'time'的年月日时分秒一起在一列显示的拆分了年,月,日,时,分,秒各一列(将datagrid的某一列格式化为多列显示)

最新推荐文章于 2024-04-16 17:16:00 发布

原创最新推荐文章于 2024-04-16 17:16:00 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#将某一列格式化为多列显示 #easyui #datagrid

本文介绍了一个使用EasyUI的表格配置示例，展示了如何通过JavaScript设置表格的各项属性，如分页、选择模式等，并通过格式化函数展示日期时间数据。

话不多说,上代码

$('#dg').datagrid({
	toolbar : "#tb",
	//fit: true,
	rownumbers : true,
	singleSelect : false,//多选
	autoRowHeight : false, //自动行高
	pagination : true, //显示表格下面的分页插件
	fitColumns : true, //字段自动分配
	striped : false,//显示斑马线背景
	collapsible : true, //表单收缩
	checkOnSelect : true,
	//url : url,//表格数据的请求路径
	method : 'post',
	queryParams : params,
	pageNumber : 1, //默认显示第几页
	pageSize : 10,//每页显示的记录条数，默认为10 
	pageList : [ 10, 20, 30 ],//可以设置每页记录条数的列表  
	columns : [ [ {
		field : 'uid',
		title : '序号',
		checkbox : true,
		hidden : true
	}, 
	{
		field : 'year',
		title : '年',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(0,4);	
		}
	}, 
	{
		field : 'month',
		title : '月',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(5,7);	
		}
	}, 
	{
		field : 'day',
		title : '日',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(8,10);	
		}
	}, 
	{
		field : 'hour',
		title : '时',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(11,13);	
		}
	}, 
	{
		field : 'minute',
		title : '分',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(14,16);	
		}
	}, 
	{
		field : 'second',
		title : '秒',
		width : '5%',
		align : 'center',
		formatter: function(value, row, index) {
			var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
			return rows[index]['time'].slice(-2);	
		}
	}],
	//假数据,先看效果
	data: [
		{time: '2019-01-01 02:11:12'},
		{time: '2019-01-21 01:13:15'}
	]
})