`

table.panel - 自己写的用于table行操作的jquery插件

阅读更多

table.panel是基于jquery开发的用于table的简单行操作的插件。

这个是自己在实际项目中写的一个基于jquery-1.4.2.js的小插件。
今整理出来,与大家分享。
本来是打算尽量的与自己原来的业务分离,做的更单纯些。
但却发现很难做到完全与先前的业务分离,因此里面还保留了一些先前业务的影子。
例如关于date部分的配置,可能有些多余,也不太容易向使用者解释。不过,感觉去不去好像也无所谓,并且同时也提供了默认的配置,故暂时保留了下来。

代码还有很多需要改进的地方,将持续更新

下面介绍下此插件实现的功能:

1.行(上、下)移动
* 选中某一行后,可以点击上下箭头图标,上下移动此行。

2.行选中
* 单击某一单元格,为选中行加灰背景色,单元格加蓝背景色,行的selected属性设为true。

3.行状态变换:新增,修改,删除,初始(或者叫修改完成,已与数据库同步)

4.行“删除”
* 不是真实删除,只是打上删除标记(为行加上delete属性,并且delete的值大于0;delete属性标记删除的顺序),行状态改为删除;并且设置行内的可编辑项为disabled

5.撤销行“删除”
* 依次倒序移除有删除标记的行的删除标记(从delete值最大的开始),恢复行状态为删除前的状态

6.行清空
* 清空选中行的可编辑项
a.对于input[type="text"],textarea,清空输入内容
b.对于input[type="checkbox"],input[type="radio"],取消选中状态;如果有default="true"属性,则设置为选中状态
c.对于select,如果option中有default="true"的,设为选中状态;如果没有,则设置第一项为选中状态
d.对于class为dateTd的列,input的值设置为当前的时间
* 行状态改为新增

7.新增行
* 默认为复制第一行清空后的行,行状态为新增

8.“定制化功能”
可通过参数设置功能按钮[行上移、行下移、当前行前插入新行、最后追加行、行"删除"、撤销行"删除"、行内容清空]是否出现。
upEnable: true, /* true, false;default:false*/
downEnable: true, /* true, false;default:false*/
insertEnable: true, /* true, false;default:false*/
deleteEnable: true, /* true, false;default:false*/
backEnable: true, /* true, false;default:false*/
clearEnable: true, /* true, false;default:false*/
insertBottomEnable: true, /* true, false;default:false*/
例如:demo4:

其他配置
1.插入新行时,复制选中前一行
设置clonePrevious为true。
例如:demo2

2.空表格的处理。
由于空表格时,没办法选中行,也没有行模板的备份。
为了解决这个问题,提供了一个办法:即在表格中放入一个空白行,并在tr上加一个名为PKValue,值为-1的属性
插件将在表格初始化中用它作为模板,并且在表格初始化完成后,移除掉此行
例如:demo3

3.提供用户自定义行的方法接口
使用generateTr配置
generateTr:{
method: 方法名字的字符串,
args: 方法参数
}
例如:demo5

4.可以定制class为dateTd列的input内的日期格式:
dateFormat4Display: "MM/dd/yyyy HH:mm:ss", /* dateFormat4Display*/
dateFormat4Save: "MM/dd/yyyy HH:mm:ss", /* dateFormat4Save*/
这里主要是为了解决自动生成的日期,在显示上和存储上可能不一致的问题。
在input上需要加一个自定义属性date。



 
附件内有demo

源码中date.pattern.js来源于网络,记不清是在哪找的了,在此感谢date.pattern.js的作者,如有版权问题,请告知。

  • 描述: 截图
  • 大小: 121.2 KB
0
0
分享到:
评论

相关推荐

    jQuery基于Bootstrap分页插件.zip

    jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。  jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('<li class="list...

    jQuery Bootstrap动态分页插件.zip

     jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({  perPage: 5,  ...

    一个支持annotation的SSH整合示例项目

    卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....

    unigui0.83.5.820

    - New Demo: Basic jQuery 0.81.2.801 +---------------------------------------------------------------------------------------- - TUniScreeMask issue with borderless MainForm - Installer: Bug resolved ...

    jQuery详细教程

    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: • 把所有 ...

    最新Color Admin1.9 - bootstrap3响应后台模板+前端网页模板

    Local Storage Panel Modern & Old Browser Compatibility Compatible with DataTables & 9 DataTables Extension Unlimited Nav Tabs Smooth Mobile / Tablet Scrollbar Implementation Vector Icons - Font...

    ExtJs4_笔记.docx

    第一章 ExtJs大比拼JQuery:Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本...

    jQuery EasyUI 1.3 API 中文教程

    转换table到数据表格 数据表格添加分页组件 数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格...

    Web应用前端技术的探索与实践

    6.5.2.9.1 TABLETREE4J 121 6.5.2.9.2 JQuery TreeGrid 124 6.5.2.10 Combo扩展1-去除IE6下穿透层的bug 129 6.5.2.10.1 效果 130 6.5.2.11 Combo扩展2-新样式、可多选 131 6.5.2.11.1 效果 131 6.5.2.12 Combo扩展3-...

    jQuery EasyUI API 中文文档 – DataGrid数据表格

    依赖 panel resizable linkbutton pagination 用法 代码如下: <table id=”tt”></table> 代码如下: $(‘#tt’).datagrid({ url:’datagrid_data.json’, columns:[[ {field:’code’,title:’Code’,width:100}, {...

    jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    而“完整”的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构。 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个“基础完整DOM结构”是什么样子的: <...

    EasyUI tutorial 中文版 chm

    使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...

Global site tag (gtag.js) - Google Analytics