- 浏览: 26542 次
- 性别:
- 来自: 西安
-
最新评论
-
wangzhe_real:
有个问题能请教一下吗?为啥我写的url通过您那种方式却没有请求 ...
dojo学习总结-dojox.grid.DataGrid
简介
Dojo 是一个可移植的开源 JavaScript 工具包,使用它可以快速构建富客户端 Web 应用程序。它包含的丰富的实用程序可用于构建快速响应的应用程序。而且,它还提供了许多预先封装的开箱即用小部件,您可以通过这些小部件立即开始使用 Dojo。但是,Dojo 没有提供文档来详细演示如何使用每种小部件,比如 Dojo Grid。Dojo Grid 在某种程度上就像一种可以在网页上呈现的微型电子表格。本文将从模型-视图-控制器(MVC)设计模式的角度指导您使用 Dojo Grid 的主要功能,帮助您轻松理解和掌握 Dojo Grid,即使您以前从未使用过它。
MVC 是软件工程领域使用的一种架构模式。模式的成功使用可以将业务逻辑问题与用户界面分离开来,使开发人员能够自由修改一种业务逻辑,而不会影响到其他逻辑。这种模式的控制器通过用户界面处理输入事件,触发在后台的模型修改。模型操作应用程序数据,视图使用模型来向用户呈现结果。这种模式被广泛应用于许多框架中,比如 Microsoft® MFC、Java™ Swing、Java Enterprise Edition 等。下面各节将分别介绍按 MVC 划分的表格特性。
回页首
模型
为了区分原始数据与 UI 的生动外观,Dojo Grid 维护着一个数据模型,用来存储表格将会操作的所有原始数据。例如,日期/时间类型数据通常以毫秒为单位进行存储,而不是存储为 “2009-7-22” 等人类可读的格式,所以可以更加轻松地构造并将它转换为其他类型的日期对象。
与所有 MVC 小部件一样,表格具有自己的数据模型,称为数据存储。在 Dojo 中,几乎所有需要使用数据存储的小部件都能够使用 ItemFileReadStore 和 ItemFileWriteStore 等函数访问通用数据存储,无需使用特定于它们的数据的新 API。
ItemFileReadStore 用于读取特定格式的 JSON 数据。DojoX 项目还提供了 XmlStore、CsvStore 和 OpmlStore 等更多存储方式。这些存储方式用于处理可以相应格式输出数据的服务器。
在 Dojo Grid 和许多其他 MVC 小部件中,所有数据通常都以项或项的属性的形式在数据存储中操作。通过这种方式,可以采用一种标准方式访问数据,许多小部件可同时使用数据。清单 1 给出了本文中使用的示例数据存储结构。
清单 1. 简单数据存储结构示例
{
identifier: 'id',
label:'name',
items: [
{id:0, name: 'Alex', manager: true, sex: 'Male', age:30, date: 1097990400000,
annualLeaveTotal: 15, annualLeaveTaken:2},
{id:1, name: 'Jack', manager: false, sex: 'Male', age:26, date: 1184995200000,
annualLeaveTotal: 10, annualLeaveTaken:3},
{id:2, name: 'Rose', manager: true, sex: 'Female', age:40, date: 894604800000,
annualLeaveTotal: 20, annualLeaveTaken:4},
{id:3, name: 'Wang', manager: true, sex: 'Male', age:44, date: 836630400000,
annualLeaveTotal: 20, annualLeaveTaken:5},
…..
}
在本示例中:
每项都有 8 个属性。
id 属性是一个唯一标识符。
数据存储可以采用两种方式构建:声明为标记或以编程方式构造。
使用标记构建数据存储
要使用标记构建数据存储,首先需要用于有序存储所有数据的 JSON 文件(参见清单 2)。本文使用的是 data.json 文件。,然后可以在 HTML 文件中编写清单 2 中的标记。
清单 2. 在 HTML 中声明数据存储
<span dojoType="dojo.data.ItemFileWriteStore" jsId="myStore"
url="data.json"></span>
接下来,将存储分配给表格,如清单 3 所示。
清单 3. 分配表格数据存储
<table id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" store="myStore"
rowSelector="10px">
<thead>
...
<thead>
<table>
现在,当 Dojo 解析 HTML 代码并构造此表格时,它创建一个 Dojo 存储对象,该对象将从 data.json 文件获取数据,然后将表格存储设置为 “myStore”。图 1 显示了生成的表格的一个示例。
图 1. 构造得到的简单表格
此数据表格显示了一个员工信息表,在每行上包含每个员工的数据,就像电子表格一样
使用标记构建表格存储非常简单快捷。但是,如果数据来自一台服务器并且以动态形式组织,那么您需要以编程方式构建表格和它的存储。
以编程方式构建数据存储
要动态地构造和更改表格的存储,同时对服务器端做出响应,您必须:
使用 JavaScript 以编程方式将传入的数据重新组织为 Dojo 熟悉的数据。
创建一个 Dojo 存储。
将存储设置为表格。
清单 4 中的代码将一个 JSON 对象构造为数据存储格式。
清单 4. 重新组织数据
generateStoreData: function(/*JSON array*/itemList){
var data = {};
var items = [];
for (var i = 0; i < itemList.length; i++) {
var item = {};
item["id"] = itemList[i].id;
item["name"] = itemList[i].name;
item["manger"] = itemList[i].isManger;
item["sex"] = itemList[i].sex;
item["age"] = itemList[i].age;
item["date"] = itemList[i].date;
item["annualLeaveTotal"] = itemList[i].altotal;
item["annualLeaveTaken"] = itemList[i].altaken;
items.push(item);
}
data["identifier"] = "id";
data["label"] = "name";
data["items"] = items;
return data;
}
接下来,可以创建一个存储并将其设置为表格。
清单 5. 创建并设置表格存储
dijit.byId("grid").store = new dojo.data.ItemFileReadStore({
data: this.generateStoreData(itemList)
});
所有这些步骤所得到的表格与 图 1 所示完全一样。
查询数据存储
Dojo Grid 通常在其数据模型中存储整个数据源。但是,随着数据大小的不断增长,这可能影响到性能。实际上,当 Dojo Grid 存储中的项超出了一定数量时,并且如果每项都具有许多属性,排序、搜索和呈现等表格操作的性能就会显著下降。
但是,可以通过一些方式来改善性能。可以编写代码来让服务器向浏览器发送有限的数据,并将这些数据构造到一个表格数据存储中,或者可以使用或扩展 Dojox 项目提供的 QueryReadStore 来从服务器动态加载数据。这种方法可用于从服务器上大型的数据存储中检索数据块。
清单 6. 使用查询存储来处理大型数据
<div dojoType="dojox.data.QueryReadStore" jsId="store" url="../someServlet"
requestMethod="post"></div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" store="store"
sortFields="[{attribute: 'name', descending: true}]" rowsPerPage="30"> </div>
<div id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" model="model" structure="layout"
rowSelector="10px"><div>
DojoX 项目提供了许多其他数据存储来满足不同的用途。表 1 给出了 Dojo 中目前可用的存储以及它们的目标。
表 1. Dojo 中的可用存储
Dojo 存储 用途
dojo.data.ItemFileReadStore 用于 JSON 数据的只读存储。
dojo.data.ItemFileWriteStore 用于 JSON 数据的读/写存储。
dojox.data.CsvStore 用于逗号分隔变量 (CSV) 格式数据的只读存储。
dojox.data.OpmlStore 用于大纲处理标记语言(Outline Processor Markup Language,OPML)的只读存储。
dojox.data.HtmlTableStore 用于 HTML 格式表格中所保存数据的只读存储
dojox.data.XmlStore 用于基本 XML 数据的读/写存储。
dojox.data.FlickrStore 针对 flickr.com 上的查询的读取存储,是 Web 服务数据存储的一个出色示例。
dojox.data.FlickrRestStore 针对 flickr.com 上的查询的读取存储,是 Web 服务数据存储的一个出色示例。这是 FlickrStore 的一个更高级的版本。
dojox.data.QueryReadStore 类似于 ItemFileReadStore,是用于 JSON 数据的只读存储,但会在收到每个请求时查询服务器。
dojox.data.AtomReadStore 用于 Atom XML 文档的读取存储。
自定义 Dojo 数据存储
您也可以使用 Dojo.data API 编写自定义数据存储,数据访问应该划分为几个部分,而且数据存储应该使用合适的 API 实现每一部分。
dojo.data.api.Read 支持读取数据项和这些数据项的属性。这也包括搜索、排序和过滤数据项。
dojo.data.api.Write 支持创建、删除和更新数据项和这些数据项的属性。不是所有的后端服务都支持修改数据项。实际上,大部分公共服务,比如 Flikr、Delicious 和 GoogleMaps,都主要是基于读取的数据提供程序。
dojo.data.api.Identity 支持基于项目的唯一标识符(如果它有)来定位和查找项目。不是所有的数据格式都具有可用于查找数据项的唯一标识符。
dojo.data.api.Notification 支持通知监听程序发生在存储中的数据项上的变更事件。一个项的基本变更事件包括创建、删除和更新。这些变更对于会定期轮询后端服务以进行数据刷新的数据存储尤其有用。
回页首
视图
在 MVC 设计模式中,视图从模型检索应用程序数据并将其呈现给用户。表格提供了许多函数来简化对呈现的更改。在以下几节中,我将展示一些典型用法,从视图角度演示强大的表格功能。.
使用标记进行表格布局定义
总体而言,表格可以在 HTML 标记中以声明方式定义,也可以在 JavaScript 中以编程方式定义。清单 7 给出了一个使用标记的高级结构定义,它会生成如图 2 所示的显示外观。
清单 7. 使用标记定义布局的 JavaScript 代码
<table id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" store="myStore"
rowSelector="10px">
<thead>
<tr>
<th field="id" width="10px">ID</th>
<th field="name">Name</th>
<th field="manager" with="50px">Is manager</th>
<th field="sex" width="50px">Sex</th>
<th field="age" width="50px">Age</th>
<th field="date" width="100px">On Board date</th>
</tr>
<tr>
<th field="annualLeaveTotal" colspan="3">
Total annual leave days
</th>
<th field="annualLeaveTaken" colspan="3">
Annual leave days already taken
</th>
</tr>
</thead>
</table>
图 2. 使用标记定义布局的表格
这个电子表格样式的表格在顶部显示了一组标签,在底部显示了各个员工的数据
以编程方式定义表格布局
表的结构也可以以编程方式设置。structure 属性可以指定一个对象来定义单元格结构。
清单 8. 以编程方式定义布局的 JavaScript 代码
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field:'manager',
width:'100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
},{
name: 'On Board date',
field: 'date',
width: '100px'
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}];
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: myStore,
structure: layout
}, dojo.byId('grid'));
锁定列,禁用横向滚动
可以锁定 一组列,阻止它们横向滚动,而允许其他列继续滚动。要实现此功能,您可以使用两种结构并将一种结构的 noscroll 属性设置为 true。
在清单 9 所示的示例中,声明了两种结构。针对 ID 和 Name 列的结构的 noscroll 属性设置为 true。然后使用一个数组将这两种结构组合到一个布局结构中。
清单 9 .锁定 ID 和 Name 列的 JavaScript 代码
var fixlayout = {
noscroll: true,
cells: [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}]
};
var mainlayout = {
onBeforeRow: beforerow,
onAfterRow: afterrow,
cells: [{
name: 'Is manager',
field: 'manager',
width: '200px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}]
};
var layout = [fixlayout, mainlayout];
从图 3 可以看出 ID 和 Name 列已被锁定,但剩余的列仍然可以横向滚动。
图 3. 具有固定列的表格
这个表格中数据与图 2 中的表格相同,但现在横向滚动条仅适用于 ID 和 Name 右侧的列
包含多行数据的行
表格支持单个逻辑行包含多行数据。这可以通过将 colSpan 属性添加到布局定义中来实现,如清单 10 所示。
清单 10. 定义包含多行数据的行的 JavaScript 代码
var layout = [[{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field:'manager',
width:'100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
},{
name: 'On Board date',
field: 'date',
width: '100px'
}], [ {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
colSpan: '2'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
colSpan: '2'
}]];
名为 “Total annual leave days” 和 “Annual leave days already taken” 的列与其他列的数据位于同一行
图 4. 具有多行的表格
同样是相同的表格,但现在 Total annual leave days 列扩展到了 ID 和 Name 列之下,Annual leave days already taken 扩展到了 Is Manager 和 Sex 列之下
表格数据格式
可以使用一种表格格式函数来更改数据存储中的数据的呈现方式。这是 MVC 的一种核心概念。它可以定义一种符合用户当地习惯的数据格式,比如日期,甚至可以构造 HTML 组件,比如复选框。清单 11 给出了一个示例。
清单 11. 格式化表格数据的 JavaScript 代码
var dateFormatter = function(data, rowIndex){
return dojo.date.locale.format(new Date(data), {
datePattern: "dd MMM yyyy",
selector: "date",
locale: "en"
});
};
var managerFormatter = function(data, rowIndex){
if (data) {
return "<input type='checkbox' checked />";
}
else {
return "<input type='checkbox' />";
}
};
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}];
图 5. 表格数据格式
此表格要求 On Board Date 列的格式为 DD-MMM-YYYY,Is manager 显示复选框,而不是 true/false
使用 get interface
您可以使用 get interface 在数据存储之外定义其他列来动态检索值。在上面的例子中,我拥有 “Total annual leave days” 和 “Annual leave days already taken” 列。如果您想知道还有多少天年假(可以根据现有的两列计算得出),可以使用 get interface 动态检索它。
我添加了一个名为 “Annual leave days left” 的新列,它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差,如清单 12 所示。
清单 12. 使用 get interface 的 JavaScript 代码
function getLeftDays(rowIndex, item){
if (item != null) {
return item.annualLeaveTotal - item.annualLeaveTaken;
}
}
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}, {
name: 'Annual leave days left',
get: getLeftDays,
width: '100px'
}];
图 6. 使用 get interface
此表格具有一个新列 “Annual leave days left”,它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差
回页首
控制器
在 MVC 设计模式中,控制器处理和响应事件(通常为用户操作),并且可以间接调用模型上的变更。Dojo Grid 中的控制器具有非常强大的功能,它提供了许多方法来自定义表格行为,例如如何处理事件、如何排序数据、如何过滤数据等。
在以下各节中,我将展示如何在 Dojo Grid 中使用和自定义控制器。
事件处理
Dojo Grid 具有一种强大的事件处理机制,它根据不同的表格元素和事件类型来提供事件调用接口。例如,它可以在一行或单元格上响应 click 事件,它也可以响应 mouseover 事件。所以,在自定义这些事件处理方式来执行特定操作时,它非常有用。
我以 onCellClick 为例演示一下如何在 Dojo Grid 上添加自己的处理程序。在本例中,我自定义该方法来显示单元格的值以及行和列的索引。(参见清单 13)。
清单 13. 自定义表格的 onCellClick 事件处理程序的 Javascript 代码
<script>
var showDetail = function(e){
var value = e.cellNode.firstChild.data;
alert('value:' + value + " column:" + e.cellIndex + " row:" + e.rowIndex);
}
dojo.addOnLoad(function(){
dojo.connect(grid, "onCellClick", showDetail);
}
</script>
首先,您需要定义事件处理程序 showDetail 来显示单元格详细信息(值、列索引和行索引)。接下来,您需要使用 dojo.connect 来将自定义处理程序连接到 onCellClick 事件。您必须在 dojo.addOnLoad 中执行同样的操作,因为该方法可确保所有 Dojo 小部件都已完成初始化并可供使用。
当用户单击表格的单元格时,应用程序将显示一个警报窗口。图 7 显示了得到的结果。
图 7. 表格的自定义事件处理程序
练习中的表格显示了一个弹出对话框,其中显示 “value:40 column:4 row:2”
自定义排序
Dojo Grid 提供了根据列的数据类型来排序的基本排序功能。例如,在我的示例中,ID 列按照数字顺序进行排序,名称列按照字母顺序进行排序。
Dojo Grid 中的排序功能也可以自定义。您可以定义自定义排序行为或阻止用户对某些列排序。如果您不希望用户对某些列排序,可以使用 Dojo Grid 的 canSort 属性来指定哪些列可以排序。
清单 14 给出了禁用 ID 列的排序功能的 JavaScript 代码。
清单 14. 指定哪些列可以排序的 Javascript 代码
<script>
dojo.addOnLoad(function(){
grid.canSort = function(index) {
if(index == 1) return false;
return true;
};
}
</script>
参数索引为表格的列索引,从 1 开始。如果 canSort 函数返回 false,则表示禁用了列排序功能。
除了指定哪些列可以排序之外,您还可以指定如何对列进行排序。我在示例中使用 Name 列为例。图 8 显示了 Dojo Grid 的默认排序行为。
图 8. Dojo Grid 的默认排序行为
此表格中 Name 列中的数据以 ASCII 码降序排列,可以单击列标题中的三角符号更改排序顺序
我按降序对名称列进行排序。请注意最后 3 行:顺序为 Victor、Wang 和 vicky。表格的默认排序方式是区分大小写的,并使用 ASCII 码顺序进行排序。所以,小写字母将排在大写字母之后。但是,这种行为不符合软件全球化标准。在这种情况下,您需要自定义排序函数来支持全球化的排序方式。
看一下清单 5 中的 JavaScript 代码,查看如何自定义 Dojo Grid 的排序函数。
清单 15. 自定义 Dojo Grid 的排序函数
<script>
dojo.addOnLoad(function(){
myStore.comparatorMap = {};
myStore.comparatorMap["name"] = function (a, b) {
return a.localeCompare(b);
}
}
</script>
数据存储对象中有一个名为 comparatorMap 的字段,有了它就可以更改排序行为。在本示例中,我为名称列定义了一个比较方法,使用 localeCompare 来支持全球化排序。图 9 显示了经过排序自定义之后的结果。
图 9. 自定义的 Dojo Grid 排序行为
此表格显示的员工信息与图 8 中相同,但 Name 列按字母降序排列,并且忽略了名称的大小写
过滤器
Dojo Grid 提供一种非常方便的方式来在客户端过滤数据。您可以定义一列的过滤条件。清单 16 展示了如何过滤表格,仅显示以字母 A 开头的名称。
清单 16. 过滤名称列
<div dojoType="dijit.form.Button">filter name
<script type="dojo/method" event="onClick" args="evt">
// Filter the name from the data store:
grid.filter({name: "A*"});
</script>
</div>
单击 filter name 按钮之后,过滤结果将如图 10 所示。
图 10. 经过过滤的表格
单击底部的 “filter name” 按钮之后表格中显示的数据集,列表中仅包含:Alex 和 Alice
回页首
结束语
本文通过 MVC 设计模式介绍了 Dojo Grid 的主要功能。通常,可以采用多种方式实现一项功能。例如,要在表格中显示日期,既可以使用字符串来在数据存储中表示日期,也可以声明一个 long 并在最终显示中为其设置正确的格式。咋看起来,第一种选择似乎更简单。但是,如果需要使表格全球化,后一种选择更好。希望您在自己的 Dojo Grid 项目中使用 MVC 设计模式。您将会进一步提高代码的健壮性和可重用性。
参考资料
查阅 Wikipedia,了解 MVC 设计模式 的定义。
在 Dojo 工具包 官方网站上找到 Dojo 库的更多信息。
查阅 Dojo Grid,获取 Dojo Grid 参考知识。
阅读 “Dojo Grid 1.2”,了解 Dojo Grid 1.2 中引入的新特性。
developerWorks 技术活动和网络广播:随时关注 developerWorks 技术活动和网络广播。
developerWorks Web development 专区:通过专门关于 Web 技术的文章和教程,扩展您在网站开发方面的技能。
Dojo 是一个可移植的开源 JavaScript 工具包,使用它可以快速构建富客户端 Web 应用程序。它包含的丰富的实用程序可用于构建快速响应的应用程序。而且,它还提供了许多预先封装的开箱即用小部件,您可以通过这些小部件立即开始使用 Dojo。但是,Dojo 没有提供文档来详细演示如何使用每种小部件,比如 Dojo Grid。Dojo Grid 在某种程度上就像一种可以在网页上呈现的微型电子表格。本文将从模型-视图-控制器(MVC)设计模式的角度指导您使用 Dojo Grid 的主要功能,帮助您轻松理解和掌握 Dojo Grid,即使您以前从未使用过它。
MVC 是软件工程领域使用的一种架构模式。模式的成功使用可以将业务逻辑问题与用户界面分离开来,使开发人员能够自由修改一种业务逻辑,而不会影响到其他逻辑。这种模式的控制器通过用户界面处理输入事件,触发在后台的模型修改。模型操作应用程序数据,视图使用模型来向用户呈现结果。这种模式被广泛应用于许多框架中,比如 Microsoft® MFC、Java™ Swing、Java Enterprise Edition 等。下面各节将分别介绍按 MVC 划分的表格特性。
回页首
模型
为了区分原始数据与 UI 的生动外观,Dojo Grid 维护着一个数据模型,用来存储表格将会操作的所有原始数据。例如,日期/时间类型数据通常以毫秒为单位进行存储,而不是存储为 “2009-7-22” 等人类可读的格式,所以可以更加轻松地构造并将它转换为其他类型的日期对象。
与所有 MVC 小部件一样,表格具有自己的数据模型,称为数据存储。在 Dojo 中,几乎所有需要使用数据存储的小部件都能够使用 ItemFileReadStore 和 ItemFileWriteStore 等函数访问通用数据存储,无需使用特定于它们的数据的新 API。
ItemFileReadStore 用于读取特定格式的 JSON 数据。DojoX 项目还提供了 XmlStore、CsvStore 和 OpmlStore 等更多存储方式。这些存储方式用于处理可以相应格式输出数据的服务器。
在 Dojo Grid 和许多其他 MVC 小部件中,所有数据通常都以项或项的属性的形式在数据存储中操作。通过这种方式,可以采用一种标准方式访问数据,许多小部件可同时使用数据。清单 1 给出了本文中使用的示例数据存储结构。
清单 1. 简单数据存储结构示例
{
identifier: 'id',
label:'name',
items: [
{id:0, name: 'Alex', manager: true, sex: 'Male', age:30, date: 1097990400000,
annualLeaveTotal: 15, annualLeaveTaken:2},
{id:1, name: 'Jack', manager: false, sex: 'Male', age:26, date: 1184995200000,
annualLeaveTotal: 10, annualLeaveTaken:3},
{id:2, name: 'Rose', manager: true, sex: 'Female', age:40, date: 894604800000,
annualLeaveTotal: 20, annualLeaveTaken:4},
{id:3, name: 'Wang', manager: true, sex: 'Male', age:44, date: 836630400000,
annualLeaveTotal: 20, annualLeaveTaken:5},
…..
}
在本示例中:
每项都有 8 个属性。
id 属性是一个唯一标识符。
数据存储可以采用两种方式构建:声明为标记或以编程方式构造。
使用标记构建数据存储
要使用标记构建数据存储,首先需要用于有序存储所有数据的 JSON 文件(参见清单 2)。本文使用的是 data.json 文件。,然后可以在 HTML 文件中编写清单 2 中的标记。
清单 2. 在 HTML 中声明数据存储
<span dojoType="dojo.data.ItemFileWriteStore" jsId="myStore"
url="data.json"></span>
接下来,将存储分配给表格,如清单 3 所示。
清单 3. 分配表格数据存储
<table id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" store="myStore"
rowSelector="10px">
<thead>
...
<thead>
<table>
现在,当 Dojo 解析 HTML 代码并构造此表格时,它创建一个 Dojo 存储对象,该对象将从 data.json 文件获取数据,然后将表格存储设置为 “myStore”。图 1 显示了生成的表格的一个示例。
图 1. 构造得到的简单表格
此数据表格显示了一个员工信息表,在每行上包含每个员工的数据,就像电子表格一样
使用标记构建表格存储非常简单快捷。但是,如果数据来自一台服务器并且以动态形式组织,那么您需要以编程方式构建表格和它的存储。
以编程方式构建数据存储
要动态地构造和更改表格的存储,同时对服务器端做出响应,您必须:
使用 JavaScript 以编程方式将传入的数据重新组织为 Dojo 熟悉的数据。
创建一个 Dojo 存储。
将存储设置为表格。
清单 4 中的代码将一个 JSON 对象构造为数据存储格式。
清单 4. 重新组织数据
generateStoreData: function(/*JSON array*/itemList){
var data = {};
var items = [];
for (var i = 0; i < itemList.length; i++) {
var item = {};
item["id"] = itemList[i].id;
item["name"] = itemList[i].name;
item["manger"] = itemList[i].isManger;
item["sex"] = itemList[i].sex;
item["age"] = itemList[i].age;
item["date"] = itemList[i].date;
item["annualLeaveTotal"] = itemList[i].altotal;
item["annualLeaveTaken"] = itemList[i].altaken;
items.push(item);
}
data["identifier"] = "id";
data["label"] = "name";
data["items"] = items;
return data;
}
接下来,可以创建一个存储并将其设置为表格。
清单 5. 创建并设置表格存储
dijit.byId("grid").store = new dojo.data.ItemFileReadStore({
data: this.generateStoreData(itemList)
});
所有这些步骤所得到的表格与 图 1 所示完全一样。
查询数据存储
Dojo Grid 通常在其数据模型中存储整个数据源。但是,随着数据大小的不断增长,这可能影响到性能。实际上,当 Dojo Grid 存储中的项超出了一定数量时,并且如果每项都具有许多属性,排序、搜索和呈现等表格操作的性能就会显著下降。
但是,可以通过一些方式来改善性能。可以编写代码来让服务器向浏览器发送有限的数据,并将这些数据构造到一个表格数据存储中,或者可以使用或扩展 Dojox 项目提供的 QueryReadStore 来从服务器动态加载数据。这种方法可用于从服务器上大型的数据存储中检索数据块。
清单 6. 使用查询存储来处理大型数据
<div dojoType="dojox.data.QueryReadStore" jsId="store" url="../someServlet"
requestMethod="post"></div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" store="store"
sortFields="[{attribute: 'name', descending: true}]" rowsPerPage="30"> </div>
<div id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" model="model" structure="layout"
rowSelector="10px"><div>
DojoX 项目提供了许多其他数据存储来满足不同的用途。表 1 给出了 Dojo 中目前可用的存储以及它们的目标。
表 1. Dojo 中的可用存储
Dojo 存储 用途
dojo.data.ItemFileReadStore 用于 JSON 数据的只读存储。
dojo.data.ItemFileWriteStore 用于 JSON 数据的读/写存储。
dojox.data.CsvStore 用于逗号分隔变量 (CSV) 格式数据的只读存储。
dojox.data.OpmlStore 用于大纲处理标记语言(Outline Processor Markup Language,OPML)的只读存储。
dojox.data.HtmlTableStore 用于 HTML 格式表格中所保存数据的只读存储
dojox.data.XmlStore 用于基本 XML 数据的读/写存储。
dojox.data.FlickrStore 针对 flickr.com 上的查询的读取存储,是 Web 服务数据存储的一个出色示例。
dojox.data.FlickrRestStore 针对 flickr.com 上的查询的读取存储,是 Web 服务数据存储的一个出色示例。这是 FlickrStore 的一个更高级的版本。
dojox.data.QueryReadStore 类似于 ItemFileReadStore,是用于 JSON 数据的只读存储,但会在收到每个请求时查询服务器。
dojox.data.AtomReadStore 用于 Atom XML 文档的读取存储。
自定义 Dojo 数据存储
您也可以使用 Dojo.data API 编写自定义数据存储,数据访问应该划分为几个部分,而且数据存储应该使用合适的 API 实现每一部分。
dojo.data.api.Read 支持读取数据项和这些数据项的属性。这也包括搜索、排序和过滤数据项。
dojo.data.api.Write 支持创建、删除和更新数据项和这些数据项的属性。不是所有的后端服务都支持修改数据项。实际上,大部分公共服务,比如 Flikr、Delicious 和 GoogleMaps,都主要是基于读取的数据提供程序。
dojo.data.api.Identity 支持基于项目的唯一标识符(如果它有)来定位和查找项目。不是所有的数据格式都具有可用于查找数据项的唯一标识符。
dojo.data.api.Notification 支持通知监听程序发生在存储中的数据项上的变更事件。一个项的基本变更事件包括创建、删除和更新。这些变更对于会定期轮询后端服务以进行数据刷新的数据存储尤其有用。
回页首
视图
在 MVC 设计模式中,视图从模型检索应用程序数据并将其呈现给用户。表格提供了许多函数来简化对呈现的更改。在以下几节中,我将展示一些典型用法,从视图角度演示强大的表格功能。.
使用标记进行表格布局定义
总体而言,表格可以在 HTML 标记中以声明方式定义,也可以在 JavaScript 中以编程方式定义。清单 7 给出了一个使用标记的高级结构定义,它会生成如图 2 所示的显示外观。
清单 7. 使用标记定义布局的 JavaScript 代码
<table id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" store="myStore"
rowSelector="10px">
<thead>
<tr>
<th field="id" width="10px">ID</th>
<th field="name">Name</th>
<th field="manager" with="50px">Is manager</th>
<th field="sex" width="50px">Sex</th>
<th field="age" width="50px">Age</th>
<th field="date" width="100px">On Board date</th>
</tr>
<tr>
<th field="annualLeaveTotal" colspan="3">
Total annual leave days
</th>
<th field="annualLeaveTaken" colspan="3">
Annual leave days already taken
</th>
</tr>
</thead>
</table>
图 2. 使用标记定义布局的表格
这个电子表格样式的表格在顶部显示了一组标签,在底部显示了各个员工的数据
以编程方式定义表格布局
表的结构也可以以编程方式设置。structure 属性可以指定一个对象来定义单元格结构。
清单 8. 以编程方式定义布局的 JavaScript 代码
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field:'manager',
width:'100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
},{
name: 'On Board date',
field: 'date',
width: '100px'
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}];
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: myStore,
structure: layout
}, dojo.byId('grid'));
锁定列,禁用横向滚动
可以锁定 一组列,阻止它们横向滚动,而允许其他列继续滚动。要实现此功能,您可以使用两种结构并将一种结构的 noscroll 属性设置为 true。
在清单 9 所示的示例中,声明了两种结构。针对 ID 和 Name 列的结构的 noscroll 属性设置为 true。然后使用一个数组将这两种结构组合到一个布局结构中。
清单 9 .锁定 ID 和 Name 列的 JavaScript 代码
var fixlayout = {
noscroll: true,
cells: [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}]
};
var mainlayout = {
onBeforeRow: beforerow,
onAfterRow: afterrow,
cells: [{
name: 'Is manager',
field: 'manager',
width: '200px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}]
};
var layout = [fixlayout, mainlayout];
从图 3 可以看出 ID 和 Name 列已被锁定,但剩余的列仍然可以横向滚动。
图 3. 具有固定列的表格
这个表格中数据与图 2 中的表格相同,但现在横向滚动条仅适用于 ID 和 Name 右侧的列
包含多行数据的行
表格支持单个逻辑行包含多行数据。这可以通过将 colSpan 属性添加到布局定义中来实现,如清单 10 所示。
清单 10. 定义包含多行数据的行的 JavaScript 代码
var layout = [[{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field:'manager',
width:'100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
},{
name: 'On Board date',
field: 'date',
width: '100px'
}], [ {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
colSpan: '2'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
colSpan: '2'
}]];
名为 “Total annual leave days” 和 “Annual leave days already taken” 的列与其他列的数据位于同一行
图 4. 具有多行的表格
同样是相同的表格,但现在 Total annual leave days 列扩展到了 ID 和 Name 列之下,Annual leave days already taken 扩展到了 Is Manager 和 Sex 列之下
表格数据格式
可以使用一种表格格式函数来更改数据存储中的数据的呈现方式。这是 MVC 的一种核心概念。它可以定义一种符合用户当地习惯的数据格式,比如日期,甚至可以构造 HTML 组件,比如复选框。清单 11 给出了一个示例。
清单 11. 格式化表格数据的 JavaScript 代码
var dateFormatter = function(data, rowIndex){
return dojo.date.locale.format(new Date(data), {
datePattern: "dd MMM yyyy",
selector: "date",
locale: "en"
});
};
var managerFormatter = function(data, rowIndex){
if (data) {
return "<input type='checkbox' checked />";
}
else {
return "<input type='checkbox' />";
}
};
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}];
图 5. 表格数据格式
此表格要求 On Board Date 列的格式为 DD-MMM-YYYY,Is manager 显示复选框,而不是 true/false
使用 get interface
您可以使用 get interface 在数据存储之外定义其他列来动态检索值。在上面的例子中,我拥有 “Total annual leave days” 和 “Annual leave days already taken” 列。如果您想知道还有多少天年假(可以根据现有的两列计算得出),可以使用 get interface 动态检索它。
我添加了一个名为 “Annual leave days left” 的新列,它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差,如清单 12 所示。
清单 12. 使用 get interface 的 JavaScript 代码
function getLeftDays(rowIndex, item){
if (item != null) {
return item.annualLeaveTotal - item.annualLeaveTaken;
}
}
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}, {
name: 'Annual leave days left',
get: getLeftDays,
width: '100px'
}];
图 6. 使用 get interface
此表格具有一个新列 “Annual leave days left”,它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差
回页首
控制器
在 MVC 设计模式中,控制器处理和响应事件(通常为用户操作),并且可以间接调用模型上的变更。Dojo Grid 中的控制器具有非常强大的功能,它提供了许多方法来自定义表格行为,例如如何处理事件、如何排序数据、如何过滤数据等。
在以下各节中,我将展示如何在 Dojo Grid 中使用和自定义控制器。
事件处理
Dojo Grid 具有一种强大的事件处理机制,它根据不同的表格元素和事件类型来提供事件调用接口。例如,它可以在一行或单元格上响应 click 事件,它也可以响应 mouseover 事件。所以,在自定义这些事件处理方式来执行特定操作时,它非常有用。
我以 onCellClick 为例演示一下如何在 Dojo Grid 上添加自己的处理程序。在本例中,我自定义该方法来显示单元格的值以及行和列的索引。(参见清单 13)。
清单 13. 自定义表格的 onCellClick 事件处理程序的 Javascript 代码
<script>
var showDetail = function(e){
var value = e.cellNode.firstChild.data;
alert('value:' + value + " column:" + e.cellIndex + " row:" + e.rowIndex);
}
dojo.addOnLoad(function(){
dojo.connect(grid, "onCellClick", showDetail);
}
</script>
首先,您需要定义事件处理程序 showDetail 来显示单元格详细信息(值、列索引和行索引)。接下来,您需要使用 dojo.connect 来将自定义处理程序连接到 onCellClick 事件。您必须在 dojo.addOnLoad 中执行同样的操作,因为该方法可确保所有 Dojo 小部件都已完成初始化并可供使用。
当用户单击表格的单元格时,应用程序将显示一个警报窗口。图 7 显示了得到的结果。
图 7. 表格的自定义事件处理程序
练习中的表格显示了一个弹出对话框,其中显示 “value:40 column:4 row:2”
自定义排序
Dojo Grid 提供了根据列的数据类型来排序的基本排序功能。例如,在我的示例中,ID 列按照数字顺序进行排序,名称列按照字母顺序进行排序。
Dojo Grid 中的排序功能也可以自定义。您可以定义自定义排序行为或阻止用户对某些列排序。如果您不希望用户对某些列排序,可以使用 Dojo Grid 的 canSort 属性来指定哪些列可以排序。
清单 14 给出了禁用 ID 列的排序功能的 JavaScript 代码。
清单 14. 指定哪些列可以排序的 Javascript 代码
<script>
dojo.addOnLoad(function(){
grid.canSort = function(index) {
if(index == 1) return false;
return true;
};
}
</script>
参数索引为表格的列索引,从 1 开始。如果 canSort 函数返回 false,则表示禁用了列排序功能。
除了指定哪些列可以排序之外,您还可以指定如何对列进行排序。我在示例中使用 Name 列为例。图 8 显示了 Dojo Grid 的默认排序行为。
图 8. Dojo Grid 的默认排序行为
此表格中 Name 列中的数据以 ASCII 码降序排列,可以单击列标题中的三角符号更改排序顺序
我按降序对名称列进行排序。请注意最后 3 行:顺序为 Victor、Wang 和 vicky。表格的默认排序方式是区分大小写的,并使用 ASCII 码顺序进行排序。所以,小写字母将排在大写字母之后。但是,这种行为不符合软件全球化标准。在这种情况下,您需要自定义排序函数来支持全球化的排序方式。
看一下清单 5 中的 JavaScript 代码,查看如何自定义 Dojo Grid 的排序函数。
清单 15. 自定义 Dojo Grid 的排序函数
<script>
dojo.addOnLoad(function(){
myStore.comparatorMap = {};
myStore.comparatorMap["name"] = function (a, b) {
return a.localeCompare(b);
}
}
</script>
数据存储对象中有一个名为 comparatorMap 的字段,有了它就可以更改排序行为。在本示例中,我为名称列定义了一个比较方法,使用 localeCompare 来支持全球化排序。图 9 显示了经过排序自定义之后的结果。
图 9. 自定义的 Dojo Grid 排序行为
此表格显示的员工信息与图 8 中相同,但 Name 列按字母降序排列,并且忽略了名称的大小写
过滤器
Dojo Grid 提供一种非常方便的方式来在客户端过滤数据。您可以定义一列的过滤条件。清单 16 展示了如何过滤表格,仅显示以字母 A 开头的名称。
清单 16. 过滤名称列
<div dojoType="dijit.form.Button">filter name
<script type="dojo/method" event="onClick" args="evt">
// Filter the name from the data store:
grid.filter({name: "A*"});
</script>
</div>
单击 filter name 按钮之后,过滤结果将如图 10 所示。
图 10. 经过过滤的表格
单击底部的 “filter name” 按钮之后表格中显示的数据集,列表中仅包含:Alex 和 Alice
回页首
结束语
本文通过 MVC 设计模式介绍了 Dojo Grid 的主要功能。通常,可以采用多种方式实现一项功能。例如,要在表格中显示日期,既可以使用字符串来在数据存储中表示日期,也可以声明一个 long 并在最终显示中为其设置正确的格式。咋看起来,第一种选择似乎更简单。但是,如果需要使表格全球化,后一种选择更好。希望您在自己的 Dojo Grid 项目中使用 MVC 设计模式。您将会进一步提高代码的健壮性和可重用性。
参考资料
查阅 Wikipedia,了解 MVC 设计模式 的定义。
在 Dojo 工具包 官方网站上找到 Dojo 库的更多信息。
查阅 Dojo Grid,获取 Dojo Grid 参考知识。
阅读 “Dojo Grid 1.2”,了解 Dojo Grid 1.2 中引入的新特性。
developerWorks 技术活动和网络广播:随时关注 developerWorks 技术活动和网络广播。
developerWorks Web development 专区:通过专门关于 Web 技术的文章和教程,扩展您在网站开发方面的技能。
发表评论
-
dojo学习总结-dojox.grid.DataGrid
2013-01-29 15:55 3253dojo学习总结-dojox.grid.DataGrid 一 ... -
dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug
2013-01-26 11:39 1517dojox.grid.DataGrid 编程篇(3) -- D ... -
dojo.ready(dojo.addOnLoad) “前传”
2013-01-26 11:38 1341【dojo】dojo.ready(dojo.addOnLoad ... -
dojox.grid.DataGrid 编程篇(1)
2013-01-26 11:36 1344dojox.grid.DataGrid 编程篇(1) -- L ... -
dojox.grid.DataGrid 编程篇(2)
2013-01-26 11:35 1668dojox.grid.DataGrid 编程篇(2) -- 方 ...
相关推荐
书中可能还会讨论到模块化设计模式如模块化控制器(dojo/Stateful)和模块化视图(dijit/_WidgetBase的子类),以及如何利用Dojo的声明式和程序化API来实现MVC架构。此外,装饰器模式(dojo/decorate)在Dojo中用于...
4. Dojo的样式和主题:了解如何应用和自定义Dojo的主题,以满足UI设计需求。 总的来说,struts2-dojo-plugin-2.2.1.jar为Struts2开发者提供了一个强大的工具,帮助他们构建更加现代和动态的web应用,同时降低了...
文学翻译的文化传递、语言风格保持与读者接受度提升
,,Phase_Shift_T:基于MATLAB Simulink的移相变压器仿真模型,可实现-25°、-15°……25°的移相。 变压器副边实现36脉波不控整流,变压器网侧电压、阈侧电压以及移相角度可直接设置。 仿真条件:MATLAB Simulink R2015b ,核心关键词: 1. 移相变压器仿真模型 2. MATLAB Simulink 3. 移相 4. 36脉波不控整流 5. 网侧电压 6. 阈侧电压 7. 设置 8. MATLAB Simulink R2015b,MATLAB Simulink中实现宽范围移相与多脉波整流的变压器仿真模型
管理员主要负责填充图书和其类别信息,并对已填充的数据进行维护,包括修改与删除,管理员也需要审核老师注册信息,发布公告信息,管理自助租房信息等。用户信息管理页面,此页面提供给管理员的功能有:用户信息的查询管理,可以删除用户信息、修改用户信息、新增用户信息。商品分类管理页面,此页面提供给管理员的功能有:查看已发布的商品分类数据,修改商品分类,商品分类作废,即可删除。商品信息管理页面,此页面提供给管理员的功能有:根据商品名称进行条件查询,还可以对商品数据进行新增、修改、查询操作等等。商品资讯管理页面,此页面提供给管理员的功能有:查看已发布的商品资讯数据,修改商品资讯,商品资讯作废,即可删除。2 相关技术 3 2.1 SSM框架介绍 3 2.2 B/S结构介绍 3 2.3 Mysql数据库介绍 4 3 系统分析 6 3.1 系统可行性分析 6 3.1.1 技术可行性分析 6 3.1.2 经济可行性分析 6 3.1.3 运行可行性分析 6 3.2 系统性能分析 7 3.2.1 易用性指标 7 3.2.2 可扩展性指标 7 3.2.3 健壮性指标 7 3.2.4 安全性指标 8 3.3 系统流程分
当前资源包含初中高级闯关习题
,,欧姆龙PLC螺丝机程序(含触摸屏程序) 此程序已经实际设备上批量应用,程序成熟可靠,借鉴价值高,程序有注释、非常适合用来欧姆龙plc新手学习,包括欧姆龙plc程序和威纶触摸屏程序。 是新手入门级欧姆龙PLC电气爱好从业人员借鉴和参考经典案列。 ,欧姆龙PLC; 螺丝机程序; 触摸屏程序; 程序成熟可靠; 注释详尽; 新手学习; 经典案例。,欧姆龙PLC螺丝机程序详解:成熟可靠的新手学习经典案例
,,c# mqtt高性能服务器端源代码。 你还在使用第三方服务软件吗?不如试试这个开发框架,助你一臂之力,无限制,无全开源,无版权约束,全是自主开发。 开源框架包括服务器和客户端,支持mqtt3.0及5.0。 可嵌入到自己的服务系统及软件客户端中,不受第三方约束。 你要问我稳定性如何?我能回答的是已经运行了三年有余无任何问题。 如果你要问能接入多少终端,我可以明确回答,不敢往多的说,单节点支持100万并发量无压力。 这是一个关于C# MQTT高性能服务器端源代码的描述。如果我重新表述一下,可以这样说:你是否还在使用第三方服务软件?为什么不尝试一下这个开发框架呢?它可以为你提供强大的支持,没有任何限制,完全开源,没有版权约束,全部都是自主开发的。 这个开源框架包括服务器和客户端,支持MQTT 3.0和5.0协议。你可以将它嵌入到自己的服务系统和软件客户端中,不受第三方的限制。 你可能会问它的稳定性如何。我可以很自信地告诉你,它已经运行了三年多,没有出现任何问题。 如果你想知道它可以接入多少终端,我可以明确地回答,单节点支持100万并发连接,毫不费力。 从这段话中,我们可以提取出以
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
,,matlab程序,复现,基于改进粒子群算法的混合储能系统容量优化,关键词,超级电容,混合储能,粒子群算法。 拿之前问清楚 可以运行看结果,出不 不 ,MATLAB程序; 复现; 改进粒子群算法; 混合储能系统容量优化; 超级电容; 粒子群算法。,MATLAB复现:混合储能系统优化策略研究,基于改进粒子群算法的超级电容容量配置
,,k—medoids 聚类方法的MATLAB源代码,导入数据部分和画图部分已经用中文给出了注释。 这儿选取一个对象叫做mediod来代替上面的中心 的作用,这样的一个medoid就标识了这个类。 ,k-medoids聚类方法; MATLAB源代码; 导入数据部分; 画图部分; 对象; medoid; 类标识。,基于K-Medoids聚类方法的MATLAB源代码及中文注释解析
自驾游中如何保护自然环境
qt 一个基于Qt Creator(qt,C++)实现中国象棋人机对战.
项目资源包含:可运行源码+sql文件+文档; python3.7+django+mysql5.7+vue 适用人群:学习不同技术领域的小白或进阶学习者;可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值,也可拿来修改、二次开发。 有任何使用上的问题,欢迎随时与博主沟通,博主看到后会第一时间及时解答。 系统是一个很好的项目,结合了后端服务(django)和前端用户界面(Vue.js)技术,实现了前后端分离。 当人们打开系统的网址后,首先看到的就是首页界面。在这里,人们能够看到系统的导航条,通过导航条导航进入各功能展示页面进行操作。在个人中心页面可以输入个人信息进行更新信息操作,还可以对我的订单、我的地址和我的收藏进行详细操作。 管理员进入主页面,主要功能包括对首页、个人中心、用户管理、商品类别管理、热卖商品管理、投诉建议、系统管理、订单管理等进行操作。用户进入系统后台,主要功能包括对个人中心和我的收藏管理进行操作。
漫画作品与节日庆典结合
自驾游中的手机APP推荐
,,该套程序是电芯上料机,空料仓和满料仓都是步进电机,搬运模组是松下A6脉冲控制伺服电机,该套程序是已经在量产程序,图四是上料机设备全局图,标准程序框架,其他设备也可套用。 ,电芯上料机; 步进电机; 满料仓; 松下A6脉冲控制伺服电机; 标准程序框架; 设备全局图; 其他设备通用,电芯上料机程序:松下A6伺服电机驱动的步进式料仓管理系统
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
,,Matlab代码-基于拉格朗日电力系统参数辨识 对电力系统中存在多个不良参数进行辨识,以IEEE14节点系统进行仿真验证。 ,基于拉格朗日; 电力系统参数辨识; 不良参数辨识; IEEE14节点系统仿真验证。,基于拉格朗日算法的电力系统多参数辨识及IEEE14节点仿真验证
它利用图像预处理、车牌字符分割、字符识别等相关处理技术,对小型车辆的蓝底白字车牌进行车牌号识别。车牌定位是利用HSV色彩定位法,这种方法可大大缩短后续处理时间,字符分割采用阈值限定分割,字符识别则采用模板匹配法。在拍摄角度不过度倾斜情况下识别精度较高,白天照片预处理、分割效果较晚间好。