jquery EditInPlace 插件 表格单击双击编辑行

原创 2016年06月01日 12:00:25
官方网站:

http://www.appelsiini.net/projects/jeditable



首先. 引用js.

<script src="js/plugins/jeditable/jquery.jeditable.js"></script>

必须有jquery 支持. 这里我就不放了.


接下来. 就是重头戏了.

<script>
    $(function () {
        $(".editable").editable("pecialSale/updatePecialSale.do", {
            type: 'text',//实时编辑input框的type
            cancel: '取消',//取消编辑按钮的文字
            submit: '确定',//确认提交按钮的文字
            indicator: '保存中...',//提交处理过程中显示的提示文字
            tooltip: '单击编辑...',//鼠标悬停时的提示信息
            submitdata: function (value, settings) {
                //参数
                return {
                    specialId: $(this).parent().attr('id'),
                    specialSequence: $(this).parent().find('.editable').find('input').val()
                };
            },
            onsubmit: function (settings, original) {
                //使用jquery.validate.js进行验证
                $(this).validate({
                    errorPlacement: function (error, element) {
                        var form = $(element).parent();
                        form.next().remove();
                        form.parent().append(error);
                    },
                    success: function (error, element) {
                        var form = $(element).parent();
                        form.next().remove();
                    },
                    rules: {
                        value: {required: !0, maxlength: 10 ,number:true}
                    },
                    messages: {
                        value: {
                            required: '不能为空',
                            maxlength: '输入过长',
                            number: '请输入正确数字'
                        }
                    }
                });
                return $(this).valid();
            }, callback: function (value, settings) {
                //成功之后的回调函数
            }
        });
    });
</script>
 

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery.jeditable.js

  • 2013年01月13日 14:21
  • 24KB
  • 下载

Jeditable 即时编辑 Jquery 插件用法 (.Net)

前台 $(function () { $(".editable_textarea").edi...
  • shulin85
  • shulin85
  • 2012年02月10日 16:52
  • 3160

jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】

jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML...
  • sunyingyuan
  • sunyingyuan
  • 2013年12月27日 10:56
  • 5122

可编辑的jquery表格插件

转自:http://blog.csdn.net/luoyeyu1989/article/details/7201345 [javascript] view plain copy ...
  • xyr05288
  • xyr05288
  • 2016年04月05日 15:44
  • 1557

jQuery插件editable

将选定的元素变为“可编辑”: 即,当用户点击该元素时,显示一个编辑框,编辑框失去焦点(或其他特定事件)时,将编辑框的内容回存到该元素。 该元素可能是div,span,td等。   (funct...
  • tiewen
  • tiewen
  • 2012年05月12日 23:36
  • 10825

jquery——双击编辑异步更新(双击内容变input框可编辑,失去焦点后修改的数据异步提交)

html页面     Insert title here                                              标题 ...
  • danson_yang
  • danson_yang
  • 2012年11月20日 15:06
  • 2242

jquery 双击编辑并保存数据

很多时候需要修改数据,就用jq做了个双击文字能实现修改并保存数据的 部分代码如下: XML/HTML代码         测试用的           ...
  • k8080880
  • k8080880
  • 2011年09月03日 14:29
  • 976

JS实现双击内容变为可编辑状态

JS实现双击内容可编辑状态在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等。。 我在网上查了很多资料,但都有一个小bug,...
  • srd123
  • srd123
  • 2015年12月08日 17:50
  • 7085

jquery实现双击修改td内容的方法

$(function(){        $("#table").find("tr:eq(1)").find("td:lt(3):gt(0)").bind("dblclick",function(...
  • yfgcq
  • yfgcq
  • 2016年04月15日 16:29
  • 1756

通过js实现单击或双击直接修改内容

双击一个div或者其他,里面的文字内容变成可编辑状态,然后使用ajax保存数据,使用jquery实现的。...
  • gdali
  • gdali
  • 2017年08月18日 09:31
  • 218
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery EditInPlace 插件 表格单击双击编辑行
举报原因:
原因补充:

(最多只允许输入30个字)