搞了搞Dojo，尝试使用其AMD（ Asynchronous Module Definition ）机制做了一个demo。
小试一下，仅体会到继承，防命名冲突这些好处，水平有限，仅作参考（为求简单，用了1.6以前版本的写法，而没用define那种）。
demo实现如下功能，对grid的数据分别提供4个button做加减乘除，结果摆到另一个grid。值为负值的标记为红色，如下图：
我的思路为：
1. 定义一个commonFunctions，封装一些公用的方法，就是将其作为一个父类。
2. 为加减乘除四个button分别定义一个module， 模拟4个功能模块。
3. 把store的构建也做成一个模块，其实没必要，装装B而已。
注意的是，dojo 的AMD 对js文件命名是有要求的，模块所声明的名字必须与文件名相匹配，类比java构建一个public类。
给出本demo的目录结构：
commonFunctions.js：
/**
* 说明：1. dojo.provide 告诉dojo 的装载器，名为my.commonFunctions的模块准备就绪，"commonFunctions"名字必须跟js的文件名一样（迷惑，不太理解其作用，这里我看dojo文档所理解的，但我的dojo版本为1.7.2 〉1.7，其实将其注释掉，程序还是没问题的）
* 2. dojo.declare 声明定义名为my.commonFunctions的模块, "commonFunctions"名字必须跟js的文件名一样
* 3. 其中"my"为js文件路径的一个别名，通过 dojo.registerModulePath("my","[你的webApp根目录]/testAMD")指定，（我的写在testAMD.jsp文件）
*/
dojo.provide('my.commonFunctions');
dojo.declare('my.commonFunctions', null, {
_initialized : {done: false},
_selectedItems: {},
_styleSumRow : function(row)
{
//row.customStyles = 'background-color:yellow;';
for( var r=0; r< this.sumGrid.rowCount; r++ )
{
for( var i=1; i< 7; i++ )
{
var cell = this.sumGrid.views.views[0].getCellNode(r, i);
if( cell )
{
dojo.style(cell, 'backgroundColor', '#ffff00');
dojo.style(cell, 'color', '#0000ff');
if( !isNaN(cell.innerHTML) && cell.innerHTML < 0 )
{
dojo.style(cell, 'color', '#ff0000');
}
}
}
}
},
_refreshToolbar: function(showReset)
{
if( showReset == true )
{
this.resetBtn.set('disabled', false);
this.plusBtn.set('disabled', true);
this.minusBtn.set('disabled', true);
this.multiBtn.set('disabled', true);
this.divisionBtn.set('disabled', true);
} else
{
this.resetBtn.set('disabled', true);
this.plusBtn.set('disabled', false);
this.minusBtn.set('disabled', false);
this.multiBtn.set('disabled', false);
this.divisionBtn.set('disabled', false);
}
},
_onAllCbxClick : function(newVal)
{
for( var rowIndex in this._selectedItems )
{
delete this._selectedItems[rowIndex];
}
if( newVal == true )
{
var arr = this.grid.selection.getSelected();
for( var i=0; i<arr.length; i++ )
{
this._selectedItems[i] = arr[i];
}
}
},
_returnSelectionCase: function()
{
var caseStr = '';
for( var rowIndex in this._selectedItems )
{
if( this._selectedItems.hasOwnProperty(rowIndex) )
{
var rowNum = Number(rowIndex)+1;
caseStr += (rowNum + ', ');
}
}
if( caseStr )
{
caseStr = caseStr.substr(0, caseStr.length-2);
caseStr = 'Row number: ' + caseStr + ' selected.';
}
else
{
caseStr = 'No selected row.';
}
return caseStr;
},
constructor : function()
{
console.log('common functions ready');
},
inti : function()
{
this.grid = dijit.byId('demoGrid');
this.sumGrid = dijit.byId('demoSumGrid');
this.plusBtn = dijit.byId('plusBtn');
this.minusBtn = dijit.byId('minusBtn');
this.multiBtn = dijit.byId('multiBtn');
this.divisionBtn = dijit.byId('divisionBtn');
this.selectionCase = dojo.byId('selectionCase');
if( this._initialized.done == false )
{
dojo.connect(this.sumGrid, 'onStyleRow', this, this._styleSumRow);
dojo.connect(this.grid.selection, 'onSelected', this, function(index)
{
if( !this._selectedItems[index] )
{
this._selectedItems[index] = this.grid.getItem(index);
}
this.selectionCase.innerHTML = this._returnSelectionCase();
}
);
dojo.connect(this.grid.selection, 'onDeselected', this, function(index)
{
delete this._selectedItems[index];
this.selectionCase.innerHTML = this._returnSelectionCase();
}
);
dojo.connect(this.grid.rowSelectCell, 'toggleAllSelection', this, this._onAllCbxClick);
this._initialized.done = true;
}
},
calResultRow : function(result, sumType, decimal)
{
if( !result.num1 )
{
return;
}
if( isNaN(decimal) )
decimal = 100;
// 这里做保留两位小数处理
var sumItem = {
sumType: sumType,
num1: (Math.round(result.num1 * decimal)) / decimal,
num2: (Math.round(result.num2 * decimal)) / decimal,
num3: (Math.round(result.num3 * decimal)) / decimal,
num4: (Math.round(result.num4 * decimal)) / decimal,
num5: (Math.round(result.num5 * decimal)) / decimal,
num6: (Math.round(result.num6 * decimal)) / decimal
};
if( this.sumGrid.store )
{
var item = this.sumGrid.store._getItemByIdentity(sumType);
if( item )
{
this.sumGrid.store.setValue(item, 'num1', sumItem.num1);
this.sumGrid.store.setValue(item, 'num2', sumItem.num2);
this.sumGrid.store.setValue(item, 'num3', sumItem.num3);
this.sumGrid.store.setValue(item, 'num4', sumItem.num4);
this.sumGrid.store.setValue(item, 'num5', sumItem.num5);
this.sumGrid.store.setValue(item, 'num6', sumItem.num6);
} else
{
this.sumGrid.store.newItem(sumItem);
}
}else {
var data = {
identifier: 'sumType',
items: [sumItem]
};
this.sumGrid.setStore(new dojo.data.ItemFileWriteStore({data: data}));
}
//this._refreshToolbar(true);
}
});
plusModule.js
/**
* dojo.require('my.commonFunctions') 声明使用该模块，看dojo.declare的方式表示my.plusModule模块继承于my.commonFunctions
*/
dojo.provide('my.plusModule');
dojo.require('my.commonFunctions');
dojo.declare('my.plusModule', my.commonFunctions, {
constructor : function() {
console.log('plus module is ready.');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.plusBtn, 'onClick', this, this.sumCellsValue);
},
sumCellsValue: function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 + item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 + item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 + item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 + item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 + item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 + item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '+');
}
});
minusModule.js
/**
*
*/
dojo.provide('my.minusModule');
dojo.require('my.commonFunctions');
dojo.declare('my.minusModule', my.commonFunctions, {
constructor : function()
{
console.log('minus moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.minusBtn, 'onClick', this, this.minusCellsValue);
},
minusCellsValue: function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 - item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 - item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 - item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 - item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 - item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 - item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '-');
}
});
multiModule.js
/**
*
*/
dojo.provide('my.multiModule');
dojo.require('my.commonFunctions');
dojo.declare('my.multiModule', my.commonFunctions, {
constructor : function()
{
console.log('multiplication moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.multiBtn, 'onClick', this, this.multiCellsValue);
},
multiCellsValue : function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 * item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 * item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 * item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 * item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 * item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 * item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '*');
}
});
deviModule.js
/**
*
*/
dojo.provide('my.deviModule');
dojo.require('my.commonFunctions');
dojo.declare('my.deviModule', my.commonFunctions, {
constructor : function()
{
console.log('division moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.divisionBtn, 'onClick', this, this.diviCellsValue);
},
diviCellsValue : function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 / item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 / item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 / item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 / item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 / item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 / item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '/', '100000000');
}
});
storeData.js
dojo.provide('my.storeData');
dojo.declare('my.storeData', null, {
setDemoStore: function()
{
var data = {
identifier: 'id',
items: [
{ id: 1, num1: 12.27, num2: 34.84, num3: 19.24, num4: 77.32, num5: 46.83, num6: 12.45 },
{ id: 2, num1: 43.47, num2: 62.84, num3: 91.68, num4: 38.28, num5: 14.04, num6: 82.35 },
{ id: 3, num1: -37.47, num2: 84.34, num3: -3.03, num4: -37.53, num5: -314.01, num6: -37.76 },
{ id: 4, num1: 84.67, num2: -74.34, num3: 63.25, num4: 27.09, num5: 54.07, num6: 53.32 },
{ id: 5, num1: 283.47, num2: -120.06, num3: 33.45, num4: -37.42, num5: -314.35, num6: -37.64 }
]
};
dijit.byId('demoGrid').setStore(new dojo.data.ItemFileWriteStore({data: data}));
},
constructor : function()
{
console.log('store data custructed');
},
});
testAMD.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<html>
<head>
<%
String contextPath = request.getContextPath();
%>
<title>Dojo AMD</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css">
<!-- 使用html标记 的dojo声明式组件必须 启用 parseOnLoad：true-->
<script type="text/javascript" src="<%=contextPath%>/lib/dojo-1.7.2/dojo/dojo.js"
djConfig="isDebug:true, parseOnLoad: true">
</script>
<script>
// 声明模块js文件的路径取别名 为“my”
dojo.registerModulePath("my","<%=contextPath%>/testAMD");
dojo.require('dojo.parser');
dojo.require('dijit.form.Button');
dojo.require("dijit.Toolbar");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require('my.storeData');
dojo.require('my.plusModule');
dojo.require('my.minusModule');
dojo.require('my.multiModule');
dojo.require('my.deviModule');
var storeModule = new my.storeData();
var plusModule = new my.plusModule();
var minusModule = new my.minusModule();
var multiModule = new my.multiModule();
var deviModule = new my.deviModule();
dojo.addOnLoad(function(){
storeModule.setDemoStore();
plusModule.inti();
minusModule.inti();
multiModule.inti();
deviModule.inti();
});
</script>
</head>
<body class="claro">
<div>
<div style="margin: 0 auto; text-align: center; position: relative;">
<div dojoType="dijit.Toolbar" region="top" align="left" style="width: 600px; margin: 0 auto; position: relative;" >
<div dojoType="dijit.form.Button"
id="plusBtn" style="position: relative;">
+ plus
</div>
<div dojoType="dijit.form.Button"
id="minusBtn" style="position: relative;">
- minus
</div>
<div dojoType="dijit.form.Button"
id="multiBtn" style="position: relative;">
* multiplication
</div>
<div dojoType="dijit.form.Button"
id="divisionBtn" style="position: relative;">
/ division
</div>
</div>
<table data-dojo-type="dojox.grid.EnhancedGrid" canSort="false" id="demoGrid"
data-dojo-props="plugins:{indirectSelection: {headerSelector:true}}"
style="width: 600px; margin: 0 auto; position: relative;" autoHeight="true">
<colgroup span="1" noscroll="true" />
<colgroup span="6" />
<thead>
<tr>
<th width="120px" field="num1"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column A</b>
</th>
<th width="120px" field="num2"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column B</b>
</th>
<th width="120px" field="num3"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column C</b>
</th>
<th width="120px" field="num4"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column D</b>
</th>
<th width="120px" field="num5"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column E</b>
</th>
<th width="120px" field="num6"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column F</b>
</th>
</tr>
</thead>
</table>
<div id="selectionCase"
style="margin: 0 auto; font-size: 15px; font-weight: bold; width: 600px; text-align: left; padding-top: 6px;">
</div>
<table data-dojo-type="dojox.grid.DataGrid" canSort="false" id="demoSumGrid"
style="margin: 0 auto; position: relative;" autoHeight="true" autoWidth="true">
<thead>
<tr>
<th width="80px" field="sumType"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Type</b>
</th>
<th width="120px" field="num1"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column A</b>
</th>
<th width="120px" field="num2"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column B</b>
</th>
<th width="120px" field="num3"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column C</b>
</th>
<th width="120px" field="num4"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column D</b>
</th>
<th width="120px" field="num5"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column E</b>
</th>
<th width="120px" field="num6"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column F</b>
</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
提供下载好了，只包含js文件以及一个jsp，dojo的到官网下载：http://download.dojotoolkit.org/release-1.7.2/
相关推荐
dojo full frame demo springboot demo for file temp.zip
DOJO Demo DOJO 学习文档+Demo 学习DOJO第一手资料
dojo 1.9 官方demo，学习好资料
本实例为dojo官方例子，里面包含了dojo-release-1.10.0版本，本人测试demo1需要在Tomcat服务环境下才能运行，demo2、demo3可以直接点击里面的demo.html首页运行
myeclipse9项目文件，包含官方下载的demos和自带的dojo1.8.3包.由于文件太大，去掉了dojo的util文件夹，应该不影响运行。
基于DOJO官网DEMO提取与2013年1月
dojo-release-1.7.2.tar.gz dojo jquery js
内容包括jodo完整的工具,以及相关的一个事例项目jodox
二级下拉菜单DEMO，我博客分享要用
这个dojo1.7.2版本的用起来应该会比以前的版本的更好用，里面的一些冗余的js文件已经被删除。整合了一个dojox文件。
dojo 最新版 1.7.2 ，是DOJO 的官网支持
dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
是dojo0.4.3中的demo程序，可以看看
实例VS2010代码 dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
最新dojo demo 范例 例子 希望对大家有帮助
这是一个演示，用于展示如何使用 dojo (1.9.2) 构建和连接单屏幕 Web 应用程序。 该演示使用 Spring Boot ( ) 来启动演示。 启动应用程序； mvn spring-boot:run为生产构建 JS mvn exec:exec** 确保更改 index.html ...
dojo js dojo js dojo js dojo js dojo js dojo js dojo js