基于jQuery的单据输入

snTable是一款用JavaScript实现的表格组件,支持数据绑定、编辑、验证等功能。通过配置可定制化表格样式及行为,适用于网页应用程序的数据展示和交互。

 

 

 

对象列表

对象名称

创建方式

说明

snTable

var tab = new snTable(id)

Idhtml表格ID

snRow

var row = new snRow(el)

elTR 标签

snCell

var cell = new snCell(el)

elTD 标签

snFootRow

var footRow = new snFootRow(el)

elTR (TFOOT标签中的)

snFootCell

var footCell = new snFootCell(el)

elTD(TFOOT标签中的)

 

snTable 属性与方法

属性

 

element

返回当前的 table元素

rows

返回tabletbody的行集合

方法

 

build(o)

初始配置 参数为一个对象

参数说明:

{

fields : [

           {Field:"Id",Text:"编号",Editable:true, Hide:true },

           {Field:"Name",Text:"姓名",Editable:true,FV:{

                                                        group : "1",

                                                        M     : "用户名只能为字母,长度为6-10位",

                                                        V     : [ {T:"I",P:{min:6,max:10}},

                                                                  {T:"R",P:"^[A-Za-z]+$"}

                                                                 ]

                                                         }},

            {Field:"Age",Text:"年龄",Editable:false},

            {Field:"Address",Text:"地址",Editable:true,Option:[{Text:"选项一",Value:"1"},{Text:"选项二",Value:"2",Default:true}]}

         ],

event : {

           snTableOnChange : testOnChange

         }

}

fields数组里的每一个对象代码表格中每一列的配置,从左到右,如果某一列不想配置,则设置为 {}

      Field 表示绑定的字段名

      Text 表示列的标题

      Editable 表示列是否允许编辑 默认为 false

      Hide   表示是否隐藏,默认为false

       FV     表示列的数据验证 说明参见:http://www.cnblogs.com/snryang/archive/2008/10/24/1318576.html

       Option 可以省略,默认为显示一个文本框,如果该属性存在值,编辑时显示一个下拉列表框,

              Text 表示下拉列表框的文本

              Value 表示下拉列表框的值

              Default 表示默认选中项,只允许有一个

event 为事件设置

    snTableOnChange 表示单元格的值发生改变时触发的事件 接到一个参数为当前单元格的snCell对象.

bind(o)

为表格绑定值,参数为json字符串

    在执行bind函数时会清空整个表格已经存在的行。

getRow(i)

得到表格中的i行,从0开始

返回一个snRow对象

insertRow(d,i)

D要插入的json数据

I插入的索引位置,默认为表格的最后

如果二个参数都为空,则增加一个空格

返回插入的行的snRow对象集合,

deleteRow(i)

删除指定索引位置的行

getJson()

得到整个表格的json格式数据的字符串

getObject()

得到整个表格的json格式数据的对象

getFootRow(i)

得到表格中TFOOT标签的行的snFootRow对象

 

snRow属性与方法

属性

 

element

当前行的element元素

cells

当前行的单元格HTML元素集合

方法

 

table()

返回行所在表格的 snTable对象

getCell(i)

得到表格中的第i个单元格,从0开始

返回一个snCell对象

remove()

移除行

rrevRow()

得到上一行

返回一个snRow对象,如果上一行不存在则为空

nextRow()

得到下一行

返回一个snRow对象,如果下一行不存在则为空。

getJson()

得到该行的Json字符串。

返回值:字符串

getObject()

得到该行的json对象

返回值:对象

 

snCell属性与方法

属性

 

element

返回值:单元格的HTML元素。

field

返回当前单元格绑定的字段名:

返回值:字符串,如果为 sn_NoField则说明这个单元格没有绑定什么字段

方法

 

row()

得到单元格所在的行

返回值:一个snRow对象

text(value)

获取或设置单元格的值

editablevalue

获取或设置单元格是否可以编辑

activeCell()

激活单元格并进入编辑状态

prevCell()

上一个单元格,如果不存在则为空

nextCell()

下一个单元格,如果不存在则为空

prevActiveCell()

上一个可编辑的单元格,如果不存在则为空

nextActiveCell()

下一个可编辑的单元格,如果不存在则为空

sum()

单元格所在列进行求和

validator(o)

设置单元格的数据验证

参数说明:http://www.cnblogs.com/snryang/archive/2008/10/24/1318576.html

 

snFootRow属性与方法

属性

 

element

返回值:页脚行的HTML元素。

cells

页脚行的所以单元格集合

方法

 

getCell(i)

返回页脚行的第i个单元格,从0开始

如果不存在则为空.

 

snFootCell属性与方法

属性

 

element

返回值:页脚单元格的HTML元素

方法

 

text(value)

获取或设置单元格的值

 

源码下载:http://files.cnblogs.com/snryang/snTable.rar

 

转载于:https://www.cnblogs.com/snryang/archive/2008/11/03/1325283.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值