在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')
})
})
$('.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);
$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');
}
})
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的技巧和知识。
