NOVOTS KMS 词汇表 Glossary    联系我们 Contact Us
查询 Search  
   
按类别浏览 Browse by Category
NOVOTS KMS .: 沟通技巧 .: 玩转jQuery设计数据表格:实现AJAX功能

玩转jQuery设计数据表格:实现AJAX功能

【IT168专稿】当前在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,即实现了全选的功能,反之则为取消全选。

  小结

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


这篇文章对你多有用?

用户评语

添加评语
当前还没有评语.


.: .: .: .: .:
[ 登陆 ]
北京护航科技有限公司 2006

Novots Technologies Limited