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

开发 前端
本文使用了php中的著名开发框架CI以及jQuery,指导读者如何构建了一个通用的数据表格帮助类,并且拥有ajax的功能(借助jQuery实现)。读者从中可以学到不少CI框架以及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 Management</title> 
  4.    <script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script> 
  5.    <script src="<?php echo base_url(); ?>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>$error</font>";  
  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

【编辑推荐】

  1. 使用jQuery设计数据表格之设计表格基类
  2. 从零开始学习jQuery之万能的选择器
  3. 7月20款最新且极具创意的jQuery插件(附下载)
  4. 从零开始学习jQuery之Ajax快餐
  5. 一些应该熟记于心的jQuery函数和技巧
责任编辑:陈贻新 来源: it168
相关推荐

2011-10-25 09:52:56

jQuery

2017-08-10 13:43:00

大数据数据表格优化设计

2009-05-20 14:49:16

ibmdwAjaxWeb开发

2012-02-08 17:01:36

2011-05-19 11:01:14

ERWin数据库设计

2011-01-24 13:20:49

2011-01-26 08:59:11

jQueryjavascriptweb

2009-06-26 13:46:13

Struts

2017-10-11 18:17:06

大数据数据可视化前后端

2009-08-07 09:57:20

Ajax分页功能

2009-08-04 11:22:07

ASP.NET数据导入

2011-05-18 13:43:52

jQueryAjaxPHP

2023-01-13 18:32:40

计数系统设计

2011-05-18 13:28:46

jQueryPHPAJAX

2009-09-09 11:24:13

Linq使用数据表

2011-04-14 10:08:04

AJAXPHPJQuery

2011-03-02 11:23:48

2013-12-02 14:40:03

jQueryAjax

2010-12-28 13:44:12

PHPXMLjQuery

2021-04-26 10:47:54

AJAXDjango前端
点赞
收藏

51CTO技术栈公众号