最终效果:
知识点:
attachHeader(values, style)
-
values - 表头标题数组
-
style - 样式选项数组
我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dhtml Grid</title>
<link rel="STYLESHEET" type="text/css" href="<%=path %>/js/dhtml/dhtmlx.css">
</head>
<body>
<div id="mygrid_container" style="width:600px;height:150px;"></div>
<script src="<%=path %>/js/jquery-1.5.1.js"></script>
<script src="<%=path %>/js/dhtml/dhtmlxcommon.js"></script>
<script src="<%=path %>/js/dhtml/dhtmlx.js"></script>
<script src="<%=path %>/js/dhtml/dhtmlxgrid.js"></script>
<script type="text/javascript">
var mygrid;
$(document).ready(function(){
mygrid = new dhtmlXGridObject("mygrid_container");
mygrid.setImagePath("<%=path%>/image/dhtml/");
<!--设置表头-->
mygrid.setHeader("人员信息,#cspan,#cspan,出生日期,全国,#cspan,合计");
<!--设置二级表头-->
mygrid.attachHeader(["姓名", "编码", "性別", "#rspan","价格","数量", "#rspan"]);
mygrid.setInitWidths("200,100,50,200,100,100,*");
mygrid.setColAlign("left,left,left,center,right,right,right");
mygrid.setColSorting("str,int,str,date,int,int,int");
mygrid.setColTypes("edtxt,ed,ro,dhxCalendar,ron,ron,ron");
mygrid.enableMultiselect(true);
mygrid.setSkin("dhx_skyblue");
mygrid.attachEvent("onRowSelect",doOnRowSelected);
mygrid.init();
mygrid.setNumberFormat("0,000.00",3,",",".");
mygrid.loadXML('<%=path%>/student/dhtmlListStudent.do?vmTemplate=index2.vm');
});
</script>
</body>
</html>
#cspan:列合并
#rspan:行合并