YII2.0搭建的后台系统内部的@功能实现

最新推荐文章于 2023-04-16 19:01:18 发布

yingbao620

最新推荐文章于 2023-04-16 19:01:18 发布

阅读量5.7k

点赞数

分类专栏： yii2.0 前端

本文链接：https://blog.csdn.net/yingbao620/article/details/111246207

版权

yii2.0 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在PHP框架中下载并引入atwho.js和css文件，展示了如何通过Ajax异步获取用户列表并实现在textarea中输入@符号触发下拉选择。教程详细地展示了如何设置文本域、注册JS和处理数据格式。

摘要由CSDN通过智能技术生成

下载并引入atwho的js和css，$userUrl为列表查查询方法。

$this->registerCssFile('/css/jquery.atwho.css');
$this->registerJsFile('/js/jquery.caret.js');
$this->registerJsFile('/js/jquery.atwho.js');
$userUrl = Url::to (['user/select2']);

设定文本域

<?= $form->field($model, 'receivables_remark')->textarea(['rows' => 6,'placeholder'=>'@XXX可提醒对应责任人']) ?>

js实现输入@符号弹出名单下拉列表

$JS=<<<JS
 var usersArr = [];
 // 异步获取名单列表
 $.ajaxSettings.async = false;
 $.getJSON('{$userUrl}',function(data) {
     if (data){
         usersArr = getParamValues('text', data['results']);
     } 
 })
 $('#financialauditform-receivables_remark').atwho({
   at: "@",
   data: usersArr,
   limit: 200,
 });
 $('#hudcustomerdetail-receivables_remark').atwho({
   at: "@",
   data: usersArr,
   limit: 200,
 });
 // 处理获取到的名单列表的格式
 function getParamValues(name, arr) {
     var ret = []
     for (var i = 0, len = arr.length; i < len; i++) {
         ret.push(arr[i][name])
     }
     return ret
 }
JS;
$this->registerJs($JS);