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

?
本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是 进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验。
?
本例依赖jquery库,并基于jeditable插件,具有以下特点:
?
这是一个用户信息的表格,从代码中可以发现响应的字段信息的td都给了一个class和id属性,并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的,这样做就是为了在编辑时让后台获取相应的字段信息,后面的PHP代码中会讲到。
?
CSS?
然后开始调用插件。
?
不难发现,其实上述代码中的data就是一串json数据。
textarea类型就不再多数,将type类型改为textarea就可以了。PS:默认类型为text。
当处理日期类型时,我接入了一个jquery ui的datepicker日历插件,当然别忘了要引入juqery ui插件和样式:
?
接入jquery ui的datepicker日历插件
?
调用的代码直接指定type类型为datepicker即可。
include_once("connect.php"); //连接数据库 $field=$_POST['id']; //获取前端提交的字段名 $val=$_POST['value']; //获取前端提交的字段对应的内容 $val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容 $time=date("Y-m-d H:i:s"); //获取系统当前时间 if(empty($val)){ echo "不能为空"; }else{ //更新字段信息 $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); if($query){ echo $val; }else{ echo "数据出错"; } }?
再回到开始的HTML代码,表格中显示的字段内容信息当然是从数据库读取来的,所以要用PHP读取数据表,把内容显示出来就OK,详细过程大家自己写一个吧。
?
如此,可编辑的表格就此收工。但是还不能完工,关于对输入信息的有效性的验证问题我还在研究,后面的文章我会陆续附上,敬请关注,也期待各位朋友的加入。
?
来源:helloweba.com :? http://www.helloweba.com/view-search-74.html
?
参考:
1. http://www.appelsiini.net/projects/jeditable
2. http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
3. http://blog.yoren.info/2008/05/jquery-%E7%94%A8jeditable%E5%BF%AB%E9%80%9F%E6%9B%B4%E6%96%B0mysql%E8%B3%87%E6%96%99/
?
?
?
?