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

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

WBOY
Release: 2016-06-13 12:37:27
Original
992 people have browsed it

可编辑的表格: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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template