EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下:
第一种方法:
$('#divData').datagrid({
border : ,
nowrap : false,
fit : true,
url: '<%=request.getContextPath()%>/report/showreport.action',
frozenColumns: [[
{ title: '区域名称', field: 'regionname', width: , sortable: true}
]],
columns: [
[{"title":"学生","colspan":},
{"title":"成绩","colspan":}],
[ {"field":"config_gender1","title":"女生","rowspan":},
{"field":"config_gender2","title":"男生","rowspan":},
{"field":"config_datatype0","title":"语文","rowspan":},
{"field":"config_datatype1","title":"数学","rowspan":},
{"field":"config_datatype2","title":"英语","rowspan":}]],
rownumbers: true
});第二种方法:
$("#divValueTable").datagrid({
url: '@Url.Action("DataList", "Report")',
queryParams: {
"targetID": '1234',
"OrgID": orgid,
"FactTime": Year,
}, //请求数据时发送的参数
autowidth: true,// 自动宽度
iconCls: 'icon-save',
striped: true,
height: 600,
nowrap: false,
singleSelect: true,
fitColumns: true,
rownumbers: true, //是否加行号
pagination: false, //是否显式分页
pageSize: 10, //页容量，必须和pageList对应起来，否则会报错
pageNumber: 1, //默认显示第几页
pageList: [10, 20, 30],//分页中下拉选项的数值
frozenColumns: [],
columns: [[
{
title: "操作",field:"Operate",width:100,align:"center",rowspan:2,resizeable:false,formatter:function(value,row) {
try {
return "<a href=\"javascript:void(0)\" onclick='Edit(\"" + row.FactID + "\")'>编辑</a>";
}
catch (e)
{ }
}
},
{
title: "季度", order: 2, width: 150, align: "center",colspan:3
},
{
title: "上报机构", order: 3, field: "OrgID", width: 150, align: "center", rowspan: 2, resizeable: false },
{
title: "备注",order:5,field:"Remark",width:80,align:"center",rowspan:2,resizeable:false,formatter:function(value) {
return (value == null ? "" : value).overflow(10);
}
}
],
[
{
title: "1月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
},
{
title: "2月", order: 6, field: "SubmitID", width:50, align: "center", resizeable: false
}
, {
title: "3月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
}
]
]
});这样设置,表头也是两行显示.
frozenColumns: []里边写入要锁定的列,这些列将被冻结,就像Excel中的锁定表头一样,锁定后该内容将不会随着滚动条的移动而变动位置.
fitColumns: true 该属性是设置列的宽度(个人经验,非官方说法:设置为false后,datagrid的宽度将会随着你设置的每列的宽度自定累加,如果加起来的数达到2048px,在页面中会自动显示水平滚动条,如果该值为true,datagrid的宽度将会随着页面的宽度而设置,如页面的宽度设置的是1000px,那么datagrid也会显示成1000,即使你设置的每列的宽度加起来达到了2048,datagrid的宽度也不会显示成2048,而是显示成1000.) 第二种方法的显示效果: