控制器源码（apps/example/controller/Table.php）
复制
<?php
namespace app\example\controller;
use app\common\controller\Front;
class Table extends Front
{
private $msg = '操作成功，仅作演示，不修改数据。';
public function _initialize()
{
$this->request->filter('strip_tags,htmlspecialchars');
parent::_initialize();
}
public function index()
{
$this->assign('fields',$this->fields());
$this->assign('table',$this->createTable());
return $this->fetch();
}
public function json()
{
$args = array();
$args['cache'] = false;
$args['result'] = 'level';
$args['controll'] = 'menus';
$args['search'] = $this->query['searchText'];
$args['limit'] = 0;
$args['page'] = 0;
$args['sort'] = 'term_order';
$args['order'] = 'desc';
$list = model('common/Menu','loglic')->select(DcArrayEmpty($args));
return json(DcEmpty($list,[]));
}
//新增
public function create()
{
return $this->success($this->msg);
}
//删除
public function delete()
{
return $this->success($this->msg);
}
//修改
public function edit()
{
return $this->success($this->msg);
}
//排序
public function sort()
{
return $this->success($this->msg);
}
//预览
public function preview()
{
return $this->success($this->msg);
}
//生成表格
private function createTable()
{
//定义表格字段列表
$items = DcTableColumns($this->fields($this->query));
//重置表格事件与回调
$items['operate']['data-events'] = 'events';
$items['operate']['data-formatter'] = 'operate';
//生成表格
return DcBuildTable([
'data-name' => 'example/table/index',
'data-escape' => false,
'data-toggle' => 'bootstrap-table',
'data-unique-id' => 'term_id',
'data-id-field' => 'term_id',
'data-select-item-name' => 'id[]',
//请求
'data-url' => DcUrl('example/table/json',$this->query),
'data-url-sort' => DcUrl('example/table/sort', ['id'=>'']),
'data-url-edit' => DcUrl('example/table/edit', ['id'=>'']),
'data-url-delete' => DcUrl('example/table/delete', ['id'=>'']),
'data-url-preview' => DcUrl('example/table/preview', ['id'=>'']),
'data-query-params' => 'daicuo.table.query',
'data-query-params-type' => 'params',
//工具栏
'data-toolbar' => '.toolbar',
'data-toolbar-align' => 'none float-md-left',
//搜索栏
'data-search' => true,
'data-search-align' => 'none float-md-right',
'data-search-text' => $this->query['searchText'],
//按钮栏
//'data-buttons' => 'function',
'data-buttons-align' => 'right',
'data-buttons-prefix' => 'btn',
'data-buttons-class' => 'purple',
'data-show-search-button' => true,
'data-show-refresh' => true,
'data-show-toggle' => true,
'data-show-fullscreen' => true,
'data-show-columns' => true,
//分页
'data-pagination' => false,
'data-page-number' => $this->site['page'],
'data-page-size' => 10,
'data-page-list' => '[10, 25, 50, 100]',
'data-side-pagination' => 'server',
'data-total-field' => 'total',
'data-data-field' => 'data',
//排序
'data-sortable' => true,
'data-sort-name' => $this->query['sortName'],
'data-sort-order' => $this->query['order'],
'data-sort-class' => 'table-active',
'data-sort-stable' => false,
//单元格属性列表
'columns' => $items,
]);
}
//定义表格字段
private function fields($data=[])
{
return DcFields([
'term_id' => [
'order' => 1,
'data-type' => 'hidden',
'data-value' => $data['term_id'],
'data-filter' => false,
'data-visible' => true,
'data-sortable' => true,
'data-width' => '80',
'data-width-unit' => 'px',
],
'term_name' => [
'order' => 2,
'data-filter' => false,
'data-visible' => true,
'data-align' => 'left',
],
'term_status' => [
'order' => 4,
'data-type' => 'select',
'data-value' => DcEmpty($data['term_status'],'normal'),
'data-option' => model('common/Attr','loglic')->statusOption(),
'data-filter' => true,
'data-visible' => false,
],
'term_status_text' => [
'order' => 5,
'data-title' => lang('term_status'),
'data-visible' => true,
'data-width' => 100,
],
'term_type' => [
'order' => 6,
'type' => 'select',
'data-option' => model('common/Attr','loglic')->target(),
'data-value' => DcEmpty($data['term_type'],'_self'),
'data-filter' => true,
'data-visible' => true,
'data-width' => 100,
],
'term_parent' => [
'order' => 7,
'data-type' => 'select',
'data-value' => $data['term_parent'],
'data-option' => DcTermOption(['controll'=>'menus']),
'data-filter' => true,
'data-visible' => true,
'data-width' => 100,
],
'term_order' => [
'order' => 8,
'data-type' => 'number',
'data-value' => intval($data['term_order']),
'data-filter' => false,
'data-visible' => true,
'data-width' => 80,
'data-sortable' => true,
'data-sort-name' => 'op_order',
'data-order' => 'asc',
//'data-formatter' => 'daicuo.admin.table.sortFormatter',
],
'term_action' => [
'order' => 9,
'data-type' => 'select',
'data-option' => ['left'=>lang('left'),'top'=>lang('top')],
'data-value' => DcEmpty($data['term_action'],'left'),
'data-filter' => true,
'data-visible' => true,
'data-width' => 100,
],
'term_controll' => [
'order' => 10,
'data-type' => 'text',
'data-value' => 'menus',
'data-filter' => true,
'data-visible' => true,
'data-width' => 100,
],
'term_module' => [
'order' => 11,
'data-type' => 'text',
'data-value' => 'example',
'data-filter' => true,
'data-visible' => true,
'data-width' => 100,
],
]);
}
}
模板源码（apps/example/theme/default/table/index.tpl）
复制
{extend name="apps/common/view/front.tpl" /}
<!--meta-->
{block name="header_meta"}
<title>DaiCuo表格生成实例－{:config('common.site_name')}</title>
<meta name="keywords" content="DaiCuo表格排序,DaiCuo表格加载" />
<meta name="description" content="呆错后台管理框架表格组件的生成、排序、数据加载演示与开发实例。" />
{/block}
<!--header-->
{block name="header"}
{include file="apps/common/view/widget/header.tpl" /}
{/block}
<!--main-->
{block name="main"}
<div class="container pt-2">
<form class="mb-3" action="{:DcUrl('example/sort/json')}" method="post" data-toggle="form">
<div class="form-row collapse" id="filter-row">
{:DcFormFilter(DcFormItems($fields))}
</div>
<input type="hidden" name="_method" value="delete">
<div class="toolbar d-flex justify-content-between d-md-block" id="toolbar">
<a class="btn btn-sm btn-danger" href="{:DcUrl('example/table/create')}" data-toggle="create" data-modal-xl="0">
<i class="fa fa-fw fa-plus"></i> {:lang('create')}
</a>
<a class="btn btn-sm btn-dark" href="#filter-row" data-toggle="collapse">
<i class="fa fa-fw fa-filter"></i> {:lang('filter')}
</a>
<a class="btn btn-sm btn-info" href="javascript:;" data-toggle="refresh" name="refresh">
<i class="fa fa-fw fa-refresh"></i> {:lang('refresh')}
</a>
</div>
{$table}
</form>
<div class="card mb-3">
<div class="card-header d-flex justify-content-between">
<font>控制器源码（apps/example/controller/Table.php）</font>
<a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#controller">复制</a>
</div>
<div class="card-body" id="controller">
{:exampleCode('apps/example/controller/Table.php')}
</div>
</div>
<div class="card mb-3">
<div class="card-header d-flex justify-content-between">
<font>模板源码（apps/example/theme/default/table/index.tpl）</font>
<a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#view">复制</a>
</div>
<div class="card-body" id="view">
{:exampleCode('apps/example/theme/default/table/index.tpl')}
</div>
</div>
</div>
{/block}
<!--javascript-->
{block name="js"}
<script>
//表格单元格格式化回调函数实例
var operate = function(value, row, index, field){
return '<i class="fa fa-fw fa-pencil mx-1" data-toggle="edit-test"></i><i class="fa fa-fw fa-trash-o mx-1 text-danger" data-toggle="delete-test"></i><i class="fa fa-fw fa-arrows-alt mx-1 text-purple dc-handle" data-toggle="sort"></i>';
};
//表格单元格事件监听实例
var events = {
'click [data-toggle="edit-test"]': function (event, value, row, index) {
alert(row.term_id);
},
'click [data-toggle="delete-test"]': function (event, value, row, index) {
alert(row.term_name);
},
};
//页面加载完毕后调用表格组件
$(function() {
//呆错JS库(表格)初始化实例
daicuo.table.init({
selector: 'table[data-toggle="bootstrap-table"]',
//表格插件加载成功后再动态加载呆错拖拽插件
onSuccess: function(element){
//监听刷新按钮
$('[data-toggle="refresh"]').on("click", document.body, function() {
daicuo.table.refresh(element);
});
//插拽排序插件
daicuo.sortable.tableInit({
selector : 'table[data-toggle="bootstrap-table"]'
});
},
//表格插件加载失败
onFail:function(){
daicuo.bootstrap.dialog('表格插件加载失败');
}
});
//bootstrap-table插件原生事件监听实例
$('table[data-toggle="bootstrap-table"]').on('dbl-click-row.bs.table',function(row, element, field) {
daicuo.bootstrap.dialog('<p>row: 与单击的行对应的记录</p><p>element: tr元素，</p><p>field: 与单击的单元格对应的字段名称。</p>','表格行双击事件监听实例');
});
});
</script>
{/block}
<!--footer-->
{block name="footer"}
{include file="apps/common/view/widget/footer.tpl" /}
{/block}