fastadmin自定义通用搜索栏+省市区三级联动搜索 实例

作者: 开红大大 分类: 【项目笔记】 阅读量:872次 发布时间: 2019-08-08 18:04 百度未收录   

由于项目需要,要添加一个省市区三级联动的搜索功能。自己写搜索功能的话太麻烦,而普通搜索又满足不了我的需求,就需要自定义通用搜索。

不了解工具栏属性的请移步:一张图解析FastAdmin中的表格列表的功能

好了,进入正题,自定义通用搜索有两种方法:

案例一 单字段

JS:

代码:

    {field: '字段名', title: __('标题'),visible:false, searchList: function (column) {
          return Template('模板id', {});
     }}

HTML:

代码:

    <script id="agent" type="text/html">
        <div class="row">
            <div class="col-xs-12">
                 <div class="form-inline">
                    <input type="hidden" class="operate" data-name="agent_id" value="=" />
                    <input class="form-control selectpage" data-source="agent/index" data-field="name" type="text" name="agent_id" placeholder="请选择代理" />
                 </div>
            </div>
        </div>
    </script>

*:我这里是使用的下拉,其他的功能基本一样,必须要放在script标签里面,id="模板id"

此方法还是有一定的局限性,不支持自定义的字段,和一对一差不多。

关于有朋友说需要定义Template,其实不需要也是可以的:

案例二 模板页面

这种方法定义的是这一个页面,不是单个字段,想怎么玩就怎么玩,so easy!

JS:

注意位置,别搞错了(其实这些官方示例都有的)

HTML:

<script id="customformtpl" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:20px;">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <div class="form-inline" data-toggle="cxselect" data-selects="province,city,area">
                            <input type="hidden" class="operate" data-name="seller.province_code" value="Handle.="/>
                            <input type="hidden" class="operate" data-name="seller.city_code" value="Handle.="/>
                            <input type="hidden" class="operate" data-name="seller.district_code" value="Handle.="/>
                            <select class="province form-control" style="width: 33.3%" name="seller.province_code" data-url="ajax/area"></select>
                            <select class="city form-control" style="width: 33.3%" name="seller.city_code" data-url="ajax/area"></select>
                            <select class="area form-control" style="width: 33.3%" name="seller.district_code" data-url="ajax/area"></select>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <label class="control-label col-xs-4">推送范围</label>
                    <div class="col-xs-8">
                        <input type="hidden" class="operate" data-name="range" value="Handle.<="/>
                        <input type="number" autocomplete="off" class="form-control" name="range" value="" placeholder="请输入范围查询(公里)"/>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <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" formnovalidate="" 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>

*:form表单必须添加form-commsearch这个类,需要添加隐藏域,不然无法获取到数据,经过测试得出的,如有差异欢迎留下你的结论。

2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部