ajax控制table,玩转jQuery设计数据表格：实现AJAX功能

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

测试运行

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

CREATE DATABASE `dg_test`;

CREATE TABLE `users` (

`id`int(11)NOTNULLAUTO_INCREMENT,

`username` varchar(80)NOTNULL,

`password` varchar(32)NOTNULL,

`email` varchar(255)NOTNULL,

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=newDatagrid('users','id');}functionindex(){

$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();

}functionproc($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=newDatagrid('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文件，代码如下：

Users Management<?php

$this->Datagrid->hidePkCol(true);if($error=$this->session->flashdata('form_error')){echo"$error";

}

echo form_open('test/proc',array('class'=>'dg_form'));echo $this->Datagrid->generate();

echo Datagrid::createButton('delete','Delete');echo form_close();

?>

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

functionindex(){

$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的技巧和知识。