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