使用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
【編輯推薦】
