Fastadmin 开发过程中遇见的问题
Php
2025-11-02 13:35
131
0
表格的列头对齐以及内容对齐设定方式
一、列头对齐
{field: 'title', title: __('Title'), operate: 'LIKE',align:'left'},
二、内容对齐
{field: 'title', title: __('Title'), operate: 'LIKE',
cellStyle:function(value,row,index,field){
return {
css:{"text-align":"left !important"}
}
}
},
fastadmin实现树形分类页面显示分类对不上以及结构混乱
这里放两种解决方案：
第一：直接在对应的分类js里面，添加escape:false,这样列表页面的特殊符号就没有了；
第二：在树形类里面将 ；换成其他不需要转义的符号，比如–之类的；树形类的文件位置在extend/fast/Tree.php;
fastadmin固定表格某一列的方法
//启用固定列 fixedColumns: true, //固定列数 fixedNumber: 1, //列宽 fixedNumberWidth:120, //后边会说明为什么加这个 我这边固定的是右侧的 固定左侧的就把下面四 中的right:0 去掉即可 (两个哦)
fastadmin列表页实现不分页处理
data-pagination="false"
FastAdmin中input转SelectPage用法
columns配置核心：
使用formatter函数为name字段添加缩进，显示层级关系
为pid字段格式化显示父级科室名称而不是ID
后端数据处理：
使用Tree类构建树形结构数据
为每个节点添加level字段和pname（父级名称）字段
表格配置：
设置pagination: false避免分页破坏树形结构
使用data-page-size设置较大的值确保完整显示
SelectPage联动：
通过data-params='{"isTree":1}'请求树形数据
确保后端selectpage方法正确处理树形结构
前端代码：
{field: 'name', title: '科室名称', align:'left',
formatter: function (value, row, index) {
// 利用row.level生成缩进，实现树形显示
var html = '';
if (row.level > 0) {
html = '<span style="margin-left:' + (row.level * 20) + 'px;"></span>';
}
return html + value;
},
cellStyle: function(value, row, index, field){
return {
css:{"text-align":"left !important"}
}
}
},
FastAdmin中后端实现树形结构
// 构建科室树
$treeList = collection($this->model->select())->toArray();
$tree = Tree::instance();
$tree->init($treeList, 'pid');
$procatelTree = $tree->getTreeList($tree->getTreeArray(0), 'name');
$this->procatelList = [0=>'请选择上级科室'];
foreach ($procatelTree as $k => $v) {
$procatelList[$v['id']] = $v['name'];
}
$this->view->assign('procatelList', $procatelList);
.......
foreach ($procatelTree as &$item) {
$item['pname'] = $item['pid'] > 0 ? ($parentNames[$item['pid']] ?? '未知') : '顶级科室';
$item['level'] = $item['pid'] > 0 ? 1:0;
}
$result = ['total' => count($treeData), 'rows' => $treeData];
FastAdmin表格，列参数中获取当前行的值
{
field: '',
operate: false,
title: __('计费数量（吨/夹板）'),
formatter: function(value,row,index){
if(row.jifei_list ==1){
return (row.weight*row.stock/1000).toFixed(2);
}else{
return (row.stock/row.jiaban_num).toFixed(2);
}
}
},
如上代码，在表格增加一列计费数量。该列是根据当行数据中的jifei_list字段显示不同内容。如果要在列参数中使用当前行的数据，需要
formatter: function(value,row,index) //value: 当前字段值 row: 行数据 index: 行索引
注意：function的参数row必须在第二位，就算value用不到也要填上。
fastadmin 获取表格选中列的id和值
实现效果：
html部分：
<a href="javascript:;" class="btn btn-info btn-charge {:$auth->check('dingnai/charge/add')?'':'hide'}" title="{:__('收款')}" ><i class="fa fa-cny"></i> {:__('收款')}</a>
js部分：
$(document).on("click", ".btn-charge", function () {
var ids = Table.api.selectedids(table);//获取选中列的id
if(ids.length==0){
layer.alert("请选择要收款的订户");
return false;
}
if(ids.length>1){
layer.alert("只能选择一个订户进行收款操作");
return false;
}
var v = Table.api.getrowbyid(table, ids[0]);//获取选中列的值
Fast.api.open("dingnai/charge/index?subscriber_id="+ids[0], v.name+" ~ "+v.address,{area:['980px', '760px']});
});
fastadmin列表字段截取
{
field: 'title', title: __('标题'),
formatter: function(value){
if(value.length > 20){
return value.toString().substr(0, 20) + '...';
}else{
return value;
}
}
},
fastadmin自定义带参数的按钮
buttons: [{
name: "thumbsup",
text: "点赞日志",//按钮名称
classname: 'btn btn-xs btn-success btn-addtabs',
icon: 'fa fa-folder-o',
url: 'community/thumbsup/index?essay_id={id}',//指向控制器对应方法
}],
fastadmin两种自定义弹出层/弹出框宽高/大小的方法
1.在表格里面点击按钮触发的弹出层，这是在js文件添加按钮，然后点击触发弹出层。
extend:'data-area=["860px","730px"]', //依次是宽和高
2.触发弹出框的方式，非表格里面点击按钮出现弹出层，自定义宽高
在表格外面点击按钮触发弹出层，按钮的生成代码和给弹出层传参的方式完全不一样。
<a href="echarts/index" class="btn btn-info btn-dialog" title="图表" data-area=["100%","100%"] ><i class="fa fa-map-signs"></i> 地图</a>
a标签生成的按钮，title="图表" data-area=["100%","100%"] 其中title是弹出层的标题，data-area则是传参宽高。
fastadmin 通用搜索中select设置多选、build_select设置多选、全选、取消权限
一、对应的js文件设置可以多选
{ field: 'source_id', title: '客户来源', addClass: "selectpicker", operate: "IN", data: "multiple",
formatter: function (v, r, index) {
return Config.channel_source_map[v];
},
searchList: Config.channel_source_map
},
重要的几个属性设置
addClass: "selectpicker", operate: "IN", data: "multiple",
二、模板中build_select，可以设置多选，并且全选、取消权限
{:build_select('row[customer_status]', $customer_status_map, 0, ['class'=>'form-control selectpicker','id' => 'customer_status','lay-filter'=>'customer_status_selectfilter','multiple'=>'','data-actions-box'=>'true'],true)}
主要两个属性
'multiple'=> '', 'data-actions-box'=> 'true'
datetimerange 自定义中限制时间
在自定义field中限制时间段，比如只能选择60天
{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', extend:'data-date-limit="{\'days\': 60}"' autocomplete:false, formatter: Table.api.formatter.datetime},
主要属性
extend:'data-date-limit=\'{"days": 60}\''
日期区间组件datetimerange去掉默认快捷选项
主要属性
input中的data-ranges="" columns: extends:'data-ranges=""'
自定义按钮发送请求
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate,
buttons:[
{
name:'top',
text:__('缓存本账户'),
title:__('缓存本账户'),
classname: 'btn btn-xs btn-success btn-view btn-ajax',
icon: 'fa fa-check-circle',
url: 'mqjob/advertiser/cacheadv',//用自定义按钮的方法
visible:function(row){
if(row.pid == 0){
return true;
}else{
return false;
}
},
refresh:false
}
]
}
{field: 'id', title: __('Id'), table: table,
buttons: [
{
name: 'ajax',
text: __('解绑'),
title: __('解绑'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'player/player/unbundling?',
confirm: '确认是否要解绑',
success: function (data, ret) {
if(ret["msg"]["code"]==200){
Layer.alert("解绑"+ret["msg"]["msg"]);
}
else {
Layer.alert('<span id="" style="color: red;">'+ret["msg"]["msg"]+'</span>');
}
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
}
],
operate:false, formatter: Table.api.formatter.buttons
},
tab默认不展示全部
index.html:
<div class="panel-heading">
<ul class="nav nav-tabs" data-field="track_type">
{foreach name="statusList" key="key" id="val"}
<li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$val}</a></li>
{/foreach}
<li><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
</ul>
</div>
对应JS:
var table = $("#table");
// 指定第一个 tab 为激活状态，且获取对应、有效的数据列表
table.on("post-common-search.bs.table", function (e, t) {
// 这个代码块中的操作自行调整
var link_obj = $("ul.nav-tabs li a[data-toggle='tab']").first();
console.log(link_obj.data("value"));
link_obj.parent("li").addClass("active");
$("select[name='track_type']", t.$commonsearch).val(link_obj.data("value"));
// 此行代码是生效点
});
日期搜索去掉搜索记录
// fastadmin 日期搜索去掉搜索记录
table.on('post-body.bs.table', function (e, settings, json, xhr) {
$('.datetimerange').each(function () {
$(this).attr('autocomplete', 'off');
})
});
bootstrapTable实现合并相同列
在表格中合并相同列数据的方法，并通过JavaScript实现了动态调整表格样式，包括背景颜色交替变化和行合并
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'update_time',
search: false,
toolbar: '#toolbar',
commonSearch: true,
pageSize : 12,
searchFormVisible: true,
queryParams: function (params) {
//这里可以追加搜索条件
var filter = JSON.parse(params.filter);
var op = JSON.parse(params.op);
//这里可以动态赋值，比如从URL中获取admin_id的值，filter.admin_id=Fast.api.query('admin_id');
// filter.admin_id = 1;
if(filter.is_bujiao=='是')
filter.is_bujiao=1
if(filter.is_bujiao=='否')
filter.is_bujiao=0
op.username = "like";
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
return params;
},
columns: [
[
{field: 'total_order_id', title: '总订单号',sortable: true,width: "150px",formatter: Table.api.formatter.search}
]
],
// 合并表格
onLoadSuccess: function (data) {
mergeCells(data, "total_order_id", $("#table"));
// 多个表格合并
// mergeCells(data, "total_order_id2", $("#table"));
},
});
// 为表格绑定事件
Table.api.bindevent(table);
/**
* 合并相同列
* @param data 原始数据（在服务端完成排序）
* @param fieldName 合并属性数组
* @param target 目标表格对象
*/
function mergeCells(data, fieldName, target) {
setTimeout(function () {
if (data.rows.length == 0) {
return;
}
var numArr = [];
var number=0;
var classzhi='dan';
if( data.rows.length>1){
for (let i = 0; i < data.rows.length; i++) {
if(data.rows[i][fieldName]!='' && data.rows[i][fieldName]!='-'){
if(data.rows[i-1]){
if(data.rows[i-1][fieldName]!='' && data.rows[i-1][fieldName]!='-'){
if(data.rows[i-1][fieldName]==data.rows[i][fieldName]){
number++
}
else{
number=number+1
numArr.push({index:i-number,number:number,pan:'1'})
number=0
}
}
}
if(!data.rows[i+1]){
number=number
numArr.push({index:i-number,number:number+1,pan:'2'})
number=0
}else{
if(data.rows[i+1][fieldName]=='' || data.rows[i+1][fieldName]=='-'){
number=number
numArr.push({index:i-number,number:number+1,pan:'3'})
number=0
}
}
}else{
numArr.push({index:i,number:1,pan:'4'})
}
}
}else{
numArr.push({index:0,number:1,pan:'5'})
}
// console.log(numArr);
for (let x = 0; x < numArr.length; x++) {
if(x%2){
for(let y=0;y<numArr[x]['number'];y++){
$(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#ccc')
}
}else{
for(let y=0;y<numArr[x]['number'];y++){
$(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#FFF')
}
}
$(target).bootstrapTable('mergeCells', { index: numArr[x]['index'], field: fieldName, colspan: 1, rowspan: numArr[x]['number']});
}
},0)
}