dhtmlx学习之dhtmlxgrid(三)---列表多表头

最终效果:dhtmlx学习之dhtmlxgrid(三)---列表多表头_第1张图片

知识点:

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:行合并

 

 

  

 

 

你可能感兴趣的:(dhtmlxgrid,DHTMLX,attachHeader)