使用jQuery設計數據表格之實現Ajax功能

作者：廖煜爃 2011-10-28 14:01:30

本文使用了php中的著名開發框架CI以及jQuery，指導讀者如何構建了一個通用的數據表格幫助類，并且擁有ajax的功能(借助jQuery實現)。讀者從中可以學到不少CI框架以及jQuery的技巧和知識。

當前在Web開發中，jQuery和PHP無疑是絕佳的配合。其中PHP由于其簡單易用，深得開發者的喜愛，而jQuery則由于在前端開發中的靈活和簡單，功能強大，可以做出很多很眩目的效果。在上篇文章中，主要講述了設計表格基類，本文將主要介紹測試和運行部分，以及加入AJAX功能，整合jQuery。

測試運行

現在，我們可以在CI中測試運行下我們所寫的數據表格助手類是否有效果，在測試前，先在MYSQL中建立數據表如下：

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

并插入一些初始數據

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

接下來，編寫控制層的測試文件，命名為test.php,保存在application/controller目錄下，代碼如下：

class Test extends CI_Controller{  
　　function __construct(){  
　　parent::__construct();  
　　$this->load->helper(array('datagrid','url'));  
　　$this->Datagrid = new Datagrid('users','id');  
　　}  
　　function index(){  
　　$this->load->helper('form');  
　　$this->load->library('session');  
　　$this->Datagrid->hidePkCol(true);  
　　$this->Datagrid->setHeadings(array('email'=>'E-mail'));  
　　$this->Datagrid->ignoreFields(array('password'));  
　　if($error = $this->session->flashdata('form_error')){  
　　echo "$error";  
　　}  
　　echo form_open('test/proc');  
　　echo $this->Datagrid->generate();  
　　echo Datagrid::createButton('delete','Delete');  
　　echo form_close();  
　　}  
　　function proc($request_type = ''){  
　　$this->load->helper('url');  
　　if($action = Datagrid::getPostAction()){  
　　$error = "";  
　　switch($action){  
　　case 'delete' :  
　　if(!$this->Datagrid->deletePostSelection()){  
　　$error = 'Items could not be deleted';  
　　}  
　　break;  
　　}  
　　if($request_type!='ajax'){  
　　$this->load->library('session');  
　　$this->session->set_flashdata('form_error',$error);  
　　redirect('test/index');  
　　} else {  
　　echo json_encode(array('error' => $error));  
　　}  
　　} else {  
　　die("Bad Request");  
　　}　　}  
　}  
　?>

下面簡單分析下這個測試類文件。首先在其構造函數中，加載了編寫的datagrid數據表格helper文件和CI中的url helper類，并且通過

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

初始化了數據助手類的構造方法，指定了表名是users,數據列為id。接著，通過

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

設置了要顯示的表頭中，將email顯示為E-MAIL。并通過

$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文件，代碼如下：

<html> 
<head> 
   <title>Users Management</title> 
   <script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script> 
   <script src="<?php echo base_url(); ?>js/datagrid.js"></script> 
</head> 
<body> 
<?php 
      $this->Datagrid->hidePkCol(true);  
      if($error = $this->session->flashdata('form_error')){  
         echo "<font color=red>$error</font>";  
      }  
      echo form_open('test/proc',array('class'=>'dg_form'));  
      echo $this->Datagrid->generate();  
      echo Datagrid::createButton('delete','Delete');  
      echo form_close();  
?> 
</body> 
</html>

由于我們這里是采用ajax的方式去判斷用戶選擇表中的哪些記錄并且響應刪除按鈕的事件，所以只保留上面的php代碼，而同時，在js目錄下新建立一個js/datagrid.js文件，還要修改上文中的index 方法如下：

function index(){  
　　$this->load->helper('form');  
　　$this->load->library('session');  
　　$this->load->view('users');  
　}

也可以修改相關的CSS樣式，例如：

.dg_form table{  
　　border:1px solid silver;  
　　}  
　　.dg_form th{  
　　background-color:gray;  
　　font-family:"Courier New", Courier, mono;  
　　font-size:12px;  
　　}  
　　.dg_form td{  
　　background-color:gainsboro;  
　　font-size:12px;  
　　}  
　　.dg_form input[type=submit]{  
　　margin-top:2px;  
　}

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

$(function() {  
　　$('.dg_form :submit').click(function(e){  
　　e.preventDefault();  
　　var $form = $(this).parents('form');  
　　var action_name = $(this).attr('class').replace("dg_action_","");  
　　var action_control = $('');  
　　$form.append(action_control);  
　　var post_data = $form.serialize();  
　　action_control.remove();  
　　var script = $form.attr('action')+'/ajax';  
　　$.post(script, post_data, function(resp){  
　　if(resp.error){  
　　alert(resp.error);  
　　} else {  
　　switch(action_name){  
　　case 'delete' :  
　　//將已刪除的數據在數據表格中移走  
　　$form.find('.dg_check_item:checked').parents('tr').remove();  
　　break;  
　　case 'anotherAction' :  
　　..  
　　break;  
　　}  
　　}  
　　}, 'json')  
　　})  
　　})

在上面的代碼中，首先通過 var $form = $(this).parents('form');獲得了表單的名，然后通過

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

獲得action的名稱，而

var action_control = $('');  
　　$form.append(action_control);

則是動態生成隱藏域action_control，通過$form.append(action_control)添加到表單中去。

接下來，我們將客戶端的數據通過 $.post(script, post_data, function(resp)發送到服務端，其中script變量定義了ajax發送的路徑，

Post_data則為通過$form.serialize()序列化后的表單數據。然后，在其回調函數的返回值中，判斷resp是否包含了錯誤信息，如果包含了錯誤信息則通過alert顯示，然后再在數據表格中，使用

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

一句代碼，將服務端已刪除的數據行在數據表格中移走。

最后，我們再添加如下代碼

$('.dg_check_toggler').click(function(){  
　　var checkboxes = $(this).parents('table').find('.dg_check_item');  
　　if($(this).is(':checked')){  
　　checkboxes.attr('checked','true');  
　　} else {  
　　checkboxes.removeAttr('checked');  
　　}  
　　})

這段代碼的意思是，當用戶選擇了表格中的“全選”按鈕時，將會尋找表格中所有每一行記錄前的checkbox(存放到變量checkboxes中)，然后如果用戶在全選的checkbox框中勾選了的話，則通過jQuery設置所有記錄前的checkbox的attr屬性為true,即實現了全選的功能，反之則為取消全選。

小結

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

【編輯推薦】

使用jQuery設計數據表格之設計表格基類
從零開始學習jQuery之萬能的選擇器
7月20款最新且極具創意的jQuery插件（附下載）
從零開始學習jQuery之Ajax快餐
一些應該熟記于心的jQuery函數和技巧

責任編輯：陳貽新來源： it168

jQuery