> 백엔드 개발 > PHP 튜토리얼 > 可编者的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容

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

WBOY
풀어 주다: 2016-06-13 12:37:27
원래의
984명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