~ read.

Inline Text Editing (PHP)

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的部分。因为这部分相对简单我就直接使用教程中的代码作为示范

/*
 * 版权所有 Copyright smarttutorials.net
 */
if($_POST['name']=='username'){
    $id=$_POST['pk'];
    $username=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,username) VALUES('".$id."','".$username."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET username='".$username."' WHERE id=$id") or die(mysql_error()); 
    }
}

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

comments powered by Disqus