Bootstrap-tagsinput标系统使用心得

最近工作中由于需求使用到了Bootstrap-tagsinput标系统，我的需求是：

1）能够从后台数据库获取标签信息展示到前端页面；

2）能够实现输入标签添加到后台，并ajax刷新页面；

3）能够实现点击删除变迁按钮，到后台进行逻辑删除，并ajax刷新页面；

但是网上大部分资料都是只展示标签，于是就自己查看官方文档，花了两天时间终于能够实现。

目前能够实现的功能

1）标签动态添加，添加完点击确定，自动刷新页面，更新到已有标签。

2）标签动态删除，点击x标识，会减去相应标签括号后面的积分1，当积分为0或者0以下时，不再显示标签。（删除是逻辑删除，后台数据库isdelete标识，显示使用条件查询）

先上一个展示效果：

1）后台数据库展示到前端页面：

  <script>
            // 预加载，
            var citynames = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('tag'),
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              prefetch: {
                        url: 'assets/citynames.json',  // 可以动态请求需要预加载的数据
                        filter: function(tags) {return tags}

                    }
                });

        // 展示标签
        citynames.initialize();
        var elt = $('#results_tag');  //通过id获取标签对象
        elt.tagsinput({
            itemValue: 'value',  // 展示标签必须有的字段
            itemText: 'text',  // 展示标签必须有的字段
            typeaheadjs: {
            name: 'citynames',
            displayKey: 'tag',
            valueKey: 'tag',
            source:
                $.get("/person/tag/?p="+{{ r.uuid }},function (data) {  // 展示标签的数据源，可以通过ajax动态加载
                        if (data){

                            results_json = jQuery.parseJSON(data.results_tag);

                            num = results_json.length;
                            for (var i=; i<num; i++)
                              {
                                  elt.tagsinput('add', {"value":results_json[i].tag_id, "text":results_json[i].tag +'('+results_json[i].probability +')', "continent": "Tag"});
                              }
                        }  //if
                    }) //ajax
          }
        });

        // 新增标签
        $('input[data-role="tagsinput"]').tagsinput('refresh',{  // 新增标签input
            typeaheadjs: {
            name: 'citynames',
            displayKey: 'tag',
            valueKey: 'tag',
            cancelConfirmKeysOnEmpty: true,
            source:citynames.ttAdapter()
            }
            });
        $('button[data-loading-text="Saving..."]').click(function () { // 新增标签按钮和ajax函数
            var tag = $('#tags').val();
            params = {'tag':tag,'person_id':{{ r.uuid }}};
            $.post("/person/add_tag/", params,function (data) {

                if (data.res == ){
                    location.reload()
                } //if
            }); // post
        }); // click

       // 删除标签
        elt.on('beforeItemRemove', function(event) {
            var tag = event.item;
           // Do some processing here
            var tag_id = tag.value;
            console.log(tag_id);
           if (!event.options || !event.options.preventPost) {
               params = {'tag_id':tag_id}
              $.post('/person/remove_tag/', params, function(response) {
                  if (response.res == ){
                      location.reload() // 刷新页面
                  }
              });
           }
    });

        </script>

①展示标签可以先获取input标签对象

var el = $('#id')

这种方式去获取input标签对象，然后对input标签对象进行操作。

②新增标签就不能通过上面那种方式获取input标签对象去操作，这是问题就来了，如果直接使用以下代码，会和展示标签重合，形成Input框内嵌input框

$("input").tagsinput('items')

这种效果就不是我们想要的了..

.

既不能通过赋值对象的方法去获取新增input标签，又不能直接使用input标签框获取，可把我急死了...搜寻许久，终于找到了办法，

可以给input标签赋值一个属性：data-role="tagsinput"，然后指定获取标签的时候可以这样：

$("input[data-role='tagsinput']").tagsinput('items')

这样就完美解决啦~

ajax视图函数：

   @login_required(login_url='/login/')
    def get_person_tag(request):
        """在tag_person表取出标签"""
        id = request.GET.get('p')
        (results_tag, count_tag) = getPersonTags(int(id))
        print('【查询到已有标签】：',results_tag)
        results_tag = json.dumps(results_tag)  # 将获取到的数据转换为json数据
        return JsonResponse({'results_tag':results_tag})

查询数据库：

  def getPersonTags(person_id):
        """获取tag_person表中tag,tag_id,probability(分数)"""
        conn = connectDB()
        with conn.cursor() as cursor:
            sql = "select distinct tag,ROUND(sum(probability),2) as probability,tag_id from tag_person WHERE person_id = '%s' and probability > 0" % person_id
            sql = sql + " GROUP BY tag DESC"
            count = cursor.execute(sql)
            results = cursor.fetchall()
            cursor.close()
            conn.close()
            return results, count

最终还是建议多看官方文档...

有什么不懂得可以多交流...

原文：https://blog.csdn.net/weixin_40475396/article/details/79046670
版权声明：本文为博主原创文章，转载请附上博文链接！