当前位置: 代码迷 >> Web前端 >> table.panel - 自各儿写的用于table行操作的jquery插件
  详细解决方案

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

热度:637   发布时间:2012-10-29 10:03:53.0
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的作者,如有版权问题,请告知。

  相关解决方案