## **表格概述**
* 表格页面在后台管理开发中，使用频率最高，主要用于数据的展示和管理。
* 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>
```
