PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

tab 数量不固定 动态加载 动态读取数据

管理员 2024-12-14
Fastadmin
6

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修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部