jQuery-jeditable: 点击即编辑, jquery双击编辑内容, jquery实时编辑插件, jQuery 即时编辑插件

<tr>
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>联系电话</th>
    <th>出生年月</th>
    <th>喜欢颜色</th>
    <th width="30%">备注</th>
</tr>
<tr id="1">
    <td>1</td>
    <td class="username" field="username" isempty="0">张三</td>
    <td class="gender" field="gender">男</td>
    <td class="phone" field="phone">134564321</td>
    <td class="birthday" field="birthday">1989-12-13</td>               
    <td ><span class="color" field="color">cccccc</span><span class="colorshow"></span></td>
    <td class="comment" field="comment">我是屌丝</td>
</tr>

以上为头与第一行。要修改一个属性的值，一般需要知道它的id，字段名，以及新的值。这里id在其父节点tr内，字段名是field属性，新值插件的value参数会传递，另外比如是否可以为空isempty、修改之前的值都可以一并传递到后台。

姓名字段的修改：

姓名字段是最常见的默认的input类型即可完成，难点在于要在jeditable插件基础上进行验证，限制不能为空与名字过长之类的。可以直接使用jquery.validate.js插件进行验证，大大简化了验证工作。先来看一下使用了jeditable进行编辑的时候发生了什么：

可以看到，插件是在要编辑的dom元素外包一个form表单，把页面上的原值显示在input框内供修改。验证操作写在提交之前的onsubmit事件内。具体js要点及代码如下：

$(".username").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',//方便调试样式
    // width: '20px',//无效
    cssclass: 'username',//在css样式中通过.username input{width:60px;}控制input框宽度
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "isempty="+$(this).attr('isempty')+"&"+
            "oldvalue="+value
        );
        return {id: $(this).parent().attr('id'), field: $(this).attr('field'), oldvalue: value, isempty: $(this).attr('isempty')};
    },
    onsubmit: function(settings, original) {
        //简单验证
        // var newValue = $(original).find('input').val();
        // newValue = $.trim(newValue);
        // if(newValue == '') {
        //  alert('不能为空！');
        //  return false;
        // }
        //使用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, minlength:2, maxlength:10}
            },
            messages: {
                value:{
                    required: '不能为空',
                    minlength: '不能少于2字符',
                    maxlength: '名字过长了吧',
                }
            }
        });
        return $(this).valid();
    },
    callback: function(value, settings) {
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
});

性别字段的修改：

性别字段就不是默认的text类型了，需要用到select。这里传递到后台的时候value是实际值1，2，3之类的，但callback回调中的value是页面看到的男、女、人妖，为显示实际的值做了个转换。submitdata中的value是原值，也是页面显示的男、女、人妖，实际传递时也是传递男、女、人妖。具体代码如下：

$(".gender").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',
    type: 'select',//类型不再是默认的text
    data: {'1':'男', '2':'女', '3':'人妖'},
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "oldvalue="+value
        );
        return {id: $(this).parent().attr('id'), field: $(this).attr('field'), oldvalue: value};
    },
    callback: function(value, settings) {
        switch(value) {
            case '男':
                value = 1;
                break;
            case '女':
                value = 2;
                break;
            case '人妖':
                value = 3;
                break;
        }
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
});

电话字段的修改：

电话字段也可以是text类型用jquery.validate.js来进行验证。但这里要说的是增加jeditable的input类型，默认有text，select，textarea三种，往往不能满足要求，比如我们想使用一些第三方的输入插件，比如时间选择器，颜色选择器等。jeditable支持增加input类型来集成第一方输入插件，这里我们使用的是masked-input-plugin（官网点我），它可以限制我们只能输入一定个数的数字，当个数不是指定个数时提交的数据为空。显然这不是很标准的电话号码验证，只为说明如何增加input类型，为后面增加时间选择器、颜色选择器等作参考。

$.editable.addInputType('phone', {
    element : function(settings, original) {
        var input = $('<input type="text">').mask("999999999");
        $(this).append(input);
        return(input);
    }
});
 
$(".phone").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',
    cssclass: 'phone',
    type: 'phone',//用自己添加的input样式
    placeholder: '双击添加电话',
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "oldvalue="+value
        );
        return {id: $(this).parent().attr('id'), field: $(this).attr('field'), oldvalue: value};
    },
    callback: function(value, settings) {
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
});

jeditable的addInputType()方法添加input类型，我们指定类型名字，创建input元素，绑定第三方输入插件，追加到form内部（方法内的this指代form表单），再返回即可！详细的介绍参见官网这里

日期字段的修改：

在日期字段这里，我们绑定bootstrap的datetimepicker。至于这里使用的第三方输入插件的参数不赘述，不了解的另百度谷歌。

$.editable.addInputType('birthday', {
    element : function(settings, original) {
        var input = $('<input type="text" size="8" readonly>').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: 1,
            startView: 2,
            minView: 2,
        });
        $(this).append(input);
        return(input);
    }
});
 
$(".birthday").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',
    cssclass: 'phone',
    type: 'birthday',//用自己添加的input样式
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "oldvalue="+value
        );
        return {id: $(this).parent().attr('id'), field: $(this).attr('field'), oldvalue: value};
    },
    callback: function(value, settings) {
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
});

颜色字段的修改：

颜色字段，绑定的是之前说过的colpick-jQuery-Color-Picker（点我查看介绍）。

$.editable.addInputType('color', {
    element : function(settings, original) {
        var input = $('<input type="text">').colpick({
            layout: 'hex',
            submit: false,
            colorScheme: 'light',
            // color: '0066CC',
            showEvent: 'focus',
            onChange: function(hsb, hex, rgb, el, bySetColor) {
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
        $(this).append(input);
        return(input);
    }
});
 
$(".color").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',
    cssclass: 'color',
    type: 'color',//用自己添加的input样式
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "oldvalue="+value
        );
 
        return {id: $(this).parent().parent().attr('id'), field: $(this).attr('field'), oldvalue: value};
    },
    callback: function(value, settings) {
        $(this).next().css('background-color','#'+value);
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
});

备注字段的修改：

这里使用自带的textarea类型即可。验证使用jquery.validate.js。

$(".comment").editable("editable.php", {
    event: 'dblclick',
    tooltip: '双击编辑...',
    indicator: '保存中...',
    submit: '确定',
    onblur: 'ignore',
    cssclass: 'comment',
    type: 'textarea',
    rows: 3,
    onsubmit: function() {
        $(this).validate({
            rules:{value:{maxlength:20,}},
            messages:{value:{maxlength:'最多20个字符'}}
        });
        return $(this).valid();
    },
    submitdata: function(value, settings) {
        $("#tip").text(
            "id="+$(this).parent().attr('id')+"&"+
            "field="+$(this).attr('field')+"&"+
            "oldvalue="+value
        );
        return {id: $(this).parent().attr('id'), field: $(this).attr('field'), oldvalue: value};
    },
    callback: function(value, settings) {
        $("#tip").text(function(index, orignial){return orignial+"&value="+value});
    }
 
})

至此，各个字段已经实现即时编辑并进行前端验证。这里是静态写死没有输入数据库，有了发送到后台的那些数据，相信要进行后台验证并更新数据都不是难事了。附这里的后台程序：

<?php
$value = $_POST['value'];
if($_POST['field'] == 'gender') 
{
    switch ($value) 
    {
        case 1:
            $value = '男';
            break;
        case 2:
            $value = '女';
            break;
 
        case 3:
            $value = '人妖';
            break;
    }
}
echo $value;

演示

你可通过 live demo 来测试Jeditable 是如何工作的.