玩转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', '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 " );

}

}

}

?
>









本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/735583,如需转载请自行联系原作者
目录
相关文章
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
21 1
|
2月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
44 1
|
3月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
31 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
2月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
12 0
|
3月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
3月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
33 1
Python爬虫之Ajax数据爬取基本原理#6
|
4月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
16 0
|
4月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
43 0
|
5月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
JavaScript 前端开发 Web App开发