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

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

测试运行

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

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

并插入一些初始数据

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

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

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

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

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

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

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

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

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

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

最后运行的效果如下图：

整合jQuery加入AJAX功能

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

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

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

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

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

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

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

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

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

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

获得action的名称，而

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

则是动态生成隐藏域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();
    2.

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

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

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

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

小结

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

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

网站名称：使用jQuery设计数据表格之实现Ajax功能
分享网址：http://www.shufengxianlan.com/qtweb/news22/315472.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计知识

分类信息网站

成都网站排名　　 　软文发布平台　　 　红光高低压开关厂　　 　电信内江机房　　 　成都移动服务器托管　　 　班戈纳美网站　　 　渠县网站建设　　 　创新互联重庆　　 　重庆外贸网站建设　　 　重庆网站建设公司　　 　成都服务器机柜租用　　 　成都网站设计　　 　成都商城网站建设　　 　南充网站建设　　 　营销型网站建设　　 　网站维护报价　　 　成都网站制作　　 　短视频拍摄　　 　成都网站设计制作公司　　 　成都模版网站建设