用Table-Selector选出表单数据

介绍

Table-Selector是一款简单的jQuery插件，它可让表单变为可选，并展示出已选项，先看个demo感受下。

基本配置

1.引入文件

在进行操作之前，我们需要将资源文件引入。

<link rel="stylesheet" href="../css/selector.css"><script type="text/javascript" src="../js/lib/jquery.js"></script><script type="text/javascript" src="../js/selector.js"></script>

注意selector.js依赖jQuery，需在其之后引入。

2.table设置

<tr data="我是第1排">    <td>11</td>    <td>12</td>    <td>13</td></tr>

tr标签加上data属性，让每一行表为可选。若想让每个单元格可选，可设置相应td标签。

<td data="11">11</td>

3.selector设置

<div id="selector"></div>

页面加载完成时，生成selector对象。

//table id$("#target").Selector({  id: "selector",//html页面selector容器id  table: {    type:"row"//cell:单元格；row:行。默认为"row"  }}).show();

大功告成，selector可以正常使用啦！

功能进阶

添加数据操作

选好数据后，有时候需要对其添加操作，selector提供了两种方式。

1.构造函数方式

var selector = new Selector({  id: "selector",//html页面selector容器id  table: {    id: "target"//table id  },  actions:[ //添加操作按钮    {        name:"构造函数",//按钮名称        action:function(){alert("我是构造函数生成的！");}//点击后触发函数    }  ]}).show();

actions传入一个操作按钮的数组，多个操作按钮用逗号隔开。

2.普通函数方式

selector.addActionButton({    name:"普通函数",//按钮名称    action:function(){        alert("我是普通函数生成的！你选择了：" + selector.getSelectedItems().join());//点击后触发操作    }});

getSelectedItems()返回一个已选择数据的数组。

3.自定义方式

seletor提供的按钮长相太挫，在这个看脸的世界当然无法担当重要角色，除了修改其原生的css样式外，你也可以自定义操作按钮，这里不做过多论述。

添加方法监听

有时候表单有频繁更新，我们希望表单显示始终与数据的保持一致。但往往我们不得重新渲染表单，这样太过繁琐，尤其是数据更新无法预测的时候。selector提供了方法监听，被传入方法在每次执行之后，会触发一个自定义操作。

1.同步监听

selector.bindListener({    scope: selector,//被监听方法上下文    method: "pushItem",//被监听方法    action: function () {//方法触发后的操作        var items = selector.getSelectedItems();        alert("您选中了：" + items[items.length - 1]);    }});

以上，实现了，选择表单时弹出选中项的功能。selector中的pushItem方法在每一次数据选中时触发，随后触发action中的相应操作。

2.异步监听

//异步更新表单数据asyncFn = function(callback){    setTimeout(function(){        callback();    }, 2000);  alert("正在更新表单数据，请稍等...");};//添加操作按钮selector.addActionButton({    name:"异步更新",    action:function(){        this.asyncFn(function(){            alert("数据更新完成！");        });    }});//添加异步监听selector.bindListener({    scope: this,//被监听方法上下文    method: "asyncFn ",//被监听方法    action: function () {//方法触发后操作        alert("检测数据更新，重新渲染表单");        selector.refreshTable();    },    async: 0//异步方法回调函数的形参位置});

以上，模拟了更新表单异步操作的监听过程。【查看demo】。

3.解绑

selector用monkey patch的方式实现方法监听，实质上是替换了原上下文的方法。所以销毁时，别忘了解绑。

selector.unbindListener(this, "asyncFn");//解绑异步方法selector.unbindAllListeners();//解除所有绑定

附录

构造函数参数

参数 类型 说明 id string seletor界面容器id index Number 数据关键字所在位置，若不为空getSelectedItems方法仅返回关键字段 title string selector标题 table (data[string] splitter[string])[object] data：提取数据的属性名，默认为data；splitter：多个数据的分隔符。 hidable Bool 是否允许未选中时隐藏selector，默认为true actions (name[string] action[function])[list] name：按钮名称；action：操作。添加操作按钮，详细请阅读前文 listeners (scope[object] method[string] action[function] async[Number])[list] scope：被监听方法上下文；method：被监听方法；action：监听方法执行后响应；async：，详细请阅读前文。 style object selector样式

属性

名称 类型 说明 _template string selector模板 selectedItems list 选中的选项 node object selector的jQuery对象 tNode object 表单jQuery对象 type string 表单可选类型

方法

名称 参数 说明 _init selector初始化 _showOrHide 判断是否应该显示selector _bindEvent table的click事件绑定 _isDataEqual [object], [object] 两个数据是否相等 _render 渲染 _renderActionButton 操作按钮的渲染 clear 清空数据 bindListener [object| list] 添加监听 unbindListener [object], [string] 解绑监听 unbindAllListeners 解绑所有监听 refreshTable 重新渲染表单 show 开始selector addActionButton (name[string], action[fun])[object] 添加操作按钮，name：按钮名称；action：操作 pushItem [object] 添加选中项 removeItem [object] 删除选中项 getSelectedItems 获得所有选中项