EasyUI多级表头设置

EasyUI是一款比较容易上手的前端框架

下面说一下它的多级表头设置:

//数据网
	$("#tt").datagrid({
		url:"${ctx}/UKeyManage/getUKeyManageData",
		pagination : true,//分页
		pageSize : 20,//默认每页条数
		rownumbers : true,//行数
		//nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取
		pageList : [ 50, 40, 30, 20, 10 ],//可以选择的分页集合  
		striped : true,    //设置表格奇偶行颜色是否不同
	   columns:[
		   [
		   {field:'id',title:'id',align:'left',hidden:"true",'rowspan':2},//合并2行
		   {field:'ukeyNo',title:'UKEY编码',align:'left','rowspan':2},//合并2行
		   {field:'ukeySerialNo',title:'UKEY序列号',align:'left','rowspan':2},//合并两行
		   {field:'memo',title:'备注',align:'left','rowspan':2},//合并两行
		   {title:'更新信息',align:'center','colspan':2},//合并两列
		   {field:'action',title:'操作',width:120,align:'center','rowspan':2, 
				formatter:function(value,row,index){
					var	a = '  ';
					return a;
				}
			} 
	   ],[
		   {field:'updateTime',title:'更新时间',align:'center','rowspan':1},
		   {field:'updateUser',title:'更新人',align:'left','rowspan':1} 
	   ]
		   ],
	   toolbar:[{
			text:'新增',
			iconCls:'icon-add',
			handler:function(){
				editrow('','');
			}
		},'-',{
			text:'编辑',
			iconCls:'icon-edit',
			handler:function(){
				var row = $('#tt').datagrid('getSelected');
				editrow(row.ukeyNo,row.ukeySerialNo);
			}
		}],
		
		onDblClickRow:function(index,row){
			lastIndex = index;
			editrow(row.ukeyNo,row.ukeySerialNo);
		},
	});

主要在于对表格的操作

效果图如下:

EasyUI多级表头设置_第1张图片

你可能感兴趣的:(js)