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>
 

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

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

前台 $(function () { $(".editable_textarea").edi...

【随记】JQuery实现表格的双击编辑功能(自动适应表格高度和宽度)

jquery 区分鼠标单击双击事件插件

原文地址: 大家应该都知道javascript中鼠标单击和双击事件,一般情况下,对一个元素只需要绑定一个单击事件,或者绑定一个双击事件就可以了。但是有些特别的情况下,会对...

用JS实现动态删除表格行、列、双击编辑的代码

jquery 双击可编辑表格 有2种方案: 1、双击事件后,隐藏表格td之间的内容,插入一个 ,然后就可以编辑了。 2、双击事件后,讲当前表格td的contentEditable属性修改为t...
  • mboby
  • mboby
  • 2014年12月31日 17:39
  • 295

可编辑的jquery表格插件

转自:http://blog.csdn.net/luoyeyu1989/article/details/7201345 [javascript] view plain copy ...

双击表格即时编辑

  • 2017年05月25日 09:53
  • 4KB
  • 下载

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

jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery EditInPlace 插件 表格单击双击编辑行
举报原因:
原因补充:

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