使用jQuery设计数据表格之实现Ajax功能
当前在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', '[email protected]'), (2, 'maria', '464y3y', '[email protected]'), (3, 'alejandro', 'a42352fawet', '[email protected]'), (4, 'emma', 'f22a3455b2', '[email protected]'
接下来，编写控制层的测试文件，命名为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,即实现了全选的功能，反之则为取消全选。
小结
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo