双列选择器:doublebox-bootstrap.js和js实现在光标的位置 添加内容

https://www.jq22.com/jquery-info15984
以及如何在fastadmin后台实现的方法------表单插件

https://www.cnblogs.com/tengrl/p/10456811.html
下面这个更全一点
https://www.cnblogs.com/tengrl/p/10456811.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 在光标定位的地方插入文字的插件</title>
</head>
 
<body>
 
<div class="cont">点击我</div><br />
<br />
 
<textarea class="tarea" name="" cols="50" rows="15">
创作、游戏开发、运营管理等领域的精英人才,并拥有国内多家教育科研机构的战略合作资源。
  
  聚网科技以“为儿童提供真正健康有益的互联网产品”为己任,在产品研发过程中,注重将能力教育融入全新的游戏玩法,不断探索更加受儿童欢迎、更加有益于儿童的多元化娱乐模式,在行业里形成了“锐意进取、不断创新”的良好形象,也使得公司产品一直在行业内保持
</textarea>
 
 
 
<pre>
主要思路:
  当点击某个元素的时候,让一个输入框,插入指定的值。?
  1.当点击某个元素的时候,应该让输入框获取焦点,因为只有获得了焦点,才能在里面输入值;
  IE下:document.selection.createRange()
  FF下:var start = dthis.selectionStart;    //获取焦点前坐标
     var end =dthis.selectionEnd;    //获取焦点后坐标
  2.获取当前输入框焦点的位置
  3.将值插入到输入框焦点的位置;
  4.再次获取焦点;保证光标在输入框内
</pre>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//jQuery 插件
 
(function($){
    $.fn.extend({
        "insert":function(value){
            //默认参数
            value=$.extend({
                "text":"123"
            },value);
             
            var dthis = $(this)[0]; //将jQuery对象转换为DOM元素
             
            //IE下
            if(document.selection){
                 
                $(dthis).focus();        //输入元素textara获取焦点
                var fus = document.selection.createRange();//获取光标位置
                fus.text = value.text;    //在光标位置插入值
                $(dthis).focus();    ///输入元素textara获取焦点
                 
             
            }
            //火狐下标准   
            else if(dthis.selectionStart || dthis.selectionStart == '0'){
                 
                var start = dthis.selectionStart;
                var end = dthis.selectionEnd;
                var top = dthis.scrollTop;
                 
                //以下这句,应该是在焦点之前,和焦点之后的位置,中间插入我们传入的值
                dthis.value = dthis.value.substring(0, start) + value.text + dthis.value.substring(end, dthis.value.length);
            }
             
            //在输入元素textara没有定位光标的情况
            else{
                this.value += value.text;
                this.focus();   
            };
             
            return $(this);
        }
    })
})(jQuery)
</script>
 
<script type="text/javascript">
$(function(){
    $(".cont").click(function(){
        $(".tarea").insert({"text":"脚本之家"});
    });
});
</script>
 
</body>
</html>

dbbox的具体改进办法

https://blog.csdn.net/l1994m/article/details/81709767

ajax返回一些所有字段信息

// 简单的字段列表

    public function list()
    {
        $this->request->filter(['strip_tags', 'trim']);
        if ($this->request->isAjax()) {
           
            $result= Db::name('cms_fields')->where(['source'=>'diyform'])->column('id,title,name');
            $idname=[];
            foreach($result as $key=>$val){
                $idnametmp['roleId']=$val['id'];
                $idnametmp['roleName']=$val['title'].'_'.$val['name'];
                array_push($idname,['roleId'=>$idnametmp['roleId'], 'roleName'=>$idnametmp['roleName']]);
            }

            // halt($idname);
            return json_encode($idname,JSON_UNESCAPED_UNICODE);
        }
       
    }

引入dbbox.js

1.放在文件夹下WWWenyuan.compublicassetslibs
2.D:phpstudy_proWWWenyuan.compublicassetsjsackendcmsdiyform.js

define(['jquery', 'bootstrap','doublebox', 'backend', 'table', 'form'], function ($, undefined,undefined, Backend, Table, Form) {

//add函数中添加
 // 双向选择器
            $(document).ready(function(){
                // 获取当前的所有字段
                    var  realNameCode;
                    var  selectedLabelList;
                    $.ajax({
                        url:"cms/fields/list",
                        async:false,
                        type:"post",
                        dataType : "json",
                        contentType:"application/json",
                        success: function (data) {
                            realNameCode = JSON.parse(data); // JOSN.parse(data);将 字符串换转成JSON对象
                        },
                        error:function(data){
                            console.log("弹窗标签所有列表获取异常");
                        }
                    });
                    console.log(realNameCode);
                var demo2 = $('.demo').doublebox({
                nonSelectedListLabel: '备选字段',
                selectedListLabel: '当前模板字段',
                preserveSelectionOnMove: 'moved',
                moveOnSelect: false,
                nonSelectedList:realNameCode,
                selectedList:[],
                optionValue:"roleId",
                optionText:"roleName",
                doubleMove:true,
              });
              })

3.在diyform的add模板中添加

 <style>
        .ue-container {
              60%;
             margin: 0 auto;
             margin-top: 3%;
             padding: 20px 40px;
             border: 1px solid #ddd;
             background: #fff;
         }
    </style>
    <div class="ue-container">
        <select multiple="multiple" size="20" name="zdlist[]" class="demo">
        </select>
        </div>

如何获取post提交的数据

fastadmin如何调用其他类中的方法?

原文地址:https://www.cnblogs.com/cn-oldboy/p/13789779.html