controller 里 index 方法:
public function index() { if ($this->request->isAjax()) { // 接收 tab 参数 $category_id = $this->request->request('id'); list($where, $sort, $order, $offset, $limit) = $this->buildparams(); $total = $this->model ->where($where) ->where(function ($query) use ($category_id) { if ($category_id) { $query->where('category_id', $category_id); } }) ->count(); $list = $this->model ->where($where) ->where(function ($query) use ($category_id) { if ($category_id) { $query->where('category_id', $category_id); } }) ->order($sort, $order) ->limit($offset, $limit) ->select(); $result = array("total" => $total, "rows" => $list); return json($result); } // 这里根据自己的业务需求去找表读数据 $list = appcommonmodelCategory::all(); $this->assign('list', $list); return $this->view->fetch(); }
view html 里面:
<div class="panel panel-default panel-intro"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#panel_0" data-id="0" data-toggle="tab">全部</a></li> {volist name="list" id="value"} <li class=""><a href="#panel_{$value.id}" data-id="{$value.id}" data-toggle="tab">{$value.name}</a></li> {/volist} </ul> </div> <div class="panel-body"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="panel_0"> <div id="toolbar_0" class="toolbar"> {:build_toolbar('refresh')} </div> <table id="table_0" class="table table-striped table-bordered table-hover" width="100%"> </table> </div> {volist name="list" id="value"} <div class="tab-pane fade active" id="panel_{$value.id}"> <div id="toolbar_{$value.id}" class="toolbar"> {:build_toolbar('refresh')} </div> <table id="table_{$value.id}" class="table table-striped table-bordered table-hover" width="100%"> </table> </div> {/volist} </div> </div></div>
JS 里面:
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { // 初始化表格参数配置 Table.api.init(); //绑定事件 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var panel = $($(this).attr("href")); if (panel.size() > 0) { var table = $("#table_" + $(this).data("id")); table.bootstrapTable({ url: 'classes/index?id=' + $(this).data("id"), toolbar: '#toolbar_' + $(this).data("id"), sortName: 'id', search: false, commonSearch: true, searchFormVisible: true, columns: [ [ {field: 'sort', title: '排名', operate:false,}, {field: 'school_name', title: '学校', operate:false,}, {field: 'grade_name', title: '年级', operate:false,}, {field: 'class_name', title: '班级', operate:false,}, {field: 'headmaster_name', title: '班主任', operate:false,}, {field: 'score', title: '分数', operate:false,}, { field: 'created_at', title: __('Create time'), sortable: false, formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', visible:false }, {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate} ] ] }); Table.api.bindevent(table); $(this).on('click', function (e) { panel.find(".btn-refresh").trigger("click"); }); } //移除绑定的事件 $(this).unbind('shown.bs.tab'); }); //必须默认触发shown.bs.tab事件 $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab"); }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); }, } }; return Controller;});
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。