软件开发培训班 >> 编程开发 >> JavaScript


使用jQuery设计数据表格之实现Ajax功能

　　本文标签：jQuery

　　当前在Web开发中，jQuery和PHP无疑是绝佳的配合  。其中PHP由于其简单易用，深得开发者的喜爱，而jQuery则由于在前端开发中的灵活和简单，功能强大，可以做出很多很眩目的效果  。在上篇文章中，主要讲述了设计表格基类，本文将主要介绍测试和运行部分，以及加入AJAX功能，整合jQuery  。

　　测试运行

　　现在，我们可以在CI中测试运行下我们所写的数据表格助手类是否有效果，在测试前，先在MYSQL中建立数据表如下：

  1. CREATE DATABASE `dg_test`;  
  2. CREATE TABLE `users` (  
  3. `id` int(11) NOT NULL AUTO_INCREMENT,  
  4. `username` varchar(80) NOT NULL,  
  5. `password` varchar(32) NOT NULL,  
  6. `email` varchar(255) NOT NULL,  
  7. UNIQUE KEY `id` (`id`)  
  8. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; 

　　并插入一些初始数据

  1. INSERT INTO `users` (`id`, `username`, `password`, `email`) VALUES  
  2. 　(1, david, 12345, david@domain.com),  
  3. 　(2, maria, 464y3y, maria@domain.com),　(3, alejandro, a42352fawet, alejandro@domain.com),  
  4. (4, emma, f22a3455b2, emma@domain.com 

　　接下来，编写控制层的测试文件，命名为test.php,保存在application/controller目录下，代码如下：

  1. class Test extends CI_Controller{  
  2. function __construct(){  
  3. parent::__construct();  
  4. $this->load->helper(array(datagrid,url));  
  5. $this->Datagrid = new Datagrid(users,id);  
  6. }  
  7. function index(){  
  8. $this->load->helper(form);  
  9. $this->load->library(session);  
  10. $this->Datagrid->hidePkCol(true);  
  11. $this->Datagrid->setHeadings(array(email=>E-mail));  
  12. $this->Datagrid->ignoreFields(array(password));  
  13. if($error = $this->session->flashdata(form_error)){  
  14. echo "$error";  
  15. }  
  16. echo form_open(test/proc);  
  17. echo $this->Datagrid->generate();  
  18. echo Datagrid::createButton(delete,Delete);  
  19. echo form_close();  
  20. }  
  21. function proc($request_type = ){  
  22. $this->load->helper(url);  
  23. if($action = Datagrid::getPostAction()){  
  24. $error = "";  
  25. switch($action){  
  26. case delete :  
  27. if(!$this->Datagrid->deletePostSelection()){  
  28. $error = Items could not be deleted;  
  29. }  
  30. break;  
  31. }  
  32. if($request_type!=ajax){  
  33. $this->load->library(session);  
  34. $this->session->set_flashdata(form_error,$error);  
  35. redirect(test/index);  
  36. } else {  
  37. echo json_encode(array(error => $error));  
  38. }  
  39. } else {  
  40. die("Bad Request");  
  41. }}  
  42. 　}  
  43. 　?> 

　　下面简单分析下这个测试类文件  。首先在其构造函数中，加载了编写的datagrid数据表格helper文件和CI中的url helper类，并且通过

  1. $this->Datagrid = new Datagrid(users,id); 

　　初始化了数据助手类的构造方法，指定了表名是users,数据列为id  。接着，通过

  1. $this->Datagrid->setHeadings(array(email=>E-mail)); 

　　设置了要显示的表头中，将email显示为E-MAIL  。并通过

  1. $this->Datagrid->ignoreFields(array(password)); 

　　设置了，在数据表格列中不显示password一列  。再接下来，则是调用generate()方法生成表格  。而在proc()方法中，则负责处理用户对选择并删除记录的处理，而在if($request_type!=ajax){ ……}的这段代码中，则判断是否属于ajax调用，如果不属于ajax调用，则正常返回出错提示信息，否则则使用json_encode方法返回错误信息，这个技巧也是很常用的，之所以这样做，其目的是为了能同时满足ajax及非ajax的调用  。

　　最后运行的效果如下图：

　　

　　

　　

　　整合jQuery加入AJAX功能

　　现在，我们可以为其加入AJAX功能了，这就要整合jQuery  。由于本文不是初学者的教程，因此不会讲解jQuery方面的知识，而是直接讲解如何整合  。首先新建一个文件夹，命名为js，然后里面放置jQuery的库文件，并且新建立user.php文件，代码如下：

  1. <html> 
  2. <head> 
  3.    <title>Users Managementtitle> 
  4.    <script src="js/jquery-1.6.3.min.js">script> 
  5.    <script src="js/datagrid.js">script> 
  6. head> 
  7. <body> 
  8. php 
  9.       $this->Datagrid->hidePkCol(true);  
  10.       if($error = $this->session->flashdata(form_error)){  
  11.          echo "<font color=red>$errorfont>";  
  12.       }  
  13.       echo form_open(test/proc,array(class=>dg_form));  
  14.       echo $this->Datagrid->generate();  
  15.       echo Datagrid::createButton(delete,Delete);  
  16.       echo form_close();  
  17. ?> 
  18. body> 
  19. html> 

　　由于我们这里是采用ajax的方式去判断用户选择表中的哪些记录并且响应删除按钮的事件，所以只保留上面的php代码，而同时，在js目录下新建立一个js/datagrid.js文件，还要修改上文中的index 方法如下：

  1. function index(){  
  2. $this->load->helper(form);  
  3. $this->load->library(session);  
  4. $this->load->view(users);  
  5. 　} 

　　也可以修改相关的CSS样式，例如：

  1. .dg_form table{  
  2. border:1px solid silver;  
  3. }  
  4. .dg_form th{  
  5. background-color:gray;  
  6. font-family:"Courier New", Courier, mono;  
  7. font-size:12px;  
  8. }  
  9. .dg_form td{  
  10. background-color:gainsboro;  
  11. font-size:12px;  
  12. }  
  13. .dg_form input[type=submit]{  
  14. margin-top:2px;  
  15. 　}  

　　在datagrid.js中，增加如下的函数方法：

  1. $(function() {  
  2. $(.dg_form :submit).click(function(e){  
  3. e.preventDefault();  
  4. var $form = $(this).parents(form);  
  5. var action_name = $(this).attr(class).replace("dg_action_","");  
  6. var action_control = $();  
  7. $form.append(action_control);  
  8. var post_data = $form.serialize();  
  9. action_control.remove();  
  10. var script = $form.attr(action)+/ajax;  
  11. $.post(script, post_data, function(resp){  
  12. if(resp.error){  
  13. alert(resp.error);  
  14. } else {  
  15. switch(action_name){  
  16. case delete :  
  17. //将已删除的数据在数据表格中移走  
  18. $form.find(.dg_check_item:checked).parents(tr).remove();  
  19. break;  
  20. case anotherAction :  
  21. ..  
  22. break;  
  23. }  
  24. }  
  25. }, json)  
  26. })  
  27. })  

　　在上面的代码中，首先通过 var $form = $(this).parents(form);获得了表单的名，然后通过

  1. var action_name = $(this).attr(class).replace("dg_action_","") 

　　获得action的名称，而

  1. var action_control = $();  
  2. $form.append(action_control);  

　　则是动态生成隐藏域action_control，通过$form.append(action_control)添加到表单中去  。

　　接下来，我们将客户端的数据通过 $.post(script, post_data, function(resp)发送到服务端，其中script变量定义了ajax发送的路径，

　　Post_data则为通过$form.serialize()序列化后的表单数据  。然后，在其回调函数的返回值中，判断resp是否包含了错误信息，如果包含了错误信息则通过alert显示，然后再在数据表格中，使用

  1. $form.find(.dg_check_item:checked).parents(tr).remove(); 

　　一句代码，将服务端已删除的数据行在数据表格中移走  。

　　最后，我们再添加如下代码

  1. $(.dg_check_toggler).click(function(){  
  2. var checkboxes = $(this).parents(table).find(.dg_check_item);  
  3. if($(this).is(:checked)){  
  4. checkboxes.attr(checked,true);  
  5. } else {  
  6. checkboxes.removeAttr(checked);  
  7. }  
  8. })  

　　这段代码的意思是，当用户选择了表格中的“全选”按钮时，将会寻找表格中所有每一行记录前的checkbox(存放到变量checkboxes中)，然后如果用户在全选的checkbox框中勾选了的话，则通过jQuery设置所有记录前的checkbox的attr属性为true,即实现了全选的功能，反之则为取消全选  。

　　小结

　　本文使用了php中的著名开发框架CI以及jQuery，指导读者如何构建了一个通用的数据表格帮助类，并且拥有ajax的功能(借助jQuery实现)  。读者从中可以学到不少CI框架以及jQuery的技巧和知识  。

　　原文：http://tech.it168.com/a2011/1027/1264/000001264981_all.shtml