thinkphp5 fastafmin 前端笔记

fastafmin笔记

菜单手动生成的一级菜单下的二级菜单如果不是菜单会无法显示

控制器

  public function _initialize()
    {
        parent::_initialize();
        $this->model = model('AppointmentActivity');
        //查询场馆列表
        $venue_model = model('Venue');
        $venue_list = $venue_model->select();
        $venue_list = Collection($venue_list)->toArray();
        $this->view->assign("venueList", $venue_list);
        $this->view->assign("isListList", $this->model->getIsListList());
    }

html

<div class="form-group">
        <label for="c-pid" class="control-label col-xs-12 col-sm-2">{:__('Venue_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select  id="c-pid" data-rule="required" class="form-control selectpicker" name="row[v_id]">
                {foreach name="venueList" item="vo"}
                <option value="{$vo.id}" {in name="key" value="0"}selected{/in}>{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>

编辑

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Gid')}:</label>
          <div class="col-xs-12 col-sm-8">
             <select  id="c-gid" data-rule="required" class="form-control selectpicker" name="row[gid]">
                 {foreach name="photo_group" item="vo"}
              <option value="{$vo.id}" {in name="key" value="$row.id"}selected{/in}>{$vo.group_name}</option>
                 {/foreach}
              </select>
          </div>
    </div>

lang
语言{:__('Venue_name')} ,在语言模板中找到添加即可

ajax请求后台数据 并将数据写入前端

api: {
            bindevent: function (data, ret) {
                $(document).on("change", "#c-type", function (e) {
                    var value = e.target.value;
                    $.ajax({
                        url: "appointmentorder/appointmentorder/re_appointment_list",
                        type: 'post',
                        dataType: 'json',
                        data: {value: value},
                        success: function (ret) {
                            console.log(ret);
                            var result = '';
                            for (var i=0; i< ret.length; i++) {
                                var item = ret[i];
                                result += "<option value="+ item.id +">" +  item.name + " " + item.start_time + 

"</option>";
                            };

                            $("#c-pid").empty().append(result);
                            $("#c-pid").selectpicker("refresh");

                        }, error: function (e) {
                            Backend.api.toastr.error(e.message);
                        }
                    });


                });
                Form.api.bindevent($("form[role=form]"));
            }
        }

前端下拉框显示

 <div class="form-group">
        <label for="c-pid" class="control-label col-xs-12 col-sm-2">{:__('appointment_activity_list')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select id="c-pid" data-rule="required" class="form-control selectpicker" name="row[apt_id]">
                {foreach name="appointment_activity_list" item="vo"}
                <option value="{$key}" {in name="key" value="$row.apt_id"}selected{/in}>{$vo.name}.开馆时间.{$vo.start_time}</option>
                {/foreach}
            </select>

        </div>
    </div>

后台富文本字段选text 开启富文本插件,,输入命令生成curl

时间弹窗不能完全显示
修改css

backend.css
.tab-addtabs {
  /*overflow: hidden;*/
}

和
bootstrap.css和fastadmin.min.css增加

.content {
  min-height: 250px;
  padding: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom:50px;
}

搜索联表处理

表couponuser,coupon和user表

关联字段分别是c_id和user_id

对应的js

 // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Num_id')},
                        {field: 'coupon.name', title: __('couponuser_list')},
                        {field: 'user.nickname', title: __('user_name')},
                        {field: 'coupon', title: __('Coupon')},
                        {field: 'is_receivelist', title: __('Is_receivelist'),operate:false, visible:false, searchList: {"0":__('Is_receivelist 0'),"1":__('Is_receivelist 1')}},
                        {field: 'is_receivelist_text', title: __('Is_receivelist'), operate:false},
                        {field: 'is_use', title: __('Is_use'), visible:false, searchList: {"0":__('Is_use 0'),"1":__('Is_use 1')}},
                        {field: 'is_use_text', title: __('Is_use'), operate:false},
                        {field: 'imagesurl', title: __('Images'),operate:false, formatter: Table.api.formatter.images},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

model(在当期的model)

public function Coupon()
    {
//        return $this->hasOne('Coupon', 'id', 'c_id');
        return $this->belongsTo('Coupon', 'c_id', 'id', [], 'LEFT')->field('name')->setEagerlyType(0);

    }

    public function User()
    {
//        return $this->hasOne('Coupon', 'id', 'c_id');
        return $this->belongsTo('User', 'user_id', 'id', [], 'LEFT')->field('nickname')->setEagerlyType(0);
    }

控制器

/**
     * 查看
     */
    public function index()
    {
        //设置过滤方法
        $this->request->filter(['strip_tags']);
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                ->with(['coupon'])
                ->with(['user'])
                ->where($where)
//                ->order($sort, $order)
                ->count();

            $result = $this->model
                ->with(['coupon','user'])
                ->where($where)
                ->order('coupon_user.'.$sort, $order)
                ->limit($offset, $limit)
                ->select();

            $result = collection($result)->toArray();
            $host_url = "https://" . $_SERVER['HTTP_HOST'] . "/";

            foreach ($result as $k => $v) {
                $imagesurl = $host_url . $v['images'];
                $result[$k]['imagesurl'] = $imagesurl;
                $coupon = model('Coupon')->where('id', $v['c_id'])->select();
                $coupon = collection($coupon)->toArray();
                foreach ($coupon as $kk => $vv) {
                    $result[$k]['name'] = $vv['name'];
                }

                //获取用户名称
                $user_list = model('User')->where('id', $v['user_id'])->select();
                $user_list = collection($user_list)->toArray();
                foreach ($user_list as $key => $value) {
                    $result[$k]['nickname'] = $value['nickname'];
                }

            }

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

给页面添加一个新页面传递参数

在当前页面js中替换下面的js

// {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate},

                        //操作栏,默认有编辑、删除或排序按钮,可自定义配置buttons来扩展按钮
                        {
                            field: 'operate',
                            width: "120px",
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'addtabs',
                                    title: __('企业联系人列表'),
                                    classname: 'btn btn-xs btn-warning btn-addtabs',
                                    icon: 'fa fa-folder-o',
                                    url: 'contact/index/'
                                },

                            ],
                            formatter: Table.api.formatter.operate
                        },

创建对应的控制器/前端也面/js(复制一个即可)

主要说说怎么传值(将id传值过去,返回前端页面,js抓取标识后通过ajax在次请求接口,接口返回参数即可)

代码

index方法,通过传递的id查询返回数据到新页面

/**
     * 查看
     */
    public function index($ids = '')
    {
        //设置过滤方法
        $this->request->filter(['strip_tags']);

        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                ->where($where)
                ->where(["enterprise_id" => $ids])
                ->order($sort, $order)
                ->count();

            $list = $this->model
                ->where($where)
                ->where(["enterprise_id" => $ids])
                ->order($sort, $order)
                ->limit($offset, $limit)
                ->select();

            $list = collection($list)->toArray();
            $result = array("total" => $total, "rows" => $list);
            return json($result);
        }
        $this->assign("ids",$ids);

        return $this->view->fetch();
    }

index.html页面加一个

<input type="hidden" id="ids" value={$ids}>

js里面获取并传参

index: function () {
            // 初始化表格参数配置
            var ids = $('#ids').val();//获取ids
            Table.api.init({
                extend: {
                    index_url: 'contact/index/ids/'+ids,
                    add_url: 'contact/add',
                    edit_url: 'contact/edit',
                    del_url: 'contact/del',
                    multi_url: 'contact/multi',
                    table: 'contacts',
                }
            });

最合理的一种

html

 <input type="hidden" id="equid" value={$top.equid}>

js

var Controller = {
        index: function () {
            // 初始化表格参数配置
            var equid = $('#equid').val();//获取ids
            Table.api.init({
                extend: {
                    index_url: 'switchs/index/?equid='+equid,
                    add_url: 'switchs/add',
                    edit_url: '',
                    del_url: '',
                    multi_url: '',
                    table: 'switchs',
                }
            });

后台接收

  $equid = $this->request->get('equid');

163邮箱配置

直接通过命令行生成表例如表articles 则联表地方写上articles_id即可

生成关联id

 <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Articles_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-articles_id" data-rule="required" data-source="articles/index" data-field="title" data-order-by="id desc" class="form-control selectpage" name="row[articles_id]" type="text" value="">
        </div>
    </div>

在html中add.html和edit.html中添加data-field="显示的字段" data-order-by="id desc"控制`排序

官方方法

electpage所支持的扩展属性

属性

功能

示例

data-source

提供数据源的URL地址

data-source="category/index"

data-field

列表显示读取的字段

data-field="username"

data-primary-key

列表选中后渲染的字段

data-primary-key="uid"

data-pagination

是否开启分页

data-pagination="true"

data-page-size

分页大小

data-page-size="10"

data-multiple

是否支持多选

data-multiple="true"

data-max-select-limit

最多可选择数量

data-max-select-limit="3"

data-order-by

排序字段

data-order-by="id"

data-params

自定义扩展参数

data-params='{"custom[type]":"test"}'

data-select-only

是否为只读模式

data-select-only="true"

articles/inde 地址是对应控制的index方法

js引入地址 admin/view/common/mete.html
引入方法 <script src="__CDN__/assets/js/jquery.min.js"></script>
<script type="text/javascript">

id="htmlOnClick" οnclick="clickHandler('{$v.id}')

function clickHandler(key) {
console.log(key);
$.ajax({
type: 'POST',
url: "/admin/equipment/floorClassroom",
data: data,
dataType: 'json',
success: function (data) {
console.log(data.data);
if (data.data == -1) {
alert(data.msg);
}
if (data.data == 1) {
}
}
});
}

隐藏头部搜索,找到对应的js中,在// 初始化表格 table.bootstrapTable({})添加下面的即可

//禁用默认搜索
search: false,
//搜索框
commonSearch: false,
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: false,
//导出
showExport: false,
//切换
showToggle: false,
//选择列
showColumns: false,

css隐藏number的上下切换数字

input[type=number] {
        -moz-appearance:textfield;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

拟态框操作

 <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            ×
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            编辑开关名称
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!--  模态框内容，我在此处添加一个表单 -->
                                        <form class="form-horizontal" role="form" method="get" action="/admin/switchs/editSwitchName">
                                            <div class="form-group">
                                                <label for="uname" class="col-sm-2 control-label">开关名称:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="dahai-id" id="id" name="id" value="{$sub.id}"/>
                                                    <input type="text" id="uname" name="uname" class="form-control well" value="{$sub.switch_name}"/>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <span id="returnMessage" class="glyphicon"> </span>
                                                <button type="button" class="btn btn-default right" data-dismiss="modal">取消</button>
                                                <button id="submitBtn" type="submit" class="btn btn-primary" >保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <!-- 模态框（Modal） -->

js部分

 //拟态框(无操作)
        $(function () { $('#myModal').on('hide.bs.btn-primary', function () {
            alert('嘿，我听说您喜欢模态框...');})
        });

初始化input请求的​​data-sourc​​(url)

​​data-source​​​这个值没法动态修改哦。
​​​selectpage​​​如果需要动态传参，请使用​​data-params=function​​​ 如果需要动态修改​​selectpage​​的url值，则可以采用下面的方法来实现

例如:

  var url ="/admin/classroom/getClassroom?building="+building_id+"&floor="+floor;
        $("#c-classroom_id_text").data("selectPageObject").option.data = url;

fastadmin cms插件设置首页

首页的logo后台管理

后台cms区块管理添加一张图片

defalut/commot/layout.html

html修改

 <a class="navbar-brand" href="{cms:config name='cms.indexurl'/}">{cms:block name="index_logo" /}</a>
                        <!--<a class="navbar-brand" href="{cms:config name='cms.indexurl'/}"><img src="__ADDON__/img/logo.png" width="180" alt=""></a>-->

css

<style>
            .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
                display: block;
                max-width: 100%;
                height: auto;
                width: 180px;
            }
        </style>

thinkphp5分页

$gradeModel = new Grade();
                $grade = $gradeModel->field('id,name,image')->paginate($rows);
                if (count($grade) > 0) {
                    $data = $grade->toArray();
                    foreach ($data['data'] as $k => $v) {
                        if ($v['image'] != null) {
                            $data['data'][$k]['image'] = 'http://' . $_SERVER['SERVER_NAME'] . $v['image'];
                        }
                    }
                }