模仿EXT效果的datagrid

没想到会赶在今天发布第一个可用版本. 不知道是巧合 还是天意. 不过发布版本的消息绝对不是愚人节的玩笑 这次发布的是第一个alpha版本. 肯定有很多问题,而且缺乏足够的文档和示例,所以并没有太指望有很多人来下载使用. 不过 我知道, 至少有一个人会下载的,那就是 mhere . 长久以来 mhere 一直对 ecside 以及gtgrid 投入了极大的关注,如果没有mhere的督促,没有他的需求,也许GTGrid早已胎死腹中. 在这里要说一声谢谢. 谢谢 mhere (BTW: android刚出那阵,我真的想不做web 做移动开发去了,后来还是被支持我的朋友们拉了回来,谢谢你们. 也许我不应该错过android,但是如果我为了它而放弃自己坚持了好几年的东西,那我真的是太对不起自己了) 同时还是要重复那句话: 向被我忽略的朋友说一声"对不起" 很多热情的网友通过网络 向我咨询各种问题, 但是我却很少很少回答他们. 再这里我不想给自己的懒惰找借口,但是该说的还是一定要说的: ecside 不够好 设计 代码质量 功能 都不够好,所以它已经死了. 未来的GT会努力做到更好 更有生命力, 它不会再半途而废了, 因为我为它倾注了太多. 即使有一天 js html css 这些东西都已经过时, gtgrid依然会努力的以新的姿态存在. 好, 废话到此为止, 下面是一些有一点点用处的废话. ====================================== GT-Grid 1.0 alpha 1 特性: ajax实现 (翻页,数据的crud基于ajax技术) 固定表头和工具栏 可调整列宽: 拖动列表表头之间的分割线. 可调整相对位置: 按住ctrl 键不放,拖动列表表头 支持按列排序,点击表头栏,将在 acs desc 默认排序 三者之间切换. 列隐藏 列冻结 支持列编组.(建议先排序后再编组) 支持行选择(按ctrl多选),选择方式类似在windows的资源管理器里选择文件. 可改变列表区域的大小: 拖动工具栏右下角的大小调整图标. 换肤 (功能上支持,但是目前只提供缺省皮肤,备选皮肤的css有错误) 自定义表头(使用自定义表头后 部分功能将不再支持) 可编辑列表 支持简单横向统计 支持flash chart 提供一定量的接口,可以实现一定量的自定义功能 不依赖任何第三方的ajax/js组件 目前在 IE6 FF2 FF3 opera safari下测试通过. 下一版本的计划: 1 支持过滤 2 支持多列排序 3 完善统计功能 4 完善校验机制 5 编写和后台接合的例子 6 完善文档( 等待 javaeye的wiki完善,目前的je wiki太弱.表格 章节 图片 代码的支持还不够好 ) 再下一版本的计划: 1 完善图表功能 2 支持单页大数据量的懒加载 3 支持客户端跨页数据保存 4 提供更好的更多样的编辑器 5 编写jsptag 简化前台开发 6 提供后台辅助函数,简化后台开发 7 开发ecside适配器,使其尽可能的与ecside兼容 其他工作: 设计新的皮肤(风格) 和 logo. 寻求商业合作. 修改bug, 完善设计, 提供丰富的用户接口, 重构 ,性能优化 .... 这些是必须要做的 贯穿每一个版本 ------------------------------------------------ 以下是一份 API 的 超级简陋不完全说明 ======= 基础函数 ========= GT.$grid(idOrG) 根据id取得一个grid对象. ======= GT.Grid 列表对象属性和方法 ========= language {s} 默认语言 id {s} 列表id width {i/s} 列表宽度 支持% height {i/s} 列表高度 支持% container {s/dom} 列表的容器元素 replaceContainer {b} 是否用列表代替容器元素 customHead {s/dom} 自定义表头对应的table的id或对象,或table的HTML代码 jsonParamName {s} 提交的json串的参数名 (默认: _gt_json ) debug {b} 是否是调试模式(请设置成false) resizable {b} 是否可手动改变大小 minWidth {i} 可手动改变大小时,最小宽度 minHeight {i} 可手动改变大小时,最小高度 showIndexColumn {b} 是否显示索引列 stripeRows {b} 是否交替显示行颜色 lightOverRow {b} 是否开启行的鼠标悬停指示 defaultRecord {o/a} 默认的记录样板,新增记录时,将按此样板新增. clickStartEdit {b} 是否为"点击单元格直接进入编辑状态" reloadAfterSave {b} 提交数据后是否直接刷新列表 groupable {b} 是否开启编组菜单 selectedRows {a} 选中的所有行 columnList {a} 所有列对象的数组 columnMap {m} 所有列对象集合,key-value形式,key为column的id loadUrl {s} 读取数据的url saveUrl {s} 提交数据的url dataset {DataSet} 只读,列表对应的数据集 pageInfo {o} 分页信息 结构形如: { pageSize : 20, pageNum : 0, totalRowNum :0,totalPageNum : 0, startRowNum :0, endRowNum :20 } activeCell {dom} 只读,当前选中的单元格 activeRecord {o/a} 只读,当前选中的单元格对应的数据记录 setColumnValue function(colID,rowNo,newValue) 设置某行某列的数据 getColumnValue function(colID,rowNo) 取得某行某列的数据 closeMainMenu function() 关闭列表主菜单 showDialog function (type) 显示指定对话框 hideDialog function () 隐藏对话框 showWaiting function () 显示等待条 hideWaiting function () 隐藏等待条 showMask function() 显示遮罩 hideMask function() 隐藏遮罩 getDeletedRecords function() 取得所有删除的数据 getUpdatedRecords function() 取得所有更新过的数据 getInsertedRecords function() 取得所有新增的数据 addParameters function(parameters) 添加额外提交参数 (参数为key-value形式的 json对象) removeParameter function( key) 移除额外提交的参数 cleanParameters function() 清空所有额外提交参数 getColumn function(colNoIdTd) 根据单元格或column对象id取得column对象 getRecord function( rowNoTdTr) 根据行号 或 单元格 或 tr 取得数据记录 onShow function() 列表由隐藏状态到显示状态时调用(需要开发人员手动调用,且必须调用) onComplete function() 钩子:列表生成是调用 onResize function() 钩子:列表大小发生变化时调用 beforeSelectRow function(value, record , cell, row, colNO, rowNO, columnObj,grid) 钩子:在选中某行前调用,返回false,则中止选中行为 onClickCell function(value, record , cell, row, colNO, rowNO,columnObj,grid) 钩子:在选中某单元格前调用,返回false,则中止选中行为 beforeEdit function() 钩子:编辑单元格前调用(虽然无参数,但是可与 activeCell activeRecord交互) afterEdit function() 钩子:编辑单元格前调用(虽然无参数,但是可与 activeCell activeRecord交互) beforeSave function(requestParameter) 钩子:保存数据前前调用 返回false,则中止save 参数为提交的所有参数组成的json对象,结构后面说明 beforeLoad function(requestParameter) 钩子:读取数据前调用 返回false,则中止load 参数为提交的所有参数组成的json对象,结构后面说明 beforeInsert function(record) 钩子:保存数据前前调用 返回false,则中止insert 参数为新增的记录 beforeUpdate function(record,fieldName,newValue) 钩子:保存数据前前调用 返回false,则中止update 参数为编辑的记录,编辑的字段,新值 beforeDelete function(record) 钩子:保存数据前前调用 返回false,则中止del 参数为删除的记录 setSize function(newWidth,newHeight) 设置单元格属性 refresh function() 重新生成列表,但是数据并不重新载入 reload function(data) 重新载入数据,并重新生成列表 ======= GT.Grid 类方法 (类似静态方法)========= findGridByElement function(obj) 根据一个td或tr取得其所属于的列表对象 isSelectedRow function(row) 判断某一行(tr) 是否被选中 getAllrows function(grid) 取得列表的所有tr render function(grid) 渲染(生成列表) 参数是列表对象或其id. ======= GT.Column ========= id {s} 列对象的id width {i} 列的宽度(目前不支持%) header {s} 列的标题 editor {o} 对应的编辑器定义 ,如 { type ... , validRule... getDisplayValue... ,} 见例子 frozen {b} 只读.列是否被冻结 hidden {b} 只读,列是否隐藏 sortable {b} 列是否可排序 moveable {b} 列是否可手动移动 resizable {b} 列是否可手动调节列宽 minWidth {i} 列的最小宽度 hdRenderer function(header,cobj) 列表头的渲染器 renderer function(value ,record,columnObj,grid,colNo,rowNo) 单元格渲染器 initValue function(grid,rn,record) 初始化虚拟列数据的方法. 见例子 toggleGroupCol function() 列的编组与解除编组切换函数 toggle function() 列的显示与隐藏切换函数 show function() 列的显示函数 hide function() 列的隐藏函数 freeze function() 列的冻结函数 unfreeze function() 列的解除冻结函数 getColumnNo function() 取得当前列是第几列 ======= GT.DataSet ========= recordType {s} 记录的类型,目前只支持两种: array , object getRecordType function(recordType) 取得记录类型 getFieldsNum function() 取得数据集有多少个字段 getSize function() 取得数据集的记录条数 getRecordValue function(record,fieldName) 取得某记录的某字段的值 setRecordValue function(record,fieldName,value) 设置某记录的某字段的值 ======= GT.DataSet.field 定义========= name {s} 字段的名称 type {s} 字段的类型 : string(默认) int float date ========================== load时提交的数据: var requestParameter= { action : 'save',