## 數據表格顯示優化[GridView](https://github.com/Astonep/tp-admin/blob/master/public/static/admin/js/gridview.js)
[GridView.js](https://github.com/Astonep/tp-admin/blob/master/public/static/admin/js/gridview.js)位于:/public/static/admin/js/gridvew.js
基于:[bootstrap-table](http://bootstrap-table.wenzhixin.net.cn/),英文吃力小伙伴可查閱[中文官方手冊](http://bootstrap-table.wenzhixin.net.cn/zh-cn/)
保留了bootstrap-table的屬性和方法,為了便于組件化開發,我將后臺的模態框添加、編輯數據、數據刪除等進行封裝。對于添加、編輯只需要一個模板頁面文件即可。
### 表格參數
這里列舉部分常用,更多參照其[官方文檔](http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/)
| 標簽 | 類型 | 默認 | 描述 |
| --- | --- |
| data-toggle | string | 'gridview' | 加載gridview.js腳本然后開始渲染數據 |
| data-url | String | undefined | 服務器加載數據的地址 |
|data-unique-id |String |'id' | 指定數據的唯一ID,區別data-index |
| data-toolbar | string | undefined | 指明自定義的toolbar |
| data-page-size | Number | 10 | 分頁數據顯示條數 |
| data-page-list | Array | [10, 25, 50, 100, All] | 設置可供選擇的頁面數據條數。設置為All 則顯示所有記錄 |
| data-pagination | Boolean | false | 設置為 true 會在表格底部顯示分頁條 |
| data-side-pagination | String | 'client' | 設置在哪里進行分頁,可選值為 'client' 或者 'server'。設置 'server'時,需要返回total字段 |
| data-search | Boolean | false | 是否啟用搜索框 |
| data-search-on-enter-key | Boolean | false | 設置為 true時,按回車觸發搜索方法,否則自動觸發搜索方法 |
| data-strict-search | Boolean | false | 設置為 true啟用 全匹配搜索,否則為模糊搜索 |
| data-search-text | String | '' | 初始化搜索文字 |
| data-search-time-out | Number | 500 | 設設置搜索超時時間 |
| data-strict-search | Boolean | false | 設置為 true啟用 全匹配搜索,否則為模糊搜索 |
|data-show-columns|Blooean | false | 是否顯示 內容列下拉框 |
```
在外部可以通過jQuery插件方式調用一些方法,例如:
$(selector).gridview(functionName,arg1,arg2)
```