使用jQuery设计数据表格之设计表格基类

当前在Web开发中，jQuery和PHP无疑是***的配合。其中PHP由于其简单易用，深得开发者的喜爱，而jQuery则由于在前端开发中的灵活和简单，功能强大，可以做出很多很眩目的效果。在本文中，将选取PHP中的著名的开发框架Codeigniter(下简称CI)配合jQuery去设计一个日常常见的datagrid数据表格。其中充分利用了jQuery及CI框架的特性，打造一个无刷新的数据表格。本文的阅读对象为已经具备一定jQuery基础知识及CI框架基础知识的用户。

步骤1 设计生成表格的基类

我们希望设计一个生成表格的基类，它可以针对任意数据库中的任意表，都能自动生成对应的数据表格，比如我们只需要传入数据库中的表名或者表的索引字段即可生成表格。本文中的大部分时间都会围绕这个基类展开代码编写，下面是代码的片断定义：

class Datagrid{  
　　private $hide_pk_col = true;  
　　private $hide_cols = array();  
　　private $tbl_name = '';  
　　private $pk_col = '';  
　　private $headings = array();  
　　private $tbl_fields = array();  
}  
?> 

这里先行定义了一些属性变量，比如是否隐藏主键的列，表的名称$tbl_name，表头列$headings，表的字段数组$tbl_fields。这里，我们把这个基类定义为CI中的helper帮助类，因为定义为CI中的library的话，则不容易向其构造函数传递参数。

接下来，编写其构造函数为代码如：

public function __construct($tbl_name, $pk_col = 'id'){  
　　$this->CI =& get_instance();  
　　$this->CI->load->database();  
　　$this->tbl_fields = $this->CI->db->list_fields($tbl_name);  
　　if(!in_array($pk_col,$this->tbl_fields)){  
　　throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'");  
　　}  
　　$this->tbl_name = $tbl_name;  
　　$this->pk_col = $pk_col;  
　　$this->CI->load->library('table');  
　　}  

在上面的代码的构造函数中，接收了两个参数，分别是数据库表的名称和主键(默认这里为$id)。然后初始化实例化了CI对象，然后调用其加载数据库及加载表的帮助方法，得出的$this->tbl_fields则是其数据库的字段了。然后判断主键$pk_col是否在数据表中，如果不存在的话抛出异常，如果存在的话，使用成员变量tbl_name和pk_col分别保存数据的表名和主键，这样下次就不用再访问数据库了。***，使用$this->CI->load->library('table')的帮助表格类，将数据库的字段生成一个HTML的简单表格。

而为了自定义列的标题，也有一个方法如下：

public function setHeadings(array $headings){  
　　$this->headings = array_merge($this->headings, $headings);  
　　} 

比如，我们可以将原来表格的列重新自定义要显示的名称，比如把regdate字段改为“Registration Date”。而具体的代码在下文中还会讲解。

在数据的呈现过程中，有的时候不是所有的列都需要显示，要根据实际情况进行隐藏或显示，这个时候可以编写相关的方法实现，代码如下：

public function ignoreFields(array $fields){  
　　foreach($fields as $f){  
　　if($f!=$this->pk_col)  
　　$this->hide_cols[] = $f;  
　　}  
　　} 

其中，$fields是需要被隐藏的列的名称数组。代码中还对主键进行了判断，因为主键是必须从数据库中获取的。而假如不希望主键显示在用户界面上的话，可以通过以下方法设置：

public function hidePkCol($bool){  
　　$this->hide_pk_col = (bool)$bool;  
　　} 

这里传入的$bool是一个布尔值，代表是否需要在界面中显示主键。

接下来，再看一个方法，代码如下：

private function _selectFields(){  
　　foreach($this->tbl_fields as $field){  
　　if(!in_array($field,$this->hide_cols)){  
　　$this->CI->db->select($field);  
　　//判断是否隐藏了主键 if($field==$this->pk_col && $this->hide_pk_col) continue;  
　　$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field);  
　　}  
　　}  
　　if(!empty($headings)){  
　　array_unshift($headings,"");  
　　$this->CI->table->set_heading($headings);  
　　}  
　　} 

这里是一个helper的帮助类方法，注意CI中的helper类，命名是private的，以下划线+方法名的方法命名。这个方法是在下文中的generate()中用到的，其中主要的功能是，循环查找$this->tbl_fields中的每个字段，是否属于隐藏显示的字段，如果不属于隐藏字段，则通过$this->CI->db->select($field);将相关字段取出。另外要注意的是

　array_unshift($headings,""); 

这句代码中，实际的作用是，在数据表格的***列中，加一项代表“全选/反选”功能的checkbox,这个功能可以用在对数据进行选择或删除的时候。

接下来，是生成数据表格的generate()方法，代码如下：

public function generate(){  
　　$this->_selectFields();  
　　$rows = $this->CI->db  
　　->from($this->tbl_name)  
　　->get()  
　　->result_array();  
　　foreach($rows as &$row){  
　　$id = $row[$this->pk_col];  
　　array_unshift($row, "");  
　　if($this->hide_pk_col){  
　　unset($row[$this->pk_col]);  
　　}  
　　}  
　　return $this->CI->table->generate($rows);  
　　}  

