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; }