PHP+Mysql+jQuery实现查询和列表框选择操作

本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件:。

HTML

  1. <form id="sel_form" action="post.php" method="post"> 
  2.    <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=''" /> 
  3.     <input type="button" id="searchOption" value="搜索" /> <span id="msg_ser"></span></p> 
  4.    <div id="sel"> 
  5.    <select name="liOption[]" id='liOption' multiple='multiple' size='8'> 
  6.    </select> 
  7.    </div> 
  8.    <input type="submit" value="提 交" /> 
  9. </form> 

说明,HTML内容是一个表单,里面放置有一个查询输入框,和一个列表框,以及相关按钮。

MYSQL数据表结构

  1. CREATE TABLE IF NOT EXISTS `t_mult` ( 
  2.   `id` int(11) NOT NULL auto_increment, 
  3.   `username` varchar(32) NOT NULL
  4.   `phone` varchar(20) NOT NULL
  5.   PRIMARY KEY  (`id`) 
  6. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

表t_mult是一张联系人资料表,包括姓名和手机号码字段。

CSS

  1. <link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" /> 

本例中只加载了Multiselect插件所需的样式文件,其他CSS大家可以自行设计。

JAVASCRIPT

首先需要引用本例所需的两个js文件。

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/jquery.multiselect2side.js"></script> 
  3. <link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" /> 

接着我们来调用Multiselect插件。

  1. $("#liOption").multiselect2side({ 
  2.     selectedPosition: 'right'
  3.     moveOptions: false
  4.     labelsx: '待选区'
  5.     labeldx: '已选区' 
  6. }); 

关于Multiselect的应用,如果不熟悉的可以查看之前的文章:

然后我们来写搜索按钮进行Ajax查询数据的操作。

  1. $("#searchOption").click(function(){ 
  2.     var keys=$("#keys").val(); 
  3.     $.ajax({ 
  4.          type: "POST"
  5.          url: "action.php"
  6.          data: "title="+keys, 
  7.          success: function(msg){ 
  8.             if(msg==1){ 
  9.                 $("#msg_ser").show().html("没有记录!"); 
  10.             }else
  11.                 $("#liOptionms2side__sx").html(msg); 
  12.                 $("#msg_ser").html(""); 
  13.             } 
  14.          } 
  15.     }); 
  16.     $("#msg_ser").ajaxSend(function(event, request, settings){ 
  17.         $(this).html(""); 
  18.     }); 
  19. }); 

说明,当点击搜索按钮时,进行的是Ajax异步操作,JAVASCRIPT将获取的搜索框的输入值,以POST方式传递给后台程序action.php处理,处理后,返回不同的结果给JAVASCRIPT,如果返回1,HTML页面会提示“没有记录”,反之,则将结果输出给左边列表框(待选区):liOptionms2side__sx。注意关键的地方到了,为什么列表框不是XHTML离的liOption,而变成了liOptionms2side__sx了呢?这个要从Multiselect插件说起,Multiselect插件其实就是将一个列表框装换成左右两个列表框,已供相关操作,通过查看其插件代码不难发现,左边的列表框名为:liOptionms2side__sx,右边列表框(已选区)名为:liOptionms2side__dx,后面会用到。

PHP

首先来看action.php的处理。

第一步是连接数据库

  1. $conn=mysql_connect("localhost","root",""); 
  2. mysql_select_db("demo",$conn); 
  3. mysql_query("SET names UTF8"); 

第二步读取数据,并输出。通过检测搜索框传来的值,构造不同的SQL语句,并将数据返回输出,代码如下:

  1. $keys=trim($_POST['title']); 
  2. $keys=mysql_real_escape_string($keys,$conn); 
  3. if(!empty($keys)){ 
  4.       $sql="select * from t_mult where username like '%$keys%' or phone='$keys'"
  5. }else
  6.       $sql="select * from t_mult"
  7. $query=mysql_query($sql); 
  8. $count=mysql_num_rows($query); 
  9. if($count>0){ 
  10.     while($row=mysql_fetch_array($query)){ 
  11.         $str.="<option value='".$row['id']."'>".$row['username']."-".$row['phone']."</option>"
  12.     } 
  13.     echo $str
  14. }else
  15.     echo "1"

最后还有一个提交操作,后台post.php程序来获取最终提交的项的值。

  1. $selID=$_POST['liOptionms2side__dx']; 
  2. if(!empty($selID)){ 
  3.     $str=implode(",",$selID); 
  4.     echo $str
  5. }else
  6.     echo "没有选择任何项目!"

注意,我们获取的是右边列表框liOptionms2side__dx的值,而不是liOption的值。

好了,到这里,一个查询、操作的例子已经实现,但是还有一点点瑕疵,在待选区往已选区添加项目时,如何判断控制已经添加过的项目不能重复添加。

转载请注明:代码家园 » PHP+Mysql+jQuery实现查询和列表框选择操作

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)