如何使用jQuery設計數(shù)據(jù)表格之設計表格基類

這篇文章將為大家詳細講解有關如何使用jQuery設計數(shù)據(jù)表格之設計表格基類，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

步驟1 設計生成表格的基類

我們希望設計一個生成表格的基類，它可以針對任意數(shù)據(jù)庫中的任意表，都能自動生成對應的數(shù)據(jù)表格，比如我們只需要傳入數(shù)據(jù)庫中的表名或者表的索引字段即可生成表格。本文中的大部分時間都會圍繞這個基類展開代碼編寫，下面是代碼的片斷定義：

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，表的字段數(shù)組$tbl_fields。這里，我們把這個基類定義為CI中的helper幫助類，因為定義為CI中的library的話，則不容易向其構(gòu)造函數(shù)傳遞參數(shù)。

接下來，編寫其構(gòu)造函數(shù)為代碼如：

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');  }

在上面的代碼的構(gòu)造函數(shù)中，接收了兩個參數(shù)，分別是數(shù)據(jù)庫表的名稱和主鍵(默認這里為$id)。然后初始化實例化了CI對象，然后調(diào)用其加載數(shù)據(jù)庫及加載表的幫助方法，得出的$this->tbl_fields則是其數(shù)據(jù)庫的字段了。然后判斷主鍵$pk_col是否在數(shù)據(jù)表中，如果不存在的話拋出異常，如果存在的話，使用成員變量tbl_name和pk_col分別保存數(shù)據(jù)的表名和主鍵，這樣下次就不用再訪問數(shù)據(jù)庫了。***，使用$this->CI->load->library('table')的幫助表格類，將數(shù)據(jù)庫的字段生成一個HTML的簡單表格。

而為了自定義列的標題，也有一個方法如下：

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

比如，我們可以將原來表格的列重新自定義要顯示的名稱，比如把regdate字段改為“Registration Date”。而具體的代碼在下文中還會講解。

在數(shù)據(jù)的呈現(xiàn)過程中，有的時候不是所有的列都需要顯示，要根據(jù)實際情況進行隱藏或顯示，這個時候可以編寫相關的方法實現(xiàn)，代碼如下：

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

其中，$fields是需要被隱藏的列的名稱數(shù)組。代碼中還對主鍵進行了判斷，因為主鍵是必須從數(shù)據(jù)庫中獲取的。而假如不希望主鍵顯示在用戶界面上的話，可以通過以下方法設置：

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()中用到的，其中主要的功能是，循環(huán)查找$this->tbl_fields中的每個字段，是否屬于隱藏顯示的字段，如果不屬于隱藏字段，則通過$this->CI->db->select($field);將相關字段取出。另外要注意的是

　array_unshift($headings,"");

這句代碼中，實際的作用是，在數(shù)據(jù)表格的***列中，加一項代表“全選/反選”功能的checkbox,這個功能可以用在對數(shù)據(jù)進行選擇或刪除的時候。

接下來，是生成數(shù)據(jù)表格的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);  }

在這個方法中，首先是調(diào)用了上文中的 $this->_selectFields();

方法，以決定顯示數(shù)據(jù)庫指定表中的哪些字段。然后使用CI中的獲得數(shù)據(jù)表記錄的方法獲得數(shù)據(jù)集($rows)。然后在循環(huán)中，為每一條記錄前都生成一個checkbox(array_unshift一句)。***，判斷是否需要屏蔽顯示主鍵，如果是的話，則屏蔽顯示(unset一句)。

接下來，為數(shù)據(jù)表格增加表單提交按鈕。為了通用起見，我們期望可以根據(jù)用戶的要求，指定生成什么類型的按鈕。比如，在這個例子中，期望生成一個刪除的按鈕，所以我們編寫如下的一個生成按鈕的方法：

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

在這個靜態(tài)方法中，$action_name為要生成的方法名，比如我們要生成的是Delete方法，則傳入的$action_name參數(shù)為delete,而label則為按鈕的標簽名。

而如果得知這個按鈕被用戶點擊并提交呢?則可以用如下方法判斷

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

如果用戶選擇了數(shù)據(jù)表格中的多行并提交的話，可以使用如下方法去獲得

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

返回的是一個表示了用戶選擇多少個記錄的數(shù)組。本例子中涉及的是刪除按鈕的功能，所以編寫一個方法，用于將用戶選擇的數(shù)據(jù)刪除，代碼如下：

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方法會等價于執(zhí)行如下的SQL語句：

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

***，我們綜合整理一下完整的數(shù)據(jù)表格生成類，如下代碼：

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目錄下。

關于“如何使用jQuery設計數(shù)據(jù)表格之設計表格基類”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。