本文将采用Jquery+Ajax+PHP+MySQL来实现客户分类的管理,操作结果提示用jNotify。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br>
表 ·catalist·<br>
CREATE TABLE `catalist` ( <br>
`cid` int(11) NOT NULL auto_increment, <br>
`title` varchar(100) NOT NULL, <br>
`sort` mediumint(6) NOT NULL default '0', <br>
PRIMARY KEY (`cid`) <br>
) ENGINE=MyISAM DEFAULT CHARSET=utf8;<br>
2、<br>
接着加载jquery库、操作结果提示插件jNotify和删除确认插件hiAlert<br>
<script></script> <br>
<script></script> <br>
<script></script> <br>
<script></script> <br>
<link>
<br>
index.php<br>
3、<br>
我们先遍历表·catalist·中的数据,并且给每一项加上,删除和修改按钮,在最下方加上增加按钮。<br>
<?php <br />
$query = mysql_query("select * from catalist order by cid asc"); <br>
while($row=mysql_fetch_array($query)){ <br>
$list .= "<li>
<span></span> <br>
<span></span><span>".$row['title']."</span>
</li>"; <br>
} <br>
?><br>
HTML<br>
4、<br>
接着我们把遍历出来的列表以字符串的形式放到#catalist,代码如下:<br>
<div> <br>
<h3>客户类别</h3> <br>
<ul> <br>
<?php echo $list;?> <br>
</ul> <br>
<p><a>新增一项</a></p> <br>
</div>
<br>
jQuery<br>
global.js中增加的操作方式如下:<br>
$(function(){ <br>
//保存新增项 <br>
$(".ok").live('click',function(){ <br>
var btn = $(this); <br>
var input_str = btn.parent().find('input').val(); <br>
if(input_str==""){ <br>
jNotify("请输入类别!"); <br>
return false; <br>
} <br>
var str = escape(input_str); <br>
$.getJSON("post.php?action=add&title="+str,function(json){ <br>
if(json.success==1){ <br>
var li = "<li>
<span> <br>
</span><span></span><span>"+ <br>
json.title+"</span>
</li>"; <br>
$("#catalist").append(li); <br>
btn.parent().remove(); <br>
jSuccess("恭喜,操作成功!"); <br>
}else{ <br>
jNotify("出错了!"); <br>
return false; <br>
} <br>
}); <br>
}); <br>
});<br>
5、<br>
增加传给post.php 处理:<br>
include_once('connect.php'); //连接数据库 <br>
$action = $_GET['action']; <br>
switch($action){ <br>
case 'add': //新增项 <br>
$title = uniDecode($_GET['title'],'utf-8'); <br>
$title = htmlspecialchars($title,ENT_QUOTES); <br>
$query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')"); <br>
if($query){ <br>
$insertid = mysql_insert_id($link); <br>
$arr = array('id'=>$insertid,'title'=>$title,'success'=>1); <br>
}else{ <br>
$arr = array('success'=>2); <br>
} <br>
echo json_encode($arr); <br>
break; <br>
case '': <br>
break; <br>
}<br>
删除项大家可用下载源码来看看......
查看该特效演示及免费下载,请访问【素材火】http://www.sucaihuo.com/js/58.html
AD:真正免费,域名+虚机+企业邮箱=0元