fastadmin 新手部分功能点

1、时间范围组件

<div class="col-xs-12 col-sm-6 col-md-3" style="width: 300px"> <div class="form-group"> <label class="control-label">下单时间</label> <input class="operate" type="hidden" data-name="created_at" value="RANGE"/> <div> <input class="form-control datetimerange" type="text" name="created_at" placeholder="开始日期 - 结束日期" autocomplete="off" value="" data-daterangepicker-options='{"locale":{"format":"YYYY-MM-DD"}}'/> </div> </div> </div>

2、操作按钮设置弹出窗口大小

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { name: 'show', //唯一标识、权限标识 text: '推荐列表', //按钮显示的文字，支持function title: '推荐列表', //按钮显示的文字，支持function classname: 'btn btn-info btn-xs btn-dialog', //按钮的class，支持btn-dialog/btn-ajax/btn-addtabs url: 'cook/partners?cook_invite_code={cook_code}', //按钮的链接，支持使用{字段名}来占位替换，支持`function` extend: 'data-area=["1000px","650px"]' } ], formatter: Table.api.formatter.operate}

3、html设置弹出窗口大小

<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('shop_meals/add')?'':'hide'}" data-area='["900px","700px"]' title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>

4、bootstrapTabler属性设置

#声明加载一些库 define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'partners/index' + location.search, add_url: 'partners/add', edit_url: 'partners/edit', del_url: 'partners/del', multi_url: 'partners/multi', import_url: 'partners/import', table: 'partners', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url,#获取链接 pk: 'id', sortName: 'id', search: false, showExport: false, searchable: false, commonSearch: false, showToggle : false, showColumns: false, fixedColumns: true,//控制固定操作的 fixedRightNumber: 1,//控制右边固定操作列数 fixedNumber: 1, //控制左边固定操作列数 searchFormTemplate: 'customformtpl',//自定义搜索项模板 columns: [ [ {checkbox: true},#控制选择的 {field: 'mobile', title: __('厨师手机号'), operate: '=', placeholder:'手机/姓名/ID只用其一'},//input的placeholder文字自定义 {field: 'franchisee', title: __('城市合伙人名称')}, {field: 'cooperate_start', title: __('Cooperate_start'), operate:'RANGE', addclass:'datetimerange', autocomplete:false},#控制时间范围搜索 {field: 'franchise_area', title: __('加盟城市'), operate: 'LIKE'}, {field: 'username', title: __('城市合伙人账号')}, {field: 'area', title: __('Area'),operate: 'LIKE', searchable: false, formatter : function(value, row, index, field){ return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + value + "'>" + value + "</span>"; }, {field: 'start_at', title: __('Start_at'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, searchable: false},#时间 cellStyle : function(value, row, index, field){ return { css: { "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width":"150px" } }; }},#自定义操作显示，样式 {field: 'banner_status', title: __('Banner_status'), searchList: {"1":__('Banner_status 1'),"2":__('Banner_status 2')}, formatter: Table.api.formatter.status},#控制默认搜索选项 {field: 'nickname', title: __('联系人姓名'), operate: false},#operate的值有BETWEEN/LIKE/false/true/=/ {field: 'mobile', title: __('联系人手机'), operate: false}, { field: 'business_license', title: __('营业执照'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image, searchable: false }, {field: 'user_recording', title: __('用户录音'), formatter: function (index,row) { let div = '<div>'; if(row.user_recording != null) { let user_recording = row.user_recording let arr = user_recording.split(',') for (let i = 0; i < arr.length; i++) { div += `<a style="border: 1px solid #cccccc;margin: 2px" href=${arr[i]} target="_blank">录音${i+1}</a>` } }else{ div += '未上传录音' } div += '</div>' return div; }}, {field: 'cook_code', title: __('邀请码'), operate: false}, // { // field: 'qrcode_url', // title: __('二维码'), // operate: false, // events: Table.api.events.image, // formatter: Table.api.formatter.image, // searchable: false // }, {field: 'invite_num', title: __('邀请人数'), operate: false}, {field: 'standard_commission', title: __('标准抽成（%）') , operate: false}, {field: 'comments', title: __('备注'), operate: false}, {field: 'source', title: __('来源'), operate: false, searchable: false},#searchable控制是否开启默认搜索-false/true {field: 'status', title: __("Status"), searchList: {"normal":__('Normal'),"hidden":__('停用')}, formatter: Table.api.formatter.status}, {field: 'createtime_format', title: __('添加时间'), operate: false}, {field: 'updatetime_format', title: __('更新时间'), operate: false}, {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { name: 'show', //唯一标识、权限标识 text: '推荐列表', //按钮显示的文字，支持function title: '推荐列表', //按钮显示的文字，支持function classname: 'btn btn-info btn-xs btn-dialog', //按钮的class，支持btn-dialog/btn-ajax/btn-addtabs url: 'cook/partners?cook_invite_code={cook_code}', //按钮的链接，支持使用{字段名}来占位替换，支持`function` extend: 'data-area=["1000px","650px"]' } ], formatter: Table.api.formatter.operate} ] ] }); // 为表格绑定事件 $(".btn-activateSelected").click(function () { var ids = Table.api.selectedids(table); // 获取选中的条目ID集合 var currentURL = window.location.href; var urlParams = new URLSearchParams(currentURL); var card_id = urlParams.get("ids"); if (ids.length === 0) { layer.msg('请选择要操作的数据', { icon: 3 }); return; } layer.confirm('确定要激活选中吗?', { btn: ['是', '否'] }, function (index) { layer.close(index); $.post("card_number/activateSelected", { ids: ids, card_id: card_id, action: 'success', reply: '' }, function (response) { if (response.code == 1) { Toastr.success(response.msg); $(".btn-refresh").trigger('click'); } else { Toastr.error(response.msg); } }, 'json'); }, function (index) { layer.close(index); } ); }); // 为表格绑定事件 Table.api.bindevent(table); }, //另加一个列表 list: function () { }, add: function () { $('#source0').click(function () { $("[type=checkbox]").prop('checked', this.checked) }) Controller.api.bindevent(); }, edit: function () { $('#source0').click(function () { $("[type=checkbox]").prop('checked', this.checked) }) Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; });

5、bootstrapTable的operate属性所有值：

值	说明
false	禁用通用搜索：该字段将不参与通用搜索。
'='	等于：精确匹配，这也是默认值。
'!='	不等于。
'LIKE'	模糊匹配：通常用于字符串类型的字段搜索。
'NOT LIKE'	不包含。
'>'	大于。
'<'	小于。
'>='	大于等于。
'<='	小于等于。
'IN'	包含于：用于多选值查询。
'NOT IN'	不包含于。
'BETWEEN'	介于：用于查询某个范围的值，常用于数字或时间区间。
'NOT BETWEEN'	不介于。
'RANGE'	区间 ：与 BETWEEN 类似，常与时间选择器配合使用。
'NOT RANGE'	不介于 ：与 NOT BETWEEN 类似。
'FIND_IN_SET'	查找在集合中 ：专门用于处理存储为逗号分隔字符串的字段（如 '1,2,3'）。
'NULL'	为空 ：查询该字段值为 NULL 的记录。
'NOT NULL'	不为空 ：查询该字段值不为 NULL 的记录。