jQuery插件:PlusMinusTable
一.简介:
1.顾名思义:一个具有加减法的table,添加按钮实现加法功能,删除按钮实现减法功能。
2.加法功能:在该table尾部追加一个tr;
3.减法功能:删除所在行;
4.数据初始化:调用setData(jsonArray)设置数据,其中jsonArray为一json对象数组;
5.数据收集:调用getData()得到数据,返回一json对象数组。
6.使用前提:需要引入jquery库,目前已经在jquery 1.2.6、1.3.1下测试通过
二.使用方法:
1.引入js和css(注意引用路径是否正确):
<g:javascript library="jquery/plugin/plusMinusTable/jquery.plusMinusTable"/>
<link rel="stylesheet" href="${createLinkTo(dir: 'js/jquery/plugin/plusMinusTable', file: 'jquery.plusMinusTable.css')}"/>
2.html代码(注意2个id的规约):
<!--必须自定义一个table,而且这个table要包含一个id=plusBtnId的添加按钮-->
<table id="myTable">
<tr>
<th>
<!--这里是你的添加按钮-->
<span id="plusBtn"/><!--注意其id必须为plusBtn(什么,你的添加按钮id不是plusBtn?参看步骤3)-->
<!--或者是一个超链接<a id="plusBtn"/>-->
</th>
<th>
名字
</th>
<th>
姓氏
</th>
</tr>
<!--这里是你的模板tr代码-->
<tr id="template"><!--注意:模板的id必须为template(什么,你的模板id不是template?参看步骤3)-->
<td class="tdbg" colspan="2">
<input id="firstName" name="firstName"/><!--请设置id属性,并且取值唯一,另外get/setData时,json属性与此id对应-->
<input id="lastName" name="lastName"/><!--请设置id属性,并且取值唯一,另外get/setData时,json属性与此id对应-->
</td>
</tr>
</table>
3.js代码:
<script type="text/javascript">
<!--
$().ready(function() {
$("#myTable").plusMinusTable();
//$("#myTable").setData(${data});//其中${data}为一个json对象数组,请注意是对象数组而不是对象
//后台代码为def [[firstName:"wencan",lastName:"yang"]] as JSON
//var myJsonString = $.toJSON($('#myTable').getData())//将json对象数组转换成json字符串才能提交到后台
});
//-->
</script>
但是,如果你的添加按钮的id不是系统默认的plusBtn或模板id不是template,你可以这样进行覆盖:
$("#myTable").plusMinusTable({plusBtn:"yourPlusBtnId",template:"yourTemplateId"});
三.Q&A:
1.Q:plusMinusTable的对外数据接口api是?
A:获取数据:$("#myTable").getData();
设置数据:$("#myTable").setData(jsonArray);
通常用到这2个方法时需要引入jquery.json.js作为辅助,但PlusMinusTable本身其实并不需要jquery.json.js。
2.Q:为什么是一个json对象数组?
A:每一行(1个tr)记录是一个json对象,整个table(n个tr)的数据就是一个json对象数组
3.Q:$("#myTable").rollback()作用是?
A:用于回滚table状态,通常用于回到最初始状态,相当于“清空”。
四.bug记录:
1.请在这里填写你发现的bug
五.我有新需求或建议:
1.请在这里填写你的新需求或建议
六.ChangeLog:
1.$("#myTable").plusMinusTable(p),其中p为要动态增加的tr的html代码
2.将p改为template方式,对用户更加友好,至少可以省去html在双引号下的转义麻烦
3.解决js取不到图片绝对路径的bug
4.增加setData方法
5.增加getData方法
我的jQuery插件:PlusMinusTable
最新推荐文章于 2024-09-14 23:32:51 发布