一、变身表格一
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 Grid来实现在线表格操作。 总的来说,Dojo Grid是Dojo框架中极具实用性和灵活性的一个组件,对于需要构建交互式Web表格应用的开发者来说,它是一个不可...
总结,"AJAX之Dojo实现登陆框"涵盖了使用Dojo库进行AJAX请求,构建无刷新登录表单,处理表单数据,以及相关的事件监听和响应处理。在实践中,还需要结合前端验证、后端安全措施以及用户体验设计来创建一个完整的登录...
dojo 实现登陆框架 浪曦的那个谁讲的我忘了饿
这个"struts2+dojo ajax实现小例子"可能包含了这些基本的整合过程,你可以通过查看解压后的源码,了解具体的实现细节。它是一个很好的学习资源,可以帮助你理解Struts2和Dojo如何协同工作,如何在实际项目中实现高效...
利用`dojo/aspect`实现业务逻辑的解耦;使用`dojo/xhr`进行服务器通信;并结合`dojo/json`进行数据交换。每个`code`文件可能就是一个具体的Dojo示例,演示了如何运用这些知识点解决问题。通过深入学习和实践,你可以...
DOJO TableContainer实现表单布局.js
标题 "dojo实现省份地市级联" 指的是使用Dojo JavaScript库来创建一个功能,让用户在网页上选择省份后,地市的选择会自动更新为对应省份的地市。这种交互通常被称为级联下拉框或者联动选择,它可以提高用户输入数据...
本篇文章将深入探讨如何利用dojo enhancedGrid实现分页功能,以及如何通过静态数据和JSON文件加载数据,并使用XHR(XMLHttpRequest)进行数据请求。同时,我们还将讨论如何使用fetch API实现分页、过滤和排序。 ...
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框架是一个强大的JavaScript库,它不仅提供了丰富的用户界面组件,还内置了一套强大的类机制。本文旨在深入探讨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时,应先熟悉其基本概念和模块结构,然后通过实际项目进行练习,例如创建动态表格、实现数据绑定、构建复杂的用户界面等。同时,结合源码阅读,能加深对DOJO工作机制的理解。 总之,这个资源集合为DOJO...
在这个“dojo的二级下拉菜单demo”中,我们将探讨Dojo如何实现多级下拉菜单,这是一种常见的交互元素,广泛应用于导航菜单和选项选择。 首先,我们要了解Dojo的模块系统。Dojo使用AMD(Asynchronous Module ...
开发者可以利用这个版本的Dojo Grid实现各种复杂的表格布局和交互效果。 6. **groupGrid**:可能是指Dojo的分组Grid,这种功能允许数据按组进行展示,通常会折叠和展开不同的数据段,方便用户管理和浏览大量数据。 ...
很不错的中文教程!文件太大分3个包! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) ...利用Dojo实现拖动(Drag and Drop)效果
Dojo通过其高效的包系统实现了功能丰富的库,而仅需引入少量的JavaScript文件。用户可以选择仅包含所需的特定功能模块,以减少加载的资源。Dojo还尝试创建一种新的标记语言DojoML,旨在允许在不改变DojoML或...
分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 ...利用Dojo实现拖动(Drag and Drop)效果