在这个方法中，首先是调用了上文中的 $this->_selectFields();

方法，以决定显示数据库指定表中的哪些字段。然后使用CI中的获得数据表记录的方法获得数据集($rows)。然后在循环中，为每一条记录前都生成一个checkbox(array_unshift一句)。***，判断是否需要屏蔽显示主键，如果是的话，则屏蔽显示(unset一句)。

接下来，为数据表格增加表单提交按钮。为了通用起见，我们期望可以根据用户的要求，指定生成什么类型的按钮。比如，在这个例子中，期望生成一个删除的按钮，所以我们编写如下的一个生成按钮的方法：

public static function createButton($action_name, $label){  
　　return "";  
　　} 

在这个静态方法中，$action_name为要生成的方法名，比如我们要生成的是Delete方法，则传入的$action_name参数为delete,而label则为按钮的标签名。

而如果得知这个按钮被用户点击并提交呢?则可以用如下方法判断

public static function getPostAction(){  
　　if(isset($_POST['dg_action'])){  
　　return key($_POST['dg_action']);  
　　}  
　　}  

如果用户选择了数据表格中的多行并提交的话，可以使用如下方法去获得

public static function getPostItems(){  
　　if(!empty($_POST['dg_item'])){  
　　return $_POST['dg_item'];  
　　}  
　　return array();  
　　} 

返回的是一个表示了用户选择多少个记录的数组。本例子中涉及的是删除按钮的功能，所以编写一个方法，用于将用户选择的数据删除，代码如下：

public function deletePostSelection(){  
　　if(!empty($_POST['dg_item']))  
　　return $this->CI->db  
　　->from($this->tbl_name)  
　　->where_in($this->pk_col,$_POST['dg_item'])  
　　->delete();  
　　} 

比如用户在表格中选择了若干条记录，点delete按钮提交，则deletePostSelection方法会等价于执行如下的SQL语句：

DELETE FROM my_table WHERE id IN (1,5,7,3,etc...)。 

***，我们综合整理一下完整的数据表格生成类，如下代码：

class Datagrid{  
　　private $hide_pk_col = true;  
　　private $hide_cols = array();  
　　private $tbl_name = '';  
　　private $pk_col = '';  
　　private $headings = array();  
　　private $tbl_fields = array();  
　　function __construct($tbl_name, $pk_col = 'id'){  
　　$this->CI =& get_instance();  
　　$this->CI->load->database();  
　　$this->tbl_fields = $this->CI->db->list_fields($tbl_name);  
　　if(!in_array($pk_col,$this->tbl_fields)){  
　　throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'");  
　　}  
　　$this->tbl_name = $tbl_name;  
　　$this->pk_col = $pk_col;  
　　$this->CI->load->library('table');  
　　}  
　　public function setHeadings(array $headings){  
　　$this->headings = array_merge($this->headings, $headings);  
　　}  
　　public function hidePkCol($bool){  
　　$this->hide_pk_col = (bool)$bool;  
　　}  
　　public function ignoreFields(array $fields){  
　　foreach($fields as $f){  
　　if($f!=$this->pk_col)  
　　$this->hide_cols[] = $f;  
　　}  
　　}  
　　private function _selectFields(){  
　　foreach($this->tbl_fields as $field){  
　　if(!in_array($field,$this->hide_cols)){  
　　$this->CI->db->select($field);  
　　if($field==$this->pk_col && $this->hide_pk_col) continue;  
　　$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field);  
　　}  
　　}  
　　if(!empty($headings)){  
　　array_unshift($headings,"");  
　　$this->CI->table->set_heading($headings);  
　　}  
　　}  
　　public function generate(){  
　　$this->_selectFields();  
　　$rows = $this->CI->db  
　　->from($this->tbl_name)  
　　->get()  
　　->result_array();  
　　foreach($rows as &$row){  
　　$id = $row[$this->pk_col];  
　　array_unshift($row, "");  
　　if($this->hide_pk_col){  
　　unset($row[$this->pk_col]);  
　　}  
　　}  
　　return $this->CI->table->generate($rows);  
　　}  
　　public static function createButton($action_name, $label){  
　　return "";  
　　}  
　　public static function getPostAction(){  
　　if(isset($_POST['dg_action'])){  
　　return key($_POST['dg_action']);  
　　}  
　　}  
　　public static function getPostItems(){  
　　if(!empty($_POST['dg_item'])){  
　　return $_POST['dg_item'];  
　　}  
　　return array();  
　　}  
　　public function deletePostSelection(){  
　　if(!empty($_POST['dg_item']))  
　　return $this->CI->db  
　　->from($this->tbl_name)  
　　->where_in($this->pk_col,$_POST['dg_item'])  
　　->delete();  
　　}  
　　} 

我们把这个类保存为datagrid_helper.php，保存在application/helper目录下。

原文：http://tech.it168.com/a2011/1024/1262/000001262979_all.shtml

【编辑推荐】

1. 10月10款有趣强大的jQuery插件推荐
2. 当jQuery遭遇CoffeeScript——妙不可言
3. 10个新鲜的Ajax相关的jQuery插件
4. 20个教你得到酷炫效果的jQuery教程
5. jQuery插件开发实战场