`
niulanshan
  • 浏览: 564055 次
文章分类
社区版块
存档分类
最新评论

Dojo实现会“变身”的表格

 
阅读更多

一、变身表格一

1、新建web工程,在WebContent新建一个DataGrid.html

DataGrid.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>会变的表格</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<script type="text/javascript" src="dojoroot/dojo/dojo.js" data-dojo-config="isDebug:false, parseOnLoad: true"></script>
	<style type="text/css">
		@import "dojoroot/dojox/grid/resources/Grid.css";
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		.heading {
			font-weight: bold;
			padding-bottom: 0.25em;
		}
				
		#grid { 
			border: 1px solid #333;
			width: 48em;
			height: 30em;
		}
		
		#grid .dojoxGridCell {
			text-align: center;
		}
	</style>
	
	<script type="text/javascript">
		dojo.require("dijit.dijit");
		dojo.require("dojox.grid._Grid");
		dojo.require("dojo.parser");
	</script>
	<script type="text/javascript">

		function get(inRowIndex) {
			return [this.index, inRowIndex].join(', ');
		}

		var view0 = {
			noscroll: true,
			cells: [
				{name: '苹果', value: '12'},
				{name: '梨子', value: '23'}
		]};
		
		var view1 = [
				{name: '橘子', value: '34'},
				{name: '香蕉', value: '44'},
				{name: '草莓', value: '26'},
				{name: '橙子', value: '48'},
				{name: '西瓜', value: '36'},
				{name: '山竹', value: '96'},
				{name: '樱桃', value: '56'}
		];
		
		var view2 = {
			noscroll: true,
			cells: [
				[
					{name: '荔枝', value: '34', rowSpan: 2},
					{name: '芒果', value: '64'}
				],[
					{name: '车厘子', value: '84'}
				],[
					{name: '桃子', value: '24'}
				]
			]
		}
		
		var view3 = [
			[	
				{name: '李子', value: '24', rowSpan: 3},
				{name: '榴莲', value: '14'},
				{name: '猕猴桃', value: '104'},
				{name: '蛇皮果', value: '44'}
			],[
				{name: '布朗', value: '65'},
				{name: '桂圆', value: '32'},
				{name: '西红柿', value: '68'}
			],[
				{name: '葡萄', value: '38', colSpan: 3}
			]
		];
		
		var structure0 = [ view0, view1 ];
		var structure1 = [ view2, view3 ];
		
		
		var l2 = false;
		toggleStructure = function() {
			l2 = !l2;
			grid.scrollToRow(0);
			grid.set('structure', l2 ? structure1 : structure0);
		}
</script>
</head>
<body>
<div class="heading">会变的表格</div>
<p>
	<button onclick="toggleStructure()">变身</button>
</p>	
<div id="grid" data-dojo-id="grid" dojoType="dojox.grid._Grid" structure="structure" rowSelector="20px" rowCount="15" elasticView="2"></div>

</body>
</html>

2、显示结果

(1)为变身前


(2)点击“变身”按钮后



分享到:
评论

相关推荐

    dojo 在线操作表格

    通过研究这些示例,开发者可以更好地理解如何配置和使用Dojo Grid来实现在线表格操作。 总的来说,Dojo Grid是Dojo框架中极具实用性和灵活性的一个组件,对于需要构建交互式Web表格应用的开发者来说,它是一个不可...

    AJAX之Dojo实现登陆框

    总结,"AJAX之Dojo实现登陆框"涵盖了使用Dojo库进行AJAX请求,构建无刷新登录表单,处理表单数据,以及相关的事件监听和响应处理。在实践中,还需要结合前端验证、后端安全措施以及用户体验设计来创建一个完整的登录...

    dojo实现登陆框架

    dojo 实现登陆框架 浪曦的那个谁讲的我忘了饿

    struts2+dojo实现例子

    这个"struts2+dojo ajax实现小例子"可能包含了这些基本的整合过程,你可以通过查看解压后的源码,了解具体的实现细节。它是一个很好的学习资源,可以帮助你理解Struts2和Dojo如何协同工作,如何在实际项目中实现高效...

    dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程

    利用`dojo/aspect`实现业务逻辑的解耦;使用`dojo/xhr`进行服务器通信;并结合`dojo/json`进行数据交换。每个`code`文件可能就是一个具体的Dojo示例,演示了如何运用这些知识点解决问题。通过深入学习和实践,你可以...

    DOJO TableContainer实现表单布局.js

    DOJO TableContainer实现表单布局.js

    dojo实现省份地市级联

    标题 "dojo实现省份地市级联" 指的是使用Dojo JavaScript库来创建一个功能,让用户在网页上选择省份后,地市的选择会自动更新为对应省份的地市。这种交互通常被称为级联下拉框或者联动选择,它可以提高用户输入数据...

    dojo enhancedGrid pagination 分页实现

    本篇文章将深入探讨如何利用dojo enhancedGrid实现分页功能,以及如何通过静态数据和JSON文件加载数据,并使用XHR(XMLHttpRequest)进行数据请求。同时,我们还将讨论如何使用fetch API实现分页、过滤和排序。 ...

    dojo文档 dojo文档 dojo文档

    dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档

    dojo中文文档-dojo手册

    在数据交互方面,Dojo的dojo.xhr系列函数(如dojo.xhrGet、xhrPost)实现了与服务器的异步通信,支持JSON、XML等多种数据格式。另外,dojo.data API则提供了一种统一的方式来存储和检索数据,无论数据源是本地还是...

    dojo类机制实现原理分析

    ### Dojo类机制实现原理分析 #### 一、概述 Dojo框架是一个强大的JavaScript库,它不仅提供了丰富的用户界面组件,还内置了一套强大的类机制。本文旨在深入探讨Dojo类机制背后的实现原理,包括其类声明方式、继承...

    DOJO 学习笔记 dojo

    `dojo.event` 以及 `dojo.event.topic` 和 `dojo.event.browser` 是事件管理和发布订阅模式的实现。`dojo.event` 用来绑定和解绑事件,`dojo.event.topic` 提供了消息传递机制,而 `dojo.event.browser` 是浏览器...

    dojo js dojo js

    dojo js dojo js dojo js dojo js dojo js dojo js dojo js

    DOJO权威指南+DOJO1.1源码

    学习DOJO时,应先熟悉其基本概念和模块结构,然后通过实际项目进行练习,例如创建动态表格、实现数据绑定、构建复杂的用户界面等。同时,结合源码阅读,能加深对DOJO工作机制的理解。 总之,这个资源集合为DOJO...

    dojo的二级下拉菜单demo

    在这个“dojo的二级下拉菜单demo”中,我们将探讨Dojo如何实现多级下拉菜单,这是一种常见的交互元素,广泛应用于导航菜单和选项选择。 首先,我们要了解Dojo的模块系统。Dojo使用AMD(Asynchronous Module ...

    dojo1.3_grid

    开发者可以利用这个版本的Dojo Grid实现各种复杂的表格布局和交互效果。 6. **groupGrid**:可能是指Dojo的分组Grid,这种功能允许数据按组进行展示,通常会折叠和展开不同的数据段,方便用户管理和浏览大量数据。 ...

    dojo精品中文教程(包一)

    很不错的中文教程!文件太大分3个包! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) ...利用Dojo实现拖动(Drag and Drop)效果

    DOJO中文手册【出自dojo中国】

    Dojo通过其高效的包系统实现了功能丰富的库,而仅需引入少量的JavaScript文件。用户可以选择仅包含所需的特定功能模块,以减少加载的资源。Dojo还尝试创建一种新的标记语言DojoML,旨在允许在不改变DojoML或...

    dojo精品中文教程(全)

    分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 ...利用Dojo实现拖动(Drag and Drop)效果

Global site tag (gtag.js) - Google Analytics