現在在做的一款辦公系統，大約用到十來個表格，最開始的需求是滿足顯示功能就ok，這很簡單，根本不用做變動；

       然而，我們都懂得使用者的需求是不會停止的，so又來了一個給使用者提供表格編輯的許可權，包括增刪改、編輯下拉列表，我覺得再彈出一個框框或者跳出一個頁面讓使用者修改這樣的設計挺不人性的（除非有必要），所以不到萬不得已不會用這個糊弄使用者；

       接著，我把表格差不多重新修改一邊以後，新需求coming，把表格的表頭做成動態的……在把十幾個表格重新翻新了一遍的基礎上，對於這樣的要求，多多少少有了點排斥情緒，因為就剩十幾天結項，這樣總反工效率挺低的。最後還是忍不住嘗試的慾望，開始著手這個功能，沒思考幾分鐘，就發現這個功能似曾相識，一翻看以前的部落格，原來去年的我已經幫忙實現了，只是當時用的EasyUi

一、 顯示資料（基礎功能）

       在html頁面中定義表格以及表格的列名，最後把從資料庫中查詢出來的資料，迴圈顯示到頁面中。這個系統用的是PHP語言，裡邊用到了php中的語法，如果是Java語言，把php換成jsp中對應的語法就行

1. <div class="containe">  
2.     <table class="table table-striped table-bordered table-hover">  
3.         <thead>  
4.             <tr class
   ="success">  
5.                 <th>序號</th>  
6.                 <th style="display: none">ActionID</th>  
7.                 <th>Category</th>  
8.                 <th>SubProcess Name</th>  
9.                 <th>Description</th>  
10.                 <th>Do Action</th>  
11.             </tr>  
12.         </thead>  
13.         <tbody>  
14.             <?php  
15.                 //遍歷傳遞過來的變數$subprocess_info
16.                 $i=1;  
17.                 foreach($subprocess_infoas$_v){  
18.             ?>  
19.             <tr id="">  
20.                 <td><?php echo$i; ?></td>  
21.                 <td style="display: none"><?php echo$_v->ActionID; ?></td>  
22.                 <td><?php echo$_v->Category; ?></td>  
23.                 <td><a href="#"><?php echo$_v->ActionName; ?></a></td>  
24.                 <td><?php echo$_v -> Description; ?></td>  
25.                 <td>  
26.                     <a href="./index.php?r=subprocess/update&id=<?php echo $_v->ActionID; ?>">修改</a>  
27.                     <a href="./index.php?r=subprocess/del&id=<?php echo $_v->ActionID; ?>">刪除</a>  
28.                 </td>  
29.             </tr>  
30.             <?php $i++; }?>  
31.         </tbody>  
32.     </table>  
33. </div>  

二、表格編輯（高階功能）

1. 效果展示

       表格初始化後

       新增新行

2. 在使用時，首先需要引入它的js，我是統一引用到入口檔案中的

1. <!--表格編輯-->  
2. <link href="./assets/tableEdit/css/bootstrap-table.min.css" rel="stylesheet" />  
3. <script src="./assets/tableEdit/js/bootstrap-table.js"></script>  
4. <script src="./assets/tableEdit/js/bootstrap-table-edit.js"></script>  
5. <script src="./assets/tableEdit/js/bootstrap-select.js"></script>  
6. <script src="./assets/tableEdit/js/bootstrap-datetimepicker.min.js"></script>  
7. <link href="./assets/tableEdit/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />  

1. <script src="./js/subprocess/subprocess.js"></script>  
2. <div class="col-md-12">  
3.     <div style="float:right;margin:10px 0px 10px 5px">  
4.         <a title="Add" href="./index.php?r=subprocess/add">  
5.             <button type="button"class="btn btn-default" id="addData"<span style="color:#008000;background-color:#efefef;font-weight:bold;"></span>>  
6.                 <span class="glyphicon glyphicon-plus"></span>  
7.             </button>  
8.         </a>  
9.     </div>  
10.     <table class="table table-striped table-bordered table-hover" id="subprocessTable"></table>  
11. </div>  

