日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用jQuery設(shè)計數(shù)據(jù)表格之實現(xiàn)Ajax功能

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

測試運行

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

 
 
 
 
    
  
  
  
  
  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.

并插入一些初始數(shù)據(jù)

 
 
 
 
    
  
  
  
  
  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.

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

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

初始化了數(shù)據(jù)助手類的構(gòu)造方法，指定了表名是users,數(shù)據(jù)列為id。接著，通過

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

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

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

設(shè)置了，在數(shù)據(jù)表格列中不顯示password一列。再接下來，則是調(diào)用generate()方法生成表格。而在proc()方法中，則負(fù)責(zé)處理用戶對選擇并刪除記錄的處理，而在if($request_type!='ajax'){ ……}的這段代碼中，則判斷是否屬于ajax調(diào)用，如果不屬于ajax調(diào)用，則正常返回出錯提示信息，否則則使用json_encode方法返回錯誤信息，這個技巧也是很常用的，之所以這樣做，其目的是為了能同時滿足ajax及非ajax的調(diào)用。

最后運行的效果如下圖：

整合jQuery加入AJAX功能

現(xiàn)在，我們可以為其加入AJAX功能了，這就要整合jQuery。由于本文不是初學(xué)者的教程，因此不會講解jQuery方面的知識，而是直接講解如何整合。首先新建一個文件夾，命名為js，然后里面放置jQuery的庫文件，并且新建立user.php文件，代碼如下：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3.    Users Management
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.    
    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的方式去判斷用戶選擇表中的哪些記錄并且響應(yīng)刪除按鈕的事件，所以只保留上面的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.

也可以修改相關(guān)的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中，增加如下的函數(shù)方法：

 
 
 
 
    
  
  
  
  
  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. 　　//將已刪除的數(shù)據(jù)在數(shù)據(jù)表格中移走 
    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.

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

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

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

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

一句代碼，將服務(wù)端已刪除的數(shù)據(jù)行在數(shù)據(jù)表格中移走。

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

 
 
 
 
    
  
  
  
  
  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.

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

小結(jié)

本文使用了php中的著名開發(fā)框架CI以及jQuery，指導(dǎo)讀者如何構(gòu)建了一個通用的數(shù)據(jù)表格幫助類，并且擁有ajax的功能(借助jQuery實現(xiàn))。讀者從中可以學(xué)到不少CI框架以及jQuery的技巧和知識。

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


網(wǎng)站名稱：使用jQuery設(shè)計數(shù)據(jù)表格之實現(xiàn)Ajax功能
標(biāo)題路徑：http://www.dlmjj.cn/article/ccsgpij.html