Grid部分:已实现的功能
一.格式统一定义
1.引用的CSS文件
<link rel="stylesheet" type="text/css" url="dijit/themes/claro/claro.css" />
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/claro/claro.css";
@import "dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
.dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%;
margin: 0; }
</style>
PS:此段代码引入的CSS文件均为本地文件 ,必须确保CSS文件统一,
否则会出现混乱无序的网格
二.Require引入的包及各个语句的功能
几个引入具体实现的功能如下:
1.dojo.require("dojox.grid.enhanced.plugins.DnD");
提供拖放的引入网格和引出网格的网格列/行/单元格。存储网格必须实现接口dojo.data.api.Write.选定的列:支持移动网格,移动/复制出网格到网格和目标。选定的单元格(仅矩形形状):移动/复制到任何目标网格。
2.dojo.require("dojox.grid.enhanced.plugins.Menu");
提供上下文菜单支持,包括标题菜单,行菜单,单元格菜单
3. dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
一个灵活的方式来控制多列排序,包括1,设置默认排序;2,禁用某些列排序;3,用JS API设置动态排序
行滚动条 列滚动条 :当行数超过页面设置值时自动出现列滚动条,行滚动条同理
三.解决中文乱码的问题
用editplus打开引入的数据文件(csv),选中 文件--- 另存为--- 此页面时设置Encoding为UTF-8。Html文件也执行此操作。
四.网格定义语句
var grid = new dojox.grid.EnhancedGrid({
query: {
Title: '*'
},
store: store,
rowSelector: '20px',
structure: layout,
plugins: {
nestedSorting: true,
dnd: true,
indirectSelection: {
name: "Selection",
width: "70px",
styles: "text-align: center;"
}
}
},
document.createElement('div'));
query关键字提供排序的依据
store标示数据源 具体定义的链接为:
var store=new dojox.data.CsvStore({ url:'dojox/grid/compat/tests/support/movies.csv' });