jquery mysql表格_使用jQuery设计数据表格：设计表格基类

【IT168专稿】当前在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的话，则不容易向其构造函数传递参数。

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

publicfunction__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)){

thrownewException("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的简单表格。

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

publicfunctionsetHeadings(array$headings){

$this->headings=array_merge($this->headings, $headings);

}

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

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

publicfunctionignoreFields(array$fields){

foreach($fieldsas$f){if($f!=$this->pk_col)

$this->hide_cols[]=$f;

}

}

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

publicfunctionhidePkCol($bool){

$this->hide_pk_col=(bool)$bool;

}

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

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

privatefunction_selectFields(){

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

}

}