fastadmin 搜索框动态下拉

第一种内置版

//在普通搜索渲染后
table.on('post-common-search.bs.table', function (event, table) {
   $("input[name='DepName']").addClass("selectpage").data("source", "department/index").data('params','{"custom[isCollege]":"1"}').data('field','DepName').data('primary-key','DepName');
   $("input[name='grade']").addClass("selectpage").data("source", "grade/index").data('field','grade').data('primary-key','grade');
   $("input[name='major']").addClass("selectpage").data("source", "major/index").data('field','major').data('primary-key','major');
   Form.events.cxselect($("form", table.$commonsearch));
   Form.events.selectpage($("form", table.$commonsearch));
}); 

第二种自定义版

 在功能模块的index.html页面添加以下代码

<style>
    .action{
        float: left;
        line-height: 33px;
        margin-right: 10px;
    }
    .form-group{
        display: inline-block;
        float: left;
    }
</style>
<script id="custom" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <div class="row">
                <div class="form-group" style="">
                    <input class="operate gradeID" type="hidden" data-name="gradeID" value="="/>
                    <div class="action">
                        <input class="form-control selectpage" type="text" name="gradeID" placeholder="请输入选择年级" value="" data-source="base/grade/index" data-field="grade" data-primary-key="gradeID"/>
                    </div>
                </div>
                <div class="form-group" style="">
                    <input class="operate collegeID" type="hidden" data-name="collegeID" value="="/>
                    <input class="operate majorID" type="hidden" data-name="majorID" value="="/>
                    <input class="operate classID" type="hidden" data-name="classID" value="="/>
                    <div class="action">
                            <div class="form-inline" data-toggle="cxselect" data-selects="collegeID,majorID,classID">
                                学院
                                <select class="collegeID form-control" name="collegeID" data-url="theme.log/classMajorCollege"></select>
                                专业
                                <select class="majorID form-control" name="majorID" data-url="theme.log/classMajorCollege"></select>
                                班级
                                <select class="classID form-control" name="classID" data-url="theme.log/classMajorCollege"></select>
                            </div>
                    </div>
                </div>

                    <div class="form-group">
                        <input type="hidden" class="operate" data-name="updatetime" value="RANGE"/>
                        <div class="action">
                            <input type="text" class="form-control datetimerange" name="updatetime" value=""  placeholder="提交时间"/>
                        </div>
                    </div>

                <div class="form-group" style="">
                    <input class="operate text" type="hidden" data-name="studentID|studentName" value="LIKE"/>
                    <div class="action">
                        <input class="form-control" type="text" name="name" placeholder="请输入姓名" value="" />
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-3">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="submit" class="btn btn-success btn-block submit" value="提交"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" class="btn btn-primary btn-block reset" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

在功能模块对应的js文件的初始化表格里面添加

searchFormTemplate: 'custom',

            // 监听下拉列表改变的事件
            $(document).on('change', 'input[name=\'gradeID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'collegeID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'majorID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'classID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'input[name=\'theme_id\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'input[name=\'updatetime\']', function () {
                $('.submit').trigger("click");
            });

 三级联动的方法

    /**
     * 读取联动
     */
    public function classMajorCollege()
    {
        $params = $this->request->get("");
        if ($params) {
            $collegeID = isset($params['collegeID']) ? $params['collegeID'] : null;
            $majorID = isset($params['majorID']) ? $params['majorID'] : null;
        } else {
            $collegeID = $this->request->get('collegeID');
            $majorID = $this->request->get('majorID');
        }
        $where = array();
        if ($collegeID)
        {
            $where['id'] = $collegeID;
            $value = 'id';
            $name = 'name';
            $table = 'major';
        }elseif ($collegeID === null)
        {
            $where['isCollege'] = 1;
            $value = 'id';
            $name = 'name';
            $table = 'college';
        }
        if ($majorID !== null)
        {
            $where['id'] = $majorID;
            $value = 'id';
            $name = 'name';
            $table = 'classs';
        }
        $provincelist = array();
        if (isset($table)) $provincelist = Db::name($table)->where($where)->field($value.' as value,'.$name.' as name')->select();
        $this->success('', '', $provincelist);
    }

心血来潮不想用原本的搜索方式,想更方便一点,特此记录一下。

FastAdmin 中实现动态下拉表单联动,可以使用 FastAdmin 自带的表单组件以及 jQuery 插件 Chained Selects。 具体实现步骤如下: 1. 定义两个联动的下拉框,如下: ```php $form->select('province_id', '省份')->options('/api/province'); $form->select('city_id', '城市')->options('/api/city')->rules('required'); ``` 其中 `province_id` 和 `city_id` 分别是表单项的 name 值,`/api/province` 和 `/api/city` 是获取数据的接口地址。 2. 在控制器中定义接口方法,用于获取城市数据,如下: ```php namespace app\admin\controller; use think\Controller; class ApiController extends Controller { public function province() { $provinceList = db('province')->select(); return json($provinceList); } public function city() { $provinceId = input('get.province_id'); $cityList = db('city')->where('province_id', $provinceId)->select(); return json($cityList); } } ``` 其中 `province` 方法返回所有省份数据,`city` 方法根据省份 ID 获取该省份下的城市数据。 3. 使用 Chained Selects 插件实现下拉框联动,如下: ```js $(function() { // 省份下拉框改变事件 $('select[name="province_id"]').change(function() { var provinceId = $(this).val(); // 清空城市下拉框 $('select[name="city_id"]').empty(); // 动态加载城市数据 $.getJSON('/admin/api/city', {province_id: provinceId}, function(data) { $.each(data, function(i, item) { $('select[name="city_id"]').append('<option value="' + item.id + '">' + item.name + '</option>'); }); // 触发城市下拉框的 change 事件 $('select[name="city_id"]').trigger('change'); }); }); // 城市下拉框改变事件 $('select[name="city_id"]').change(function() { // TODO: 根据城市 ID 加载其他数据 }); // 初始化省份下拉框 $('select[name="province_id"]').trigger('change'); }); ``` 其中 `change` 事件监听省份下拉框的改变,根据选中的省份 ID 动态加载城市数据,并将加载的城市数据添加到城市下拉框中。同时,触发城市下拉框的 `change` 事件,以便根据城市 ID 加载其他数据。最后,通过触发省份下拉框的 `change` 事件,完成初始化操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cq林志炫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值