PHP 行内编辑

最近在写一个PHP的网站,为了提高用户的体验,希望能够加入一个能够直接在行内进行编辑的功能,然后Google了一下,使用了X-Editable的插件。非常好使而且配置方便。

####教程参考 其实X-Editable的Document已经很不错了,但是还是有两个个不错的参考教程 Inline edit using jQuery and PHP, MySQL and Bootstrap 3 Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap

####代码讲解 其实用这个Library非常的不错,很容易的解决了Inline Edit的问题,因为教程已经很详细我就简单说一下代码的问题

使用 “a” 标签处理需要行内编辑的地方。例如:

<a href='#' id='username' data-type='text' data-pk='id' data-url='post.php'></a>

然后加入JQuery的语句处理行内编辑:

<script type="text/javascript">
type = "";
$('#inline').change(function() {
    type = $(this).val();
    console.log((type != "" ? "inline" : "popup"));
    $.fn.editable.defaults.mode = (type != "" ? "inline" : "popup");
});

$(document).ready(function() {
$.fn.editable.defaults.mode ="inline";
$('#tableName a').editable(); 
});
</script>

这里需要注意的是,如果你是使用一个多数据的数据库同时通过一个表格table来显示你的数据的话,你需要将表格名+a标签 使用在你的JavaScript中来指定可以Inline Edit的部分,而不是直接使用a标签中的id名称,否则你可能会只有第一个数据可以编辑而其他数据均不能编辑。

然后我们需要处理的就是数据库Update的部分。因为这部分相对简单我就直接使用教程中的代码作为示范

基本上来说一个Inline edit就做完了~