【NSBD】——Jquery tagsinput标签

【项目需求】

选择任务处置下发人员——点击选择按钮，弹出组织机构树对话框——搜索符合条件的人员或部门，增加单个或多个——点击保存按钮——选择的人员显示到对应的文本框中（以逗号隔开）。

 

【修改内容】

将文本框中显示的人员以逗号隔开，换成标签的形式，就像我们写博客选择的标签一样。

 

【代码实现】

 

此功能由jquery的tagsinput插件完成。

 

首先，引入jquery.tagsinput.js和jquery.tagsinput.css两个文件。

 

其次，编写HTML中的body部分，两个input框，一个button按钮

<input id="tags_1"type="text" class="tags" value="111,222,333" />

<inputid="tags_2" type="text" class="tags"value="" />

<buttonid ="btn" οnclick="add()">添加</button>

其中，第一个文本框中的数据，相当于选择好的人员，而第二个文本框就相当于要显示的文本框。添加就相当于保存按钮。

 

然后，编写add事件和调用tagsInput方法。（这个方法在jquery.tagsinput.js中）

 

//批量添加

functionadd(){

$("#tags_1").val('');

vartexts = $("#tags_2").val();

vartags = texts.split(',');

for(i=0; i<tags.length; i++) {

$("#tags_1").addTag(tags[i],{focus:false,callback:false});

}

}

 

$(function(){

$('#tags_1').tagsInput({width:'auto'});//这样做的目的是，使tags_1能够变成标签。

});

 

【演示效果】

【总结】

        要不是项目有这个需求，自己还不知道这个东西怎么做呢，其实我也没有写几句代码，基本上都是人家写好封装好的，挺简单的。

       这段时间里，项目的代码都不能拷出来，总结技术知识，也是在回家后自己查查资料，写个小例子总结一下，同时查文档的速度也快了很多呀！