fastadmin 自定义新的表格页面

需要自定义一个新的表格页面,然后自定义筛选条件,搞了好几天,终于搞定了!!方法虽然笨拙了点,然后有效果!!!!


1、添加菜单规则,菜单就出现相应的页面按钮

2、添加controller,打开/application/admin/controller,新建同名php文件,注意大小写,代码可以参照其他的php文件,想要根据实际情况显示表格内容

<?php

namespace app\admin\controller;

use app\common\controller\Backend;
use think\Config;
use think\Db;

/**
 * 
 *
 * @icon fa fa-circle-o
 */
class Classification extends Backend
{
    
    /**
     * Classification
     * @var \app\admin\model\Question
     */
    protected $model = null;

    public function _initialize()
    {
        parent::_initialize();
        $this->model = new \app\admin\model\Question;

    }

    public function import()
    {
        parent::import();
    }

    /**
     * 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法
     * 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑
     * 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改
     */
    
    public function index()
    {
        //当前是否为关联查询
        $this->relationSearch = true;
        //设置过滤方法
        $this->request->filter(['strip_tags', 'trim']);
        $ids = $this->request->get('ids');
        $year = $this->request->get('year');
        $quarter = $this->request->get('quarter');
        $month = $this->request->get('month');
        
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage,则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }

            // 在这里写查询语句,赋值给$data

            $result = array("rows" => $data);
            return json($result);
        }
        return $this->view->fetch();
        
    }
}

3、添加model,打开/application/admin/model,新建同名php文件,注意大小写,代码可以参照其他的php文件

3、添加view,打开/application/admin/view,新建同名文件夹,新建index.html,注意大小写,添加显示表格代码

<div class="panel panel-default panel-intro">
    {:build_heading()}
    
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <table id="table" data-pagination="false"  class="table table-striped table-bordered table-hover table-nowrap"width="100%"></table>
                </div>
            </div>
        </div>
    </div>
</div>

4、添加js,打开/public/assets/js/backend,新建同名js文件,注意大小写,添加显示初始化表格代码

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                pageList: [ 'All' ],
                extend: {
                    index_url: 'classification/index' + location.search,
                    table: 'classification',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'sum',
                commonSearch: false,
                visible: false,
                showToggle: false,
                showColumns: false,
                search:false,
                showExport: false,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'no',
                            title: __('序号'),
                            sortable: true,
                            operate:false,
                            align: "center",
                            width: 40,
                            formatter: function (value, row, index) {
                                //获取每页显示的数量
                                var pageSize=table.bootstrapTable('getOptions').pageSize;
                                //获取当前是第几页
                                var pageNumber=table.bootstrapTable('getOptions').pageNumber;
                                //返回序号,注意index是从0开始的,所以要加上1
                                return pageSize * (pageNumber - 1) + index + 1;
                            }
                        },
                        {field: 'village', title: '村落', operate: false},
                        {field: 'question_sum', title: '提交问题总数', operate: false},   
                        {field: 'rectification_sum', title: '整改总数', operate: false},         
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

index_url指的是表格的view路径


以上就是自定义表格的全过程!

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值