`
yangwencan2002
  • 浏览: 37150 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

我的jQuery插件:PlusMinusTable

    博客分类:
  • Js
阅读更多

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方法

  • 大小: 10.8 KB
1
2
分享到:
评论

相关推荐

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    优秀jQuery插件:增强网站吸引力.pdf

    优秀jQuery插件:增强网站吸引力.pdf

    jquery插件:ajax和iframe加载提示效果

    **jQuery 插件:Ajax 和 Iframe 加载提示效果** 在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery...

    JQuery插件:facebook输入框(加强版)

    来自James Smith (http://loopj.com)一个JQuery 插件 我对该插件进行了加强化 可以看我的博客 http://hi.baidu.com/hjzheng/blog/item/afc83748d77aaae183025c6d.html

    jQuery插件:可拖动的图片展示实例(效果超酷)

    本文将深入探讨一个基于jQuery的插件,该插件实现了可拖动的图片展示功能,为用户提供了一种超酷的互动体验。 首先,我们需要理解jQuery的核心概念。jQuery提供了一种简洁的API,使得开发者可以方便地操作DOM...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery插件:ajax和iframe加载提示效果1.1版

    我的博客地址 http://blog.csdn.net/qq413041153/article/details/7397622 更新日志2012-05-05: 修复了几个bug: 1,iframe在没有指定宽和高时默认全屏的bug 2,当iframe隐藏时的错误显示效果 3,当iframe以tab...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    精美jQuery插件及源码

    本资源集合包含了一系列精美的jQuery插件及其源码,旨在帮助开发者提升网站的用户体验和视觉吸引力。下面我们将详细探讨jQuery插件及其在Web开发中的应用。 首先,jQuery插件是基于jQuery库的功能扩展,它们是由...

    jquery Autocomplete插件,搜索自动完成

    jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html

    jquery插件大全

    **jQuery插件大全** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件则是开发者为扩展jQuery功能而创建的各种工具,它们使得开发者能够快速实现...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    240多个jQuery插件

    3. Content rater with asp.net, ajax and jQuery:内容评分。 4. Half-Star Rating Plugin:半星评分。 **搜索插件**: 1. jQuery Suggest:自动补全建议。 2. jQuery Autocomplete:自动完成。 3. jQuery ...

    jquery相关插件js

    《jQuery相关插件JS详解与应用》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,以其简洁、易用的API赢得了广大开发者喜爱。本篇将深入探讨jQuery的相关插件及其实现原理,帮助读者理解如何将这些插件融入到...

    JQuery插件

    JQuery插件是JavaScript库JQuery生态中的一个重要组成部分,它扩展了JQuery的基本功能,为开发者提供了更加丰富和便捷的API来实现各种复杂的交互效果和动画。在网页开发中,JQuery插件广泛应用于增强用户体验、创建...

    jquery插件.rar

    《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的核心...

    jQuery插件,jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...

    jQuery幻灯插件:Nivo Slider

    如果你需要演示新产品,或者你需要比较酷的幻灯片转化效果,Nivo幻灯是你的一个选择之一: 号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义 jQuery插件使用免费

    jquery插件库-jquery仿京东商品详情页图片放大效果.zip

    "jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件,旨在模仿京东商品详情页中的图片放大效果,为用户提供更直观的商品查看体验。 首先,我们来详细了解一下jQuery插件的...

Global site tag (gtag.js) - Google Analytics