easyUI datagrid 跨行跨列操作

最新推荐文章于 2022-02-09 11:52:28 发布

原创最新推荐文章于 2022-02-09 11:52:28 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid

每天进步一点点专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在easyUI的datagrid中实现跨行跨列的操作，结合controller和特定的数据格式，如[{'application': 123, 'weixin': 123, 'web': 123, 'date': 1444878359901}]，探讨数据展示和交互的方法。" 119557138,10546297,配置Vue项目与多个后端服务器交互,"['前端开发', '后端开发', '负载均衡', '云服务器管理', 'API服务']

datagrid_test.js

$(function(){
		$('#dg').datagrid({
			url:"http://localhost:8080/test/getTable.do",
			width:400, 
			columns:[[    
				{field:'date',title:'日期',rowspan:2,width:150,align:'center'},    
				{title:'注册量',halign:'center',colspan:3,width:250},    
			],[    
				{field:'weixin',title:'微信',width:80,sortable:true,align:'center'},    
				{field:'application',title:'APP',width:80,sortable:true,align:'center'},    
				{field:'web',title:'网站',width:100,align:'center',sortable:true}  
			]]    
		});
	});

controller

@RequestMapping("/getTable.do")
	@ResponseBody
	public List<Map<String, Object>> getTable()
	{
		Map<String, Object> rstMap = new HashMap<String, Object>();
				
		for (int i=0;i<1;i++) {
			Map<String, Object> v1 = new HashMap<String, Object>();
			v1.put("date", new Date().getTime());
			v1.put("weixin", 123);
			v1.put("application", 123);
			v1.put("web", 123);
			
			rowList.add(v1);
		}	
		
		return rowList;	
	}

传递的数据格式

[{"application":123,"weixin":123,"web":123,"date":1444878359901}]