Symfony 4 Sonata admin 实现自定义字段搜索框 多对多关系

1 篇文章 0 订阅
1 篇文章 0 订阅

Symfony 4.3 sonata admin的select2实现搜索框

遇到的坑

新的工作环境,需要用到国外的php开发框架 Symfony 4

我们需要知道Sonata Admin是自带 Select2的,而且由于代码经过封装,本身是有一套东西的。

如果你的数据量不大,直接调用sonata的实体映射其实就满足需求了,这里我遇到的是,数据库有10几万数据,不可能一次性都查出来,肯定是需要直接去搜索数据库的。

而sonata自带的那个搜索框官网根本没有这方面的信息,加上Form的一些规则限制,搞的刚刚接触这个框架的我一脸懵逼。

可能是Symfony框架在国内的生态比较差,相关的教程或博客太少了。

我们不仅仅需要和数据库做简单的绑定,我们还需要和非数据库的数据源做绑定,以及复杂关系型数据库的绑定。

怎么解决

首先我们需要自己应该怎么去实现整个流程
我们需要用到一个表单类型 ChoiceType 用于修改数据时对搜索框的数据进行一个加载。

然后我们需要对这个表单类型设定的字段添加一些配置,multiple=>true 让这个表单类型支持多个值。
‘attr’ => [‘data-sonata-select2’ => ‘false’] 不让Sonata自动去给我们这个字段渲染Select2,如果让他去渲染,我们就什么事情都做不了。

 	 // 调用数据加载方法
     $doctrine= $this->registry;
     $em = $doctrine->getManager();
     $list=$em->getRepository(MyTable::class)
     ->findPoiList(explode('/',$_SERVER['REQUEST_URI'])[5]);
     // 通过截取当前页面的URL,查看是否是修改操作,如果是添加操作,将返回一个NULL
     // 如果是修改操作,将返回已添加的数据


 	 $formMapper
 		->add('features',ChoiceType::class,[
             'choices' => $list,   //如果有数据,将用于在Select2中显示
             'required' => false,
             'multiple' => true, //支持多选
             'attr' => [
                 'data-sonata-select2' => 'false' //禁止自动渲染Select2
             ]
         ])

这个地方的$list是我做的一个数据加载,用于修改。

实现接口,ajax请求

return [
         'msg' => 'ok',
             'total_row' => $count ?? 0,
             'page' => $page,
             'limit' => $limit,
             'results' => $arr,
         'pagination'=>['more'=>$page*10<$count]
     ];

这时我们需要一个数据源,用于搜索数据,这个数据源将以接口形式返回数据,我们完全按照Select2官网的要求进行一个配置,数据的来源不限制,这个地方我用的是 多对多关系 数据库查询的数据,可以根据你自己的需要配置,比如从其他程序的 API接口 或者 静态数据 根据你自己的需要配置数据源,最终返回的结果要像上边的结构。


<input id="search" type="hidden" name="search"/>
<label class="control-label required">Search</label>
<div id="mySelect2"></div>

<script>
var obj = $("#mySelect2").select2({
     ajax: {
         url: url,
         delay: 250,
         data: function (params) {
             var query = {
                 name: params,
                 limit: 10
             }

             // Query parameters will be ?search=[term]&page=[page]
             return query;
         }, processResults: function (data) {

 			 //这里是用于存储提交的搜索框多选信息的
 			 //我选择让他提交 以“,”分割的字符串 
             $("#search").val($("#mySelect2").val());
 			
             return {
                 results: data.results,
                 pagination: data.pagination
             };
         }
     },
     width: '100%',
     multiple: true,
     maximumInputLength: 30,
     closeOnSelect: false
 });
</script>

如果你看过Select2的文档,或者用过Select2,就知道该怎么用JS自己渲染。
而上述html 和js 代码如何插入到symfony的 twig文件中呢?
1.直接继承模板,在对应位置插入(太粗暴,不推荐)
2.通过setHelps方法,优雅的插入html和JS,并可以通过指定参数,访问不同的API接口数据源(推荐) 此处的htmlstr是我自定义的php方法,返回的是一个html字符串。

->setHelps([
             'features'=>$this->htmlstr("/api/url")
])

其实到了这里实现思路就基本完成了,至于里边的细节,比如隐藏自动生成的select,渲染好的select数据怎么写进去,怎么渲染选中的内容,怎么在控制器取到search的值,此处就跳过了。
如果需要完整的代码或者技术指导,可以回复留言。

评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

球也不懂还学Java

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值