zoukankan      html  css  js  c++  java
  • 自己写的用于table行操作的jquery插件

    这个是自己在实际项目中写的一个基于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。
  • 相关阅读:
    hdoj 5461 Largest Point
    poj 2186 Popular Cows【tarjan求scc个数&&缩点】【求一个图中可以到达其余所有任意点的点的个数】
    [LC] 64. Minimum Path Sum
    [LC] 122. Best Time to Buy and Sell Stock II
    [LC] 121. Best Time to Buy and Sell Stock
    [LC] 91. Decode Ways
    [LC] 62. Unique Paths
    [LC] 674. Longest Continuous Increasing Subsequence
    [LC] 300. Longest Increasing Subsequence
    [LC] 746. Min Cost Climbing Stairs
  • 原文地址:https://www.cnblogs.com/sky7034/p/2067772.html
Copyright © 2011-2022 走看看