💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## **表格概述** * 表格页面在后台管理开发中,使用频率最高,主要用于数据的展示和管理。 * 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> ```