欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2024-01-20 11:38:46
...
可编辑的表格: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

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频