vgolive.search.PagingGrid使用手册及API

Object »dijit._Widget

dijit扩展-分页表格组件

必需 dojo 1.4以上版本

使用方法

第一步：引入相关CSS

<mce:style type="text/css"><!--
........
@import "/js/dojox/grid/resources/Grid.css";
@import "/js/dojox/grid/resources/tundraGrid.css";
@import "/js/vgolive/search/templates/PagingGrid.css";
........
--></mce:style><style type="text/css" mce_bogus="1">    ........
@import "/js/dojox/grid/resources/Grid.css";
@import "/js/dojox/grid/resources/tundraGrid.css";
@import "/js/vgolive/search/templates/PagingGrid.css";
........</style>

第二步：引入相关组件

<mce:script type="text/javascript"><!--
........
dojo.require("vgolive.search.PagingGrid");
// 插件：增加复选框或单选框
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
// 插件：行/列拖拽功能
// dojo.require("dojox.grid.enhanced.plugins.DnD");
// 插件：右键菜单
// dojo.require("dojox.grid.enhanced.plugins.Menu");
// 插件：多级排序
// dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
........
// --></mce:script>
<div id="pagingGrid-examples"></div>

第三步：调用方法
Javascript Code:

// 创建数据集
var store = new dojo.data.ItemFileReadStore({jsId:"store", url:"data/countries.json"});
// 创建工具栏对象
var toolbar = [
{label:"已选文档",showLabel: true,iconClass: "dijitEditorIcon dijitEditorIconCopy"},
{label:"删除文档",showLabel: true,iconClass: "dijitEditorIcon dijitEditorIconDelete"},
{label:"点击我",showLabel: true,iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick:function(){
alert("已点击按钮");
}
}
];
// 创建表格布局
var layout = [{
field: "name",  //数据集中对应的域名
name: "国家名称", //列显示名
width: "200px" //列宽度
},
{ field: "type", name: "类型", width: "80px"},
{ field: "population", name: "人口", width: "80px"},
{ field: "area", name: "面积", width: "150px"},
{ field: "timezone", name: "时区", width: "auto"}
];
// 分页组件参数
var params = {
query: {
name: '*'
},
titleLabel:"样例：本地数据表格",
store: store,
pageSize:20,
plugins:{indirectSelection : true},
clientSort:true,
structure: layout
};
// 创建分页表格组件
var grid = new vgolive.search.PagingGrid(params,dojo.byId("pagingGrid-examples"));
grid.startup();

HTML Code:

<div id="pagingGrid" style="height:99%"
dojoType="vgolive.search.PagingGrid"
store="store" query="{q:'*'}"
filter="name:Asia"
roles="public"
plugins="{indirectSelection: true}"
toolbar="toolbar"
pageSize="20"
structure="layout"
titleLabel="样例：vgolive.search.PagingGrid">
</div>

如下图：

API

Namespace:	vgolive.search
Assembly:

Constructors

vgolive.search.PagingGrid(parameters:Object,domNode:Object) parameters:{ query:Object, //查询对象集 store:dojox.data.ServiceStore, //支持数据集，包括ServiceStore所有子类 [dojo.data.ItemFileReadStore,] [dojo.data.ItemFileWriteStore,] pageSize:Integer, //每页显示条目数，缺省：10 toolbar:Array, //工具栏 layout:Array, //布局 plugins:Object, //表格插件 titleLabel:String, //标题，如：样例：vgolive.search.PagingGrid } domNode

Properties

store	数据集 支持：dojox.data.ServiceStore 及所有子类 dojo.data.ItemFileReadStore, dojo.data.ItemFileWriteStore,
query	查询对象集,参考样例-params定义
pageSize	每页显示条目数，数值类型，缺省：10
structure	布局数组，参考样例-layout定义
plugins	插件，参考样例-plugins定义
selectionMode	选择条目模式，字符串类型，只能选择"multiple"或"single"，缺省：multiple 注：使用此属性，必须启用dojox.grid.enhanced.plugins.IndirectSelection插件
rowSelector	行选择块宽度，字符串类型，缺省："0px"
toolbar	工具栏数组，参考样例-toolbar定义
firstLabel	第一页按钮标签，字符串类型：缺省："第一页"
prevLabel	上一页按钮标签，字符串类型：缺省："上一页"
nextLabel	下一页按钮标签，字符串类型：缺省："下一页"
lastLabel	最后一页按钮标签，字符串类型：缺省："最后一页"
titleLabel	标题标签，字符串类型
roles	权限控制域，多值用分号分隔，如：LocalDomainAdmins;[UserModifier];admin 注：为vgolive.search.api.SearchStore定制
filter	过滤条件，多值用分号分隔，如：domain:api.vgolive.com;dbpath:help;form:HelpForm 注：为vgolive.search.api.SearchStore定制

Methods

startup()	<Description>
changeStructure(structure:Array)
hideHeader(flag:boolean)
hideHeaderFilter(flag:boolean)
canSort(index:Integer)	排序，如果指定某列不排序，则设置属性canSort=false 例： var webLayout = [ {name : '标题', width : '80%', field : 'title'}, {name : '创建日期', width : 'auto', field : 'created'}, {name : '描述', field : 'text', canSort : false} ]; //描述一列为不能排序列 未指定field列也不能进行排序功能
firstPage()	跳转至第一页
prevPage()	跳转至上一页
nextPage()	跳转至下一页
lastPage()	跳转至最后一页
gotoPage(pageNumber:Integer)	跳转至指定页
refreshPage()	刷新当前页
filterPage()	根据过滤条件，搜索符合条件的条目
close()	关闭/销毁对象
getSelected()	获取所有选择的条目，例： ........ var items = pagingGrid.getSelected(); dojo.forEach(items, function(item) { alert(dojo.toJson(item); }); ........
getCellData(item:Object,fieldName:string)	获取指定条目中的指定域值，例： alert(pagingGrid.getCellData(item,"id"));
getStore()	获取当前数据集对象

Events

onComplete	当数据提取完成后
onError	当数据提取时出错后

References

dojox.grid.EnhancedGrid:http://docs.dojocampus.org/dojox/grid/EnhancedGrid


原文地址：http://goo.gl/jxHF

源码及样例：http://download.csdn.net/source/2342522

http://bbs.lotus-gateway.com/viewtopic.php?f=3&t=1684