使用jQuery設(shè)計(jì)數(shù)據(jù)表格之設(shè)計(jì)表格基類
當(dāng)前在Web開發(fā)中，jQuery和PHP無疑是***的配合。其中PHP由于其簡單易用，深得開發(fā)者的喜愛，而jQuery則由于在前端開發(fā)中的靈活和簡單，功能強(qiáng)大，可以做出很多很眩目的效果。在本文中，將選取PHP中的著名的開發(fā)框架Codeigniter(下簡稱CI)配合jQuery去設(shè)計(jì)一個(gè)日常常見的datagrid數(shù)據(jù)表格。其中充分利用了jQuery及CI框架的特性，打造一個(gè)無刷新的數(shù)據(jù)表格。本文的閱讀對象為已經(jīng)具備一定jQuery基礎(chǔ)知識及CI框架基礎(chǔ)知識的用戶。
步驟1 設(shè)計(jì)生成表格的基類
我們希望設(shè)計(jì)一個(gè)生成表格的基類，它可以針對任意數(shù)據(jù)庫中的任意表，都能自動生成對應(yīng)的數(shù)據(jù)表格，比如我們只需要傳入數(shù)據(jù)庫中的表名或者表的索引字段即可生成表格。本文中的大部分時(shí)間都會圍繞這個(gè)基類展開代碼編寫，下面是代碼的片斷定義：
- 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。這里，我們把這個(gè)基類定義為CI中的helper幫助類，因?yàn)槎x為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ù)中，接收了兩個(gè)參數(shù)，分別是數(shù)據(jù)庫表的名稱和主鍵(默認(rèn)這里為$id)。然后初始化實(shí)例化了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ù)庫的字段生成一個(gè)HTML的簡單表格。
而為了自定義列的標(biāo)題，也有一個(gè)方法如下：
- public function setHeadings(array $headings){
- $this->headings = array_merge($this->headings, $headings);
- }
比如，我們可以將原來表格的列重新自定義要顯示的名稱，比如把regdate字段改為“Registration Date”。而具體的代碼在下文中還會講解。
在數(shù)據(jù)的呈現(xiàn)過程中，有的時(shí)候不是所有的列都需要顯示，要根據(jù)實(shí)際情況進(jìn)行隱藏或顯示，這個(gè)時(shí)候可以編寫相關(guān)的方法實(shí)現(xiàn)，代碼如下：
- public function ignoreFields(array $fields){
- foreach($fields as $f){
- if($f!=$this->pk_col)
- $this->hide_cols[] = $f;
- }
- }
其中，$fields是需要被隱藏的列的名稱數(shù)組。代碼中還對主鍵進(jìn)行了判斷，因?yàn)橹麈I是必須從數(shù)據(jù)庫中獲取的。而假如不希望主鍵顯示在用戶界面上的話，可以通過以下方法設(shè)置：
- public function hidePkCol($bool){
- $this->hide_pk_col = (bool)$bool;
- }
這里傳入的$bool是一個(gè)布爾值，代表是否需要在界面中顯示主鍵。
接下來，再看一個(gè)方法，代碼如下：
- 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);
- }
- }
這里是一個(gè)helper的幫助類方法，注意CI中的helper類，命名是private的，以下劃線+方法名的方法命名。這個(gè)方法是在下文中的generate()中用到的，其中主要的功能是，循環(huán)查找$this->tbl_fields中的每個(gè)字段，是否屬于隱藏顯示的字段，如果不屬于隱藏字段，則通過$this->CI->db->select($field);將相關(guān)字段取出。另外要注意的是
- array_unshift($headings,"");
這句代碼中，實(shí)際的作用是，在數(shù)據(jù)表格的***列中，加一項(xiàng)代表“全選/反選”功能的checkbox,這個(gè)功能可以用在對數(shù)據(jù)進(jìn)行選擇或刪除的時(shí)候。
接下來，是生成數(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);
- }
在這個(gè)方法中，首先是調(diào)用了上文中的 $this->_selectFields();
方法，以決定顯示數(shù)據(jù)庫指定表中的哪些字段。然后使用CI中的獲得數(shù)據(jù)表記錄的方法獲得數(shù)據(jù)集($rows)。然后在循環(huán)中，為每一條記錄前都生成一個(gè)checkbox(array_unshift一句)。***，判斷是否需要屏蔽顯示主鍵，如果是的話，則屏蔽顯示(unset一句)。
接下來，為數(shù)據(jù)表格增加表單提交按鈕。為了通用起見，我們期望可以根據(jù)用戶的要求，指定生成什么類型的按鈕。比如，在這個(gè)例子中，期望生成一個(gè)刪除的按鈕，所以我們編寫如下的一個(gè)生成按鈕的方法：
- public static function createButton($action_name, $label){
- return "";
- }
在這個(gè)靜態(tài)方法中，$action_name為要生成的方法名，比如我們要生成的是Delete方法，則傳入的$action_name參數(shù)為delete,而label則為按鈕的標(biāo)簽名。
而如果得知這個(gè)按鈕被用戶點(diǎn)擊并提交呢?則可以用如下方法判斷
- 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();
- }
返回的是一個(gè)表示了用戶選擇多少個(gè)記錄的數(shù)組。本例子中涉及的是刪除按鈕的功能，所以編寫一個(gè)方法，用于將用戶選擇的數(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();
- }
比如用戶在表格中選擇了若干條記錄，點(diǎn)delete按鈕提交，則deletePostSelection方法會等價(jià)于執(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();
- }
- }
我們把這個(gè)類保存為datagrid_helper.php，保存在application/helper目錄下。
原文：http://tech.it168.com/a2011/1024/1262/000001262979_all.shtml
【編輯推薦】
