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=0; 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 == 1){
                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 == 1){
                  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

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

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

本文出处：帅气的程序员...

Bootstrap-tagsinput标系统使用心得

猜你喜欢