1. $(function(){  
2.     //初始化表格
3.     $('#subprocessTable').bootstrapTable({  
4.         method: 'get',  
5.         url:"./index.php?r=subprocess/subprocessInfo",  
6.         editable:true,//開啟編輯模式
7.         clickToSelect: true,  
8.         cache: false,  
9.         showToggle:true, //顯示切換按鈕來切換表/卡片檢視。
10.         showPaginationSwitch:true, //顯示分頁切換按鈕
11.         pagination: true,  
12.         pageList: [10,25,50,100],  
13.         pageSize:10,  
14.         pageNumber:1,  
15.         uniqueId: 'index', //將index列設為唯一索引
16.         striped: true,  
17.         search: true,  
18.         showRefresh: true,  
19.         minimumCountColumns: 2,  
20.         smartDisplay:true,  
21.         columns: [  
22.             [  
23.                 {field:"index",title:"ID",align:"center",edit:false,formatter:function(value, row, index){  
24.                     return row.index=index ; //返回行號
25.                 }},  
26.                 {field:"actionName",title:"ActionName",align:"center",order:"asc",sortable:"true",formatter:function(value,row,index){  
27.                     var strHtml ='<a href="./index.php?r=subprocess/modify&id='+ row.actionId +'">'+ row.actionName +'</a>';  
28.                     return strHtml;  
29.                 }},  
30.                 {field:"category",title:"Category",align:"center",sortable:"true"},  
31.                 {field:"description",title:"Description",align:"center"},  
32.                 {field:"action",title:"Action",align:"center",formatter:function(value,row,index){  
33.                     var strHtml ='<a href="./index.php?r=subprocess/modify&id='+ row.actionId +'"><li class="glyphicon glyphicon-pencil"></li></a>'+  
34.                         '<a href="javascript:void(0);" onclick="removeData('+ index +')" style="margin-left:5px;"><li class="glyphicon glyphicon-remove"></li></a>';  
35.                     return strHtml;  
36.                 },edit:false},  
37.                 {field:"actionId",title:"ActionID",align:"center",edit:false,visible:false,searchable:false}  
38.             ]  
39.         ]  
40.     });  
41.     /** 
42.      * add a new row 
43.      */
44.     $('#addData').click(function(){  
45.         $('#subprocessTable').bootstrapTable('selectPage', 1); //Jump to the first page
46.         var data = {actionId: '', actionName: '',category:'', description: ''}; //define a new row data，certainly it's empty
47.         $('#subprocessTable').bootstrapTable('prepend', data); //the method of prepend must defined all fields，but append needn't
48.         //$('#dataTable').bootstrapTable('append',data);
49.         $("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");  
50.         $("#dataTable input")[0].focus();  
51.     });  
52. });  

1. {field:"toRun",title:"Run Flag",align:"center",edit:{  
2.     type:'select',//下拉框
3.     url:'./index.php?r=dictionary/dictionaryInfo&type='+"run",  
4.     //data:[{id:1,text:'hello'},{id:2,text:'hi'}],
5.     valueField:'id',  
6.     textField:'text',  
7.     editable : false,  
8.     onSelect:function(val,rec){  
9.         //console.log(val,rec);
10.     }  
11. },sortable:true}  

       效果如下

       其它的操作，大家可以到這個外掛的網站上查閱文件，或者看js原始碼

三、動態表頭

       動態表頭，說到底就是每次的列資料是不固定的，根據前提條件查詢資料庫，再根據查詢結果載入表頭。有了上邊的修改，實現這個功能已經不在話下，只要把初始化表格的columns替換成我們自定義的資料就可以了，做了個簡單的小demo，具體的可以看【EasyUi DataGrid】動態載入列這篇文章

1. $(function(){  
2.     var columnsAll = new Array(); //定義一個新的列集合，用來儲存返回的資料
3.     //把列資料封裝到一個物件中
4.     var col = {};  
5.     col["field"] = "index";  
6.     col["title"] = "ID";  
7.     col["align"] = 'center';  
8.     col["formatter"] = function(value, row, index){  
9.         return row.index=index ; //返回行號
10.     };  
11.     col["edit"] = false;  
12.     columnsAll.push(col);  //把這個物件新增到列集合中
13.     var col2 = {};  
14.     col2["field"] = "scenarioId";  
15.     col2["title"] = "haha";  
16.     col2["align"] = 'center';  
17.     col2["edit"] = false;  
18.     columnsAll.push(col2); //把這個物件新增到列集合中
19.     //表格資料
20.     $('#detailTable').bootstrapTable({  
21.         method: 'get',  
22.         url:"./index.php?r=session/sessionInfo",  
23.         editable:true,//開啟編輯模式
24.         clickToSelect: true,  
25.         cache: false,  
26.         uniqueId: 'index', //將index列設為唯一索引
27.         striped: true,  
28.         minimumCountColumns: 2,  
29.         smartDisplay:true,  
30.         columns: [  
31.             columnsAll  
32.         ]  
33.     });  
34. });  

       效果如下：