fastadmin自定义下拉多级联动,当选用户组为渠道商就显示二级下拉列表,选其它的就隐藏二级下拉列表,这里提供了一个非常好的例子,基于官方风格。
一、页面
1、add.html
<!-- 第一个下拉框 -->
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('用户组')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-group_id" data-rule="required" data-source="user/group/index" data-primary-key="id" class="form-control selectpage" name="row[group_id]" type="text" value="">
</div>
</div>
<!-- 第二个下拉框 -->
<div class="form-group" id="dealer-group" style="display: none;">
<label class="control-label col-xs-12 col-sm-2">{:__('所属经销商')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-parent_id" data-rule="required" data-source="user/user/index" data-field="mobile" class="form-control selectpage" name="row[parent_id]" type="text" value="0">
</div>
</div>
2、edit.html (区别在于添加判断:{if $row.parent_id<1} style="display: none;" {/if} )
<!-- 第一个下拉框 -->
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('用户组')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-group_id" data-rule="required" data-source="user/group/index" data-primary-key="id" class="form-control selectpage" name="row[group_id]" type="text" value="{$row.group_id|htmlentities}">
</div>
</div>
<!-- 第二个下拉框 -->
<div class="form-group" id="dealer-group" {if $row.parent_id<1} style="display: none;" {/if}>
<label class="control-label col-xs-12 col-sm-2">{:__('所属经销商')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-parent_id" data-rule="required" data-source="user/user/index" data-field="mobile" class="form-control selectpage" name="row[parent_id]" type="text" value="{$row.parent_id|htmlentities}">
</div>
</div>
二、js
\public\assets\js\backend\你的.js (比如我的是:\public\assets\js\backend\user.js) 修改里面的 add 和 edit 方法即可
1、针对 add.html的js
add: function () {
// 监听用户组下拉框变化事件
$("#c-group_id").on('change', function() {
var title = $(this).val();//获取标题
var groupId = $('#c-group_id').val();//获id值
if(title=='渠道商'){//显示
$('#dealer-group').show();
$('#c-parent_id').attr('value','');//默认不选下拉经销商是提交不了的
}else{//隐藏
$('#dealer-group').hide()
$('#c-parent_id').attr('value',0);//其它的默认设置为0,要不然添加时是不能为空的。
}
});
// 监听 所属经销商 下接列表的 选中值
$("#c-parent_id").data("params",function(e){
//return {custom: {parent_id: $("#c-group_id").val()}};
//return {group_id:2};
return {group_id:$("#c-group_id").val()};
})
Controller.api.bindevent();
},
2、针对 edit.html的js
edit: function () {
// 监听用户组下拉框变化事件
$("#c-group_id").on('change', function() {
var title = $(this).val();//获取标题
var groupId = $('#c-group_id').val();//获id值
if(title=='渠道商'){//显示
$('#dealer-group').show();
$('#c-parent_id').attr('value','');//默认不选下拉经销商是提交不了的
}else{//隐藏
$('#dealer-group').hide()
$('#c-parent_id').attr('value',0);//其它的默认设置为0,要不然添加时是不能为空的。
}
});
// 监听 所属经销商 下接列表的 选中值
$("#c-parent_id").data("params",function(e){
//return {custom: {parent_id: $("#c-group_id").val()}};
//return {group_id:2};
return {group_id:$("#c-group_id").val()};
})
Controller.api.bindevent();
},
三、后台代码
\admin\controller\user\你的.php (比如我的是:\admin\controller\user\User.php) 修改里面的 index 方法,添加二级联动查询条件即可。 我的接口是上面html代码中的:user/user/index
/**
* 查看
*/
public function index()
{
//设置过滤方法
$this->request->filter(['strip_tags', 'trim']);
if ($this->request->isAjax()) {
//二级联动
$custom = $this->request->param();
if(!empty($custom['group_id'])){
//如果发送的来源是Selectpage,则转发到Selectpage - 让下拉在修改的时候选中指定数据库中的值
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
if($custom['group_id']==3){//如果是渠道商才会有值
$where=[];
$where['parent_id']=0;//!empty($custom['parent_id']) ? $custom['parent_id'] : 0;
$where['group_id']=2;//查经销商
$list = $this->model
->where($where)
->order($sort, $order)
->paginate(5);
$result = array("total" => $list->total(), "rows" => $list->items());
return json($result);
}else{
$result = array("total" => 0, "rows" => []);
return json($result);
}
}
//如果发送的来源是Selectpage,则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$list = $this->model
->with('group')
->where($where)
->order($sort, $order)
->paginate($limit);
foreach ($list as $k => $v) {
$v->avatar = $v->avatar ? cdnurl($v->avatar, true) : letter_avatar($v->nickname);
$v->hidden(['password', 'salt']);
}
$result = array("total" => $list->total(), "rows" => $list->items());
return json($result);
}
return $this->view->fetch();
}
发表评论 取消回复