[fastadmin]第十一篇 fastadmin 搜索框带默认值传参(又是找不到的教程)
92 / 0 / 创建于 8个月前 /
wangchunbo 的个人博客
需求
点击匹配详情,搜索条件 显式 展示
解决方案
search:false, 关注上面的搜索框框 用于实现 匹配详情中,带出来的默认搜索条件
然后在自定义搜索tpl 中,把默认搜索条件 通过assign 展示出来. 需要加一个判断
js中 queryparams 需要写,请求前的,js 参数处理
逻辑
把顶部搜索给关了search:false
写一个自定义搜索
在自定义搜索的tpl 中,可以把query 的参数assign 到模板.
在tpl中判断 非空就展示即可
实现代码
第一步,rows上的按钮,主要是 url 这里,我们是打开了这个 路由. 借助于mvc ,我们需要写对应的php 与 tpl(就是view)
// 匹配按钮
buttons: [
{
name: 'match_detail',
text: __('匹配详情'),
title: __('匹配详情'),
classname: 'btn btn-xs btn-primary btn-dialog',
// classname: 'btn btn-xs btn-primary btn-addtabs',
// classname: 'btn btn-xs btn-primary btn-log', icon: 'fal fa-equals',
// 定义按钮传参地方
url: 'medicine/match/match_detail?medicine_match_id={row.id}&medicine_name={row.medicine_name}',
callback: function (data) {
Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
},
visible: function (row) {
//返回true时按钮显示,返回false隐藏
// 匹配 做判断
if ( row.gjpz_id == 0 && row.tgyjpz_id == 0 ) {
return true;
}else {
return false;
}
}
},
],php函数代码
// 匹配的弹框
public function match_detail()
{ // 如果是ajax 则进行一个查询 不是，就直接返回模板
//当前是否为关联查询
$this->relationSearch = true;
//设置过滤方法
$this->request->filter(['strip_tags', 'trim']);
if ($this->request->isAjax()) {
$medicine_match_id = input("id");
$search = input("search");
if (empty($search)) {
return json(['code' => 0, 'msg' => '请输入搜索内容']);
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$type = 2;
$list = $this->ypgjpzModel
// ->with(['admin'])
->where('yptym', 'LIKE', '%' . $search . '%')
->paginate($limit);
//打印sql
// echo ypgjpzModel::getLastSql();
if (count($list) == 0) {
$list = $this->yptgyjpzModel
// ->with(['admin'])
->where('yptym', 'LIKE', '%' . $search . '%')
->paginate($limit);
$type = 3;
}
foreach ($list as $row) {
// 前台传参用 确认匹配按钮
$row->type = $type;
$row->medicine_match_id = $medicine_match_id;
$row->visible(['id', 'yptym', 'gg', 'dw', 'scqy', 'zbj', 'zc', 'tbdm', 'fbrq', 'verify','type','medicine_match_id']);
}
$result = array("total" => $list->total(), "type" => $type, "rows" => $list->items());
return json($result);
}
// 解决，点击匹配，没有第一层id问题
// 第一层参数，传递到第二层的，class 中赋值
// 在对应的js 中,给默认的名字 赋值
$medicine_match_id = input("medicine_match_id");
$this->view->assign('medicine_match_id', $medicine_match_id);
$medicine_name = input("medicine_name");
$this->view->assign('medicine_name', $medicine_name);
return $this->view->fetch();
}
自定义表单的视图. 这里因为上面方法 已经assign 了 变量.我们直接赋值与展示
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="history" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<table id="match_detail_table" medicine_match_id = '{$medicine_match_id}' medicine_name = '{$medicine_name}' class="match_detail_table table-striped table-bordered table-hover table-nowrap"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<script src="/static/diyjs/watermark-w.js"></script>
<script id="match_detail_form_tpl" type="text/html">
<!--form表单必须添加form-commsearch这个类-->
<form action="" class="form-commonsearch">
<div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
<h4>自定义搜索表单</h4>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="form-group">
<label class="control-label">条件</label>
<!--隐式的operate操作符，必须携带一个class为operate隐藏的文本框,且它的data-name="字段",值为操作符-->
<input class="operate" type="hidden" data-name="medicine_name" value="LIKE"/>
<div>
<!-- // 后台需要处理接受的参数. 后台也要改0803-->
<input class="form-control export_yptym" type="text" name="medicine_name" placeholder="药品通用名" value="{$medicine_name}"/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="form-group">
<label class="control-label"></label>
<div class="row">
<div class="col-xs-6">
<input type="submit" class="btn btn-success btn-block" value="提交"/>
</div>
<div class="col-xs-6">
<input type="reset" class="btn btn-primary btn-block" value="重置"/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</script>
这个界面对应的js,初始化table. 还包括了, 我对于传参的特殊处理.
因为我要求一些特殊值.
// 一个按钮 对应js处理。 fastadmin 中 html 不可写js
match_detail: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
// index_url: 'medicine/match/match_detail' + location.search,
index_url: 'medicine/match/match_detail' +Fast.api.query('id'),
table: 'match_detail_table',
}
});
// jqery 查询指定input 修改默认值 此处修改jq 失败.里面 是fastadmn 分帧 0803
// $(document).ready(function() {
// // 获取输入框元素
// var inputElement = $(".pull-right").find("input[placeholder='搜索']");
// console.log(inputElement);
// // todo 可以查询到值, 代码还要改一下
// // 改变输入框的值
// inputElement.attr("placeholder","请输入药品名称");
// });
// //通过此方式引入jquery才能使用$，接下来正常写jquery代码就好
// 表格
var table = $("#match_detail_table");
// 初始化表格 POST 使用例子 2023-06-14
// 这部分功能是 授课锚点
// 自定义搜索,切换界面带默认值. 处理自定义搜索model冲突. 0804
table.bootstrapTable({
// table 中进行查询的url
url: "medicine/match/match_detail",
method: 'post',
// 参数需要注释掉.因为这边已经改了自定义搜索 0803
// 自定义搜索需要从这里过滤数据
queryParams: function(params){
// console.log(6666666666);
/*/ var filter = JSON.parse(params.filter);
// var op = JSON.parse(params.search);
// console.log(filter);console.log(op);
// params.filter = JSON.stringify(filter);
// params.op = JSON.stringify(op);
// 这里出现问题： 无法获得id。 因为id 是row 上的 已经解决
通过html 中取
**/
// begin by bob 2023-08-04 解决自定义搜索表单 传参 问题. 这里直接js 处理
// js 过滤自定义搜索数据.
var filter = JSON.parse(params.filter);
console.log(filter["medicine_name"]); // 这里是搜索的值
// 如果搜索输入值 有,就用搜索的
if (filter["medicine_name"] != undefined && filter["medicine_name"] != '') {
params.search = filter["medicine_name"];
}
// end by bob 2023-08-04 解决自定义搜索表单 传参 问题. 这里直接js 处理
// console.log($("#match_detail_table").attr('medicine_match_id'));
params.medicine_match_id = $("#match_detail_table").attr('medicine_match_id');
// console.log($("#match_detail_table").val('medicine_match_id'));
if (params.search == undefined || params.search == '') {
params.search = $("#match_detail_table").attr('medicine_name');
}
return params;
},
pk: 'id',
sortName: 'id',
fixedColumns: true,
fixedRightNumber: 1,
// 自定义搜索
searchFormTemplate: 'match_detail_form_tpl',
searchFormVisible: true, // 默认显示搜索框
search:false, // 关 上面的搜索框框 用于实现 匹配详情中,带出来的默认搜索条件 在form 中再使用表单. 0802
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'yptym', title: __('Yptym'), operate: 'LIKE'},
{field: 'gg', title: __('Gg'), operate: 'LIKE'},
{field: 'dw', title: __('Dw'), operate: 'LIKE'},
{field: 'scqy', title: __('Scqy'), operate: 'LIKE'},
{field: 'zbj', title: __('Zbj'), operate:'BETWEEN'},
{field: 'zc', title: __('Zc'), operate:'BETWEEN'},
{field: 'tbdm', title: __('Tbdm')},
// {field: 'pzlxr', title: __('Pzlxr'), operate: 'LIKE'},
// {field: 'xldh', title: __('Xldh'), operate: 'LIKE'},
{field: 'fbrq', title: __('Fbrq')},
// {field: 'xxztswitch', title: __('Xxztswitch'), searchList: {"0":__('Xxztswitch 0'),"1":__('Xxztswitch 1'),"2":__('Xxztswitch 2')}, table: table, formatter: Table.api.formatter.toggle},
{
field: 'verify',
title: '审核状态',
operate: false,
formatter: Controller.api.formatter.verifyType
},
{
field: 'operate', title: __('Operate'),
table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate,
},
{
field: 'operate',
title: __('Operate'),
table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate,
// 确认匹配按钮
buttons: [
// {
// name: 'confirm_match',
// text: __('确认匹配'),
// title: __('确认匹配'),
// classname: 'btn btn-xs btn-primary btn-dialog',
// // classname: 'btn btn-xs btn-primary btn-log',
// icon: 'fal fa-check',
// // 定义按钮传参地方 这里无法取到 medicine_match_id 因为一开始的打开没有传入这个值
//
// url: 'medicine/match/confirm_match?id={row.id}&type={row.type}&medicine_match_id='+$("#match_detail_table").attr('medicine_match_id'),
//
// callback: function (data) {
// // Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
// Layer.alert("处理完成：" + JSON.stringify(data), {title: "响应数据"});
// },
// visible: function (row) {
// //返回true时按钮显示,返回false隐藏
// return true;
// }
// },
// 确认匹配
{
name: 'confirm_match',
text: __('确认匹配'),
title: __('确认匹配'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
// classname: 'btn btn-xs btn-info btn-addtabs',
icon: 'fa fa fa-check',
// url:function (data) {
// return Fast.api.fixurl( "medicine/purchase/form/getListByOrderId?order_id=" + data.id);
// },
url: 'medicine/match/confirm_match?id={row.id}&type={row.type}&medicine_match_id='+$("#match_detail_table").attr('medicine_match_id'),
extend: 'data-toggle="tooltip"',
confirm:"是否生成匹配?",
//
// disable:function (row) {
// if ( row.status == 3 ) {
// return true;
// }else if ( row.status == 4 ) {
// return true;
// }else {
// return false;
// }
// },
success: function (data, ret) {
Layer.alert(ret.msg);
Layer.closeAll('loading');
// 刷新表格
table.bootstrapTable('refresh',{});
// Fast.api.refreshtable('table');
},
error: function (data, ret) {
Layer.alert(ret.msg);
Layer.closeAll('loading');
return false;
}
},
],
}
]
]
});
// end 历史记录 table
// 为表格绑定事件
Table.api.bindevent(table);
Controller.api.bindevent();至此结束,演示如图
![[fastadmin]第十一篇 fastadmin 搜索框带默认值传参(又是找不到的教程)](https://cdn.learnku.com/uploads/images/202308/08/46135/1pcUGM9twC.png!large)
![[fastadmin]第十一篇 fastadmin 搜索框带默认值传参(又是找不到的教程)](https://cdn.learnku.com/uploads/images/202308/08/46135/WO4BDwkHaI.png!large)
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：