本文将采用Jquery+Ajax+PHP+MySQL来实现客户分类的管理,操作结果提示用jNotify。


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

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。