- 浏览: 786248 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第十一章: 工具栏与列表菜单
在前几章,我们或多或少的接触到了一些工具栏的知识.
例如 对 toolbarContent toolbarPosition 的使用.
这一章, 我们将对工具栏与列表菜单做更全面的介绍. 本章示例文件"mydemo11.html"
=========================================
首先,我们回顾一下toolbarPosition 和 toolbarContent 的作用:
toolbarPosition 无需多言,在这里再详细说一下toolbarContent.
toolbarContent 的值是一个字符串, 该字符串允许的内容如下:
各个关键字之间用空格分割, 各个关键字的位置决定了各个元素的相对位置,开发人员可以自行设置.
注意工具栏中的"pagesize" 要与 grid的pageSizeList属性配合使用. (详见教程第三章)
其中"过滤"和"图表"两项再具体说一下.
=========================================
"过滤"是针对列进行的,而且各个过滤条件是and的关系.
如果不希望某列参与过滤, 那么只需在column定义中 指定 filterable 属性为false即可 (默认是true)
过滤值输入框(填写过滤值的地方),默认是一个普通的input-text框,如果某列需要使用其他输入框,那么可以在该列的定义中,设置 filterField 属性:
filterField 属性的值为合法的 HTML字符串 , 该字符串为"列需要使用的过滤输入框"的html代码.
(注: 该属性以后会进一步强化, 支持dom对象等)
在"过滤"对话框中, 选择某一列,点击"添加条件" 然后在新增的条目中选择 条件关系 和条件值 即可.
默认的过滤方式是客户端的过滤. 关于服务端过滤, 以及过滤的具体特性和用法, 以后会单独编写一个章节来介绍.
=========================================
注意: GT-Grid 1.0里的图表功能目前还很简单,功能性和实用性都不是很强.
以后版本会做加强和变更, 如果目前不需要, 可以略过此小节(下一行 至 分割线).
欲使用图表功能, 需引入下面的js.
同时还要 设置 grid的 GTGridPath 属性, 该属性为 GT-Grid组件的代码所在的路径.(可以是绝对路径,也可以是相对于当前页面的相对路径)
示例中, 使用的是相对路径 :
"图表"功能会用一个柱状图显示选中记录的字段值(某些列的值). 如果希望记录的某列显示在图表里,那么只需在column定义中 指定下列属性即可:
其中 chartCaption ,在补充说明一下. 如果将 chartCaption 设置在 学生姓名列上, 然后 值为 '{@} 的成绩',
那么在 "张三"的成绩图表时, 图表的标题就会是 "张三的成绩", 也就是说,那个'{@}'会被替换为 当前记录的"学生姓名".
=========================================
大家在示例中还可以看到一个"列表菜单"的按钮,它类似windows的开始菜单按钮,总是出现在工具栏的最左边.
这个按钮的显示与否 是通过 grid的 showGridMenu 属性决定: (默认是false)
此时,该菜单上只有一个版本信息, 并没有其他的条目, 显示其他菜单条目需要下列属性:(默认是true)
目前菜单上的这些条目暂时不允许调整位置,也不允许添加自定义的条目.
如果开启了皮肤选择功能, 页面内还要引入皮肤相关的css, 而且这些css要放到 GT-Grid的主css后面, 示例:
冻结列 隐藏列 列编组 三个功能项都是针对列的, 如果开发人员不希望某列具备该功能,则只需在column定义中 指定下列属性为false即可 (默认是true)
=========================================
本章对列表的工具栏和列表菜单的使用 做了进一步的介绍. 我想没有本章内容, 大家通过前几章的示例多少也能理解这些知识点.
这一章就算做对相关知识的一个回顾和总结吧. 我们下一章再见.
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第十一章: 工具栏与列表菜单
在前几章,我们或多或少的接触到了一些工具栏的知识.
例如 对 toolbarContent toolbarPosition 的使用.
这一章, 我们将对工具栏与列表菜单做更全面的介绍. 本章示例文件"mydemo11.html"
=========================================
首先,我们回顾一下toolbarPosition 和 toolbarContent 的作用:
toolbarPosition : 工具栏的位置. 可选值:'top'/'bottom'/null, 暂时不支持上下都显示. toolbarContent : 设置工具栏上要显示的工具按钮,以及相对位置,各个按钮之间用空格间隔. 例如 toolbarContent : 'nav | state' .
toolbarPosition 无需多言,在这里再详细说一下toolbarContent.
toolbarContent 的值是一个字符串, 该字符串允许的内容如下:
|(竖线) : 标示"按钮组"(若干个按钮组成的功能相近的组,开发者可以自由定义) 之间的分隔符 nav 导航按钮, 包括 "首页 前一页 后一页 末页" 四个按钮 goto 页面跳转按钮, 包括 输入目标页号的区域 和一个跳转的按钮 pagesize 改变每页记录条数的下拉框 reload 刷新按钮 add "+"添加记录 del "-"删除记录 save 保存变更的按钮 print 打印按钮 filter 过滤按钮 chart 柱状图表按钮 state 显示数据的数量信息(分页信息),如共几条 共几页 当前是第几条等等
各个关键字之间用空格分割, 各个关键字的位置决定了各个元素的相对位置,开发人员可以自行设置.
注意工具栏中的"pagesize" 要与 grid的pageSizeList属性配合使用. (详见教程第三章)
其中"过滤"和"图表"两项再具体说一下.
=========================================
"过滤"是针对列进行的,而且各个过滤条件是and的关系.
如果不希望某列参与过滤, 那么只需在column定义中 指定 filterable 属性为false即可 (默认是true)
//某列定义 { /* ... 略去其他属性设置 ...*/ filterable : true , //是否允许该列参与过滤 }
过滤值输入框(填写过滤值的地方),默认是一个普通的input-text框,如果某列需要使用其他输入框,那么可以在该列的定义中,设置 filterField 属性:
//某列定义 { filterField : GT.U.createSelectHTML( {'0': '未知' ,'1':'男', '2':'女'} ) }
filterField 属性的值为合法的 HTML字符串 , 该字符串为"列需要使用的过滤输入框"的html代码.
(注: 该属性以后会进一步强化, 支持dom对象等)
在"过滤"对话框中, 选择某一列,点击"添加条件" 然后在新增的条目中选择 条件关系 和条件值 即可.
默认的过滤方式是客户端的过滤. 关于服务端过滤, 以及过滤的具体特性和用法, 以后会单独编写一个章节来介绍.
=========================================
注意: GT-Grid 1.0里的图表功能目前还很简单,功能性和实用性都不是很强.
以后版本会做加强和变更, 如果目前不需要, 可以略过此小节(下一行 至 分割线).
欲使用图表功能, 需引入下面的js.
<script type="text/javascript" src="./flashchart/fusioncharts/FusionCharts.js"></script>
同时还要 设置 grid的 GTGridPath 属性, 该属性为 GT-Grid组件的代码所在的路径.(可以是绝对路径,也可以是相对于当前页面的相对路径)
示例中, 使用的是相对路径 :
var gridConfig={ /* ... 略去其他属性设置 ...*/ GTGridPath : '../../gt-grid', }
"图表"功能会用一个柱状图显示选中记录的字段值(某些列的值). 如果希望记录的某列显示在图表里,那么只需在column定义中 指定下列属性即可:
//某列定义 { /* ... 略去其他属性设置 ...*/ inChart : true , // 是否出现在图表里 chartColor : '66eeaa', // 出现在图表里时 ,柱状图的颜色(不带#号) chartCaption : '{@} 的成绩' , //设置图表的标题. 该属性只需设置在"要作为图表标题"的列上, 其中"{@}" 代表的是选中记录的该列的值. }
其中 chartCaption ,在补充说明一下. 如果将 chartCaption 设置在 学生姓名列上, 然后 值为 '{@} 的成绩',
那么在 "张三"的成绩图表时, 图表的标题就会是 "张三的成绩", 也就是说,那个'{@}'会被替换为 当前记录的"学生姓名".
=========================================
大家在示例中还可以看到一个"列表菜单"的按钮,它类似windows的开始菜单按钮,总是出现在工具栏的最左边.
这个按钮的显示与否 是通过 grid的 showGridMenu 属性决定: (默认是false)
var gridConfig={ /* ... 略去其他属性设置 ...*/ showGridMenu : true }
此时,该菜单上只有一个版本信息, 并没有其他的条目, 显示其他菜单条目需要下列属性:(默认是true)
var gridConfig={ /* ... 略去其他属性设置 ...*/ showGridMenu : true , allowCustomSkin : true , //是否开启主菜单上的皮肤选择选项 allowGroup : true , //是否开启主菜单上的列编组选项 allowFreeze : true , //是否开启主菜单上的冻结列选项 allowHide : true , //是否开启主菜单上的隐藏列选项 }
目前菜单上的这些条目暂时不允许调整位置,也不允许添加自定义的条目.
如果开启了皮肤选择功能, 页面内还要引入皮肤相关的css, 而且这些css要放到 GT-Grid的主css后面, 示例:
<link rel="stylesheet" type="text/css" href="./gt_grid.css" /> <link rel="stylesheet" type="text/css" href="./skin/china/skinstyle.css" /> <link rel="stylesheet" type="text/css" href="./skin/vista/skinstyle.css" /> <link rel="stylesheet" type="text/css" href="./skin/mac/skinstyle.css" />
冻结列 隐藏列 列编组 三个功能项都是针对列的, 如果开发人员不希望某列具备该功能,则只需在column定义中 指定下列属性为false即可 (默认是true)
//某列定义 { /* ... 略去其他属性设置 ...*/ groupable : true, //是否允许对该列进行编组 frozenable : true, //是否允许冻结该列 hideable : true, //是否允许隐藏该列 }
=========================================
本章对列表的工具栏和列表菜单的使用 做了进一步的介绍. 我想没有本章内容, 大家通过前几章的示例多少也能理解这些知识点.
这一章就算做对相关知识的一个回顾和总结吧. 我们下一章再见.
发表评论
-
ABAP中增减字段前导零函数
2010-04-13 17:23 2971CONVERSION_EXIT_ALPHA_INPUT 功能 ... -
GT-Grid 1.18版 说明文档.
2009-12-23 16:17 966GT-Grid 1.18版 说明文档. ... -
GT-Grid 1.15版 说明文档.
2009-12-23 16:16 1146这篇文档主要说明一些这个版本的变化(新增功能 新特性) = ... -
GT-Grid 1.12版 说明文档.
2009-12-23 16:15 1802GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
GT-Grid 1.0 基础教程(十三)
2009-12-23 16:14 989教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十二)
2009-12-23 16:13 957教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(十)
2009-12-23 16:09 1237GT-Grid 1.0 基础教程(十) ... -
GT-Grid 1.0 基础教程(九)
2009-12-23 16:08 1072教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(八)
2009-12-23 16:07 1055教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(七)
2009-12-23 16:03 875教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(六)
2009-12-23 15:57 990教程说明: 这是一个告 ... -
GT-Grid 1.0 基础教程(五)
2009-12-23 15:54 877教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(四)
2009-12-23 15:48 849教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(三)
2009-12-23 15:29 821教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(二)
2009-12-23 14:15 960教程说明: 这是一个告诉大家如何快速的利用GT-Grid开发列 ... -
GT-Grid 1.0 基础教程(一)
2009-12-23 14:12 950GT-Grid 1.0 基础教程(一) 教程说明: 这是一个 ...
相关推荐
本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...
### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...
**gt-grid基础教程** 在网页开发中,数据的展示往往是不可或缺的部分,特别是在处理大量结构化信息时。`gt-grid`是一款由"胖哥"开发的高效、功能丰富的表格组件,专为页面展示设计,旨在帮助开发者更便捷地构建数据...
在这个“gt-grid的一个例子”中,我们将深入探讨如何使用`gt-grid`的基本功能,并通过实际代码示例来理解其工作原理。 首先,`gt-grid` 提供了灵活的数据绑定机制,可以方便地将后台数据源与前端表格进行对接。在...
GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例
《GT-Grid 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...
"gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...
在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...
GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...
GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...
"gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...
10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...
在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...
网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...
GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...
标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...
NULL 博文链接:https://fins.iteye.com/blog/283672
3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...
列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245
- **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...