## **表格概述**
* 表格頁面在后臺管理開發中，使用頻率最高，主要用于數據的展示和管理。
* DaiCuo內置的表格組件采用的是Bootstrap Table插件，它既輕量級又功能豐富。
* DaiCuo框架根據Bootstrap Table插件的數據屬性模式，已封裝好助手函數 DcBuildTable 用于快速生成表格。
> 其原理是先通過模板引擎解析生成Bootstrap Table的數據屬性Html代碼，然后引入Bootstrap Table插件，表格插件初始化后將通過AJAX的方式與后端數據URL通信，最終以表格的形式將數據展現在頁面上。
## **Bootstrap Table**
* Bootstrap Table旨在減少開發時間，并且不需要開發人員的特定知識。
* Bootstrap Table插件可通過數據屬性或JavaScript以表格格式顯示數據。
* 更多資料閱讀可移步 [Bootstrap Table 官網](https://bootstrap-table.com/)
## **如何使用**
* 在DaiCuo框架中只需要繼承后臺模板，就可以直接使用DcBuildTable助手函數快速生成一個表格數據。
* 如果繼承后臺模板，則需要先引入DaiCuoJs庫(public/js/base.js)，并通過JS的方法window.daicuo.table.init()動態加載Bootstrap Table插件。
#### 繼承后臺模板生成表格的實例
```
{extend name="apps/common/view/admin.tpl" /}
{block name="main"}
{:DcBuildTable([
'data-escape' => 'false',
'data-toggle' => 'bootstrap-table',
'data-url' => DcUrl('admin/store/index', '', ''),
'data-buttons-prefix' => 'btn',
'data-buttons-class' => 'purple',
'data-buttons-align' => 'none float-md-right',
'data-icon-size' => 'sm',
'data-toolbar' => '.toolbar',
'data-toolbar-align' => 'none float-md-left',
'data-search-align' => 'none float-md-right',
'data-search' => 'false',
'data-show-search-button' => 'true',
'data-show-refresh' => 'true',
'data-show-toggle' => 'true',
'data-show-fullscreen' => 'true',
'data-smart-display' => 'true',
'data-unique-id' => 'id',
'data-id-field' => 'id',
'data-select-item-name' => 'id[]',
'data-query-params-type' => 'params',
'data-query-params' => 'queryParams',
'data-sort-name' => 'id',
'data-sort-order' => 'desc',
'data-sort-class' => 'table-active',
'data-sort-stable' => 'false',
//'data-side-pagination' => 'server',
//'data-total-field' => 'total',
//'data-data-field' => 'data',
'data-page-number' => $page,
'data-page-size' => '30',
'data-page-list' => [],
'data-pagination' => 'true',
//'data-pagination-h-align' => 'left',
//'data-pagination-detail-h-align' => 'right',
//'data-pagination-v-align' => 'top',
//'data-show-extended-pagination' => 'true',
'columns'=>[
[
'data-field'=>'id',
'data-title'=>'id',
'data-width'=>'3',
'data-width-unit'=>'%',
'data-sortable'=>'true',
'data-sort-name'=>'id',
'data-sort-order'=>'asc',
'data-class'=>'',
'data-align'=>'center',
'data-valign'=>'middle',
'data-halign'=>'center',
'data-falign'=>'center',
'data-visible'=>'true',
//'data-formatter'=>'',
//'data-footer-formatter'=>'',
],
[
'data-field'=>'name',
'data-title'=>lang('name'),
//'data-width'=>'15',
//'data-width-unit'=>'%',
'data-align'=>'left',
'data-halign'=>'center',
]
]
])}
{/block}
```
#### 自定義模板生成表格數據的實例
```
{:DcBuildTable('參數同上')}
<script src="/public/js/base.js"></script>
<script>window.daicuo.table.init();</script>
```
