Heim >Backend-Entwicklung >PHP-Tutorial > 可编者的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容

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

WBOY
WBOYOriginal
2016-06-13 12:37:27988Durchsuche

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

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

//参数设置

 $('.edit').editable('save.php', {
         width     :120,
         height    :18,
         //onblur    : "ignore",
         cancel    : '取消',
         submit    : '确定',
         indicator : ' 可编者的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容 ',
         tooltip   : '单击可以编辑...',
         callback  : function(value, settings) {
             $("#modifiedtime").html("刚刚");
         }

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

$('.edit_select').editable('save.php', {
         loadurl   : 'json.php',        
         type      : "select",
         cancel    : '取消',
         submit    : '确定',
         indicator : ' 可编者的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容 ',
         tooltip   : '单击可以编辑...',
         style     : 'display: inline'
     });


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

demo下载

参考文档1

查考文档2

查考文档3

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn