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

官方网站：

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>