可编辑的表格：jQuery+PHP+jeditable实现实时编辑表格字段内容

来源：互联网发布：淘宝卖家版注册编辑：程序博客网时间：2024/05/01 07:07

介绍一款超级实用的jquery插件叫jeditable，即传说中的即时编辑插件。所谓即时编辑就是，实现无刷新修改网页内容的一个功能，并且无需刷新即可即时显示修改结果。具体举例，见插件官方网站的demo：http://www.appelsiini.net/projects/jeditable/custom.html，点击可修改的文本即可！

//参数设置

$('.edit').editable('save.php', {
       width     :120,
       height    :18,
       //onblur    : "ignore",
         cancel    : '取消',
         submit    : '确定',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '单击可以编辑...',
       callback : function(value, settings) {
           $("#modifiedtime").html("刚刚");
         }

//select参数设置，其他方式见链接参考文档1

$('.edit_select').editable('save.php', {
       loadurl   : 'json.php',
       type      : "select",
       cancel    : '取消',
         submit    : '确定',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '单击可以编辑...',
       style     : 'display: inline'
   });

//调用jquery ui的datepicker日历插件
$.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input class="input" />');
       input.attr("readonly","readonly");
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
       var form = this;
       $("input",this).datepicker();
    }

demo下载

参考文档1

查考文档2

查考文档3