`
小古墓
  • 浏览: 59590 次
  • 性别: Icon_minigender_1
  • 来自: 山东
社区版块
存档分类
最新评论

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

阅读更多

最终效果:

知识点:

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

 

 

  

 

 

  • 大小: 6.6 KB
分享到:
评论

相关推荐

    dhtmlxgrid

    通过研究这些文件,开发者可以了解如何在实际项目中实施DHTMLXGrid的固定表头功能,以及如何与其他DHTMLX组件集成,以构建功能丰富的数据管理界面。 总的来说,DHTMLXGrid是Web开发中的一款强大工具,它的固定表头...

    dhtmlxGrid介绍及使用手册(中文版)

    ### dhtmlxGrid介绍及使用手册知识点解析 dhtmlxGrid是一个强大的JavaScript网格组件,用于创建动态交互的数据表。它支持丰富的功能,例如自定义XML数据源,多行表头和表尾显示,列操作,以及处理大型数据集的能力...

    dhtmlxgrid专业版

    多表头功能使dhtmlxGrid能够处理复杂的数据结构,它允许在表格中创建多层次的列标题。这使得数据分类和组织更为清晰,用户可以更方便地理解和分析数据。例如,你可以将一组相关的列放在同一个表头组下,甚至可以为...

    dhtmlx 帮助文档 (中文版)

    - **范围**:本手册涵盖了 DHTMLX 库中的多个组件和工具,包括布局管理、数据展示组件、用户界面控件等。 - **名词定义**:对文档中出现的关键术语进行了明确的定义,便于读者理解。 - **参考文件**:提供了相关的...

    dhtmlxgrid v2.0

    **dhtmlxGrid v2.0 - 异步请求与多表头的JavaScript表格库** dhtmlxGrid是一款强大的JavaScript组件,专为构建交互式的、数据丰富的Web应用程序而设计。v2.0版本是该组件的一个重要里程碑,它引入了多项关键特性,...

    dhtmlxgrid_v1.2_pro真正可用的pro版本

    `dhtmlxGrid` 支持多语言界面,开发者可以根据需要配置不同语言的提示和菜单,为全球用户提供友好的用户体验。 综上所述,`dhtmlxGrid_v1.2_pro` 是一个强大且灵活的JavaScript表格组件,它的出现极大地提升了Web...

    dhtmlxGrid_v14_Pro_70813.rar

    **三、dhtmlxGrid的版本信息** 在这个压缩包文件中,"dhtmlxGrid_v14_Pro_70813"可能代表dhtmlxGrid的专业版,版本号为v14,发布日期可能是2013年7月8日。专业版通常包含更多高级功能和更全面的技术支持。 **四、...

    dhtmlx的免费grid组件

    DHTMLX是一个广泛使用的JavaScript库,它提供了多个富客户端UI组件,其中之一就是“Grid”组件。这个免费的grid组件在Web应用开发中扮演着重要角色,尤其对于数据密集型应用,它能提供高效的数据展示和操作能力。...

    dhtmlxGrid_v14_Pro_70813.zip_dhtmlxgrid

    开发人员在使用这个组件时,可以通过阅读文档、查看示例以及调试代码,来学习如何有效地集成和定制dhtmlxGrid,以适应他们的项目需求。总之,dhtmlxGrid是一个强大且灵活的JavaScript表格组件,能够提升Web应用的...

    dhtmlx套件 V2.0

    **dhtmlxGrid:核心组件之一** dhtmlxGrid是dhtmlx套件中的核心组件,它是一个高度可配置的数据网格控件,支持大量数据的展示和操作。这个组件允许你轻松地创建和管理表格,具备排序、过滤、分页、编辑等功能。...

    dhtmlxgrid完整包+中文api

    - **初始化和配置**:学习如何创建新的dhtmlxGrid实例,设置基本属性,如列定义、数据源等。 - **数据操作接口**:了解如何通过API进行数据的添加、修改、删除操作,以及如何处理排序和过滤。 - **事件处理**:掌握...

    dhtmlxGrid_Pro 1.5

    5. **100.xml文件**:在提供的文件列表中,`100.xml` 可能是示例数据文件,用于演示dhtmlxGrid的功能,例如填充表格数据,或者展示如何与后端服务进行数据交互。 6. **Help.txt**:这个文件可能是帮助文档,可能...

    dhtmlXGrid

    【dhtmlXGrid】是一款强大的JavaScript表格显示控件,它为网页应用提供了丰富的表格功能,包括数据展示、编辑、排序和Ajax数据处理。这款控件以其美观的界面和高效的性能深受开发者喜爱。 **功能特点** 1. **优美...

    dhtmlxGridk 中文文档

    - **功能**: dhtmlxGrid 支持显示多行表头和表尾,用于组织更复杂的表格结构。 - **优点**: 增强数据可读性和用户友好性,尤其适用于需要展示多层级分类的数据表格。 - **应用场景**: 数据量大且结构复杂的情况,...

    dhtmlxgrid 强大的表格控件

    支持客户端表格排序,只需单击要排序列的表头。并且支持设置列的数据类型(数字、字符串、日期),按类型排序 页面所有数据操作全部采用Ajax技术后台处理,整个页面只会加载一次,所有操作均仅更新页面相应区域,...

    displaytag,dhtmlXGrid,eXtremeComponents哪个更好?

    5. **学习曲线**:如果你熟悉JavaScript,dhtmlXGrid的API可能会更容易上手;如果是.NET开发者,XC的使用会更直观。 综上所述,没有绝对的“哪个更好”,关键在于找到最适合项目需求的组件。在做出决策前,最好进行...

    dhtmlx.rar

    了解了dhtmlxGrid的基本特性和用法后,开发者可以通过解压"**dhtmlx.rar**"文件,查阅其中的示例代码和文档,进一步学习如何集成和定制这个组件,以满足项目需求。同时,掌握dhtmlxGrid的API调用方法和事件处理机制...

    javascript web grid demo

    在压缩包文件"DhtmlxGrid v2.0"中,你应该会找到DHTMLX Grid的源码、示例代码和文档。这个版本可能包含以下内容: 1. JavaScript和CSS文件:包含DHTMLX Grid的核心库和主题样式。 2. 示例代码:展示如何在网页中...

    JSP页面表格初始化

    - **dhtmlXGrid**是一款基于JavaScript的表格控件,广泛应用于Web应用开发中,特别是需要展示大量数据的情况下。 - 它提供了丰富的特性,如数据排序、分页、搜索、行选择、列拖拽等,非常适合实现动态表格效果。 ##...

Global site tag (gtag.js) - Google Analytics