基于chosen插件实现人员选择树搜索自动筛选功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于chosen插件实现人员选择树搜索自动筛选功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4747字，纯文字阅读大概需要7分钟。

内容图文

要实现的功能截图：

要求：

1、点击输入框可以根据拼音自动筛选数据，并且标记已经选择的数据，没有结果的时候提示，相应的更新左边树状态

2、勾选树右侧树的复选框左侧出现相应的内容

我用到的插件

vue+chosen+ztree

vue：组件化的MVVM库

chosen:单选列表和多选列表增强

ztree：基于jquery的树插件

分析

chosen插件已经可以实现1中的大部分效果，我们只需要预先获取数据，实现左右两侧一 一对应，最后点击发送获取最终的数据集合ID

具体实现

chosen需要的html结构

//只需要提供包含数据的select标签即可，该select默认隐藏，chosen依据该数据构建新的html结构
<select name="dept" style="width:150px;" id="dept" class="dept_select" multiple="multiple"> 
<option value="部门1">部门1</option>
<option value="部门2">部门2</option>
<option value="部门3">部门3</option>
</select>
//chosen初始化
$(function(){
$('.dept_select').chosen({
no_results_text:'没有结果',
allow_single_deselect:true
});
});

这样要求1中的大部分效果就实现了，因为我们的数据是从后台获取的，因此我们需要从后台获取select的option的值，这里采用vue解析数据，相应的html结构和js为：

//基于vue解析的html结构
<select data-placeholder="选择发件人" class="chosen-select form-control" tabindex="-1" multiple="multiple">
<template v-for='key in zmailTree'>
<option v-for='item in key.userList' value='{{item.id}}'>{{item.name}}</option>
</template>
</select>
//vue实例
var zmailForm=new Vue({
el:'#zmail-form',
ready:function(){
var that=this;
var getToken=$.cookie('dcValidate');
$.ajax({ 
type:'get',
async:false,
url:'后台数据接口地址',
dataType: "json", 
success: function(msg){
that.$set('zmailTree', msg);
}
});
},
data:{
zmailTree:[]
}
});
//通过vue获取后台数据，将json数据赋值给zmailTree这个数组，它是含有层级结构的，我们不需要

然后出现了下面的效果：

接下来我们要做的就是选择人员右边相应的人员选中，chosen提供了一个change方法，该方法当选择的值发生改变时触发，有这个方法我们就很容易根据select值的变化来触发事件

$('select.chosen-select').on('change', function(){
// 用户改变了选择，快快处理
});

我们同样要写到Vue.nextTick中

//延迟初始化chosen
Vue.nextTick(function () {
$('#zmail-select').chosen({
no_results_text: '没有找到该结果',// 当检索时没有找到匹配项时显示的提示文本
search_contains: true //从任意位置开始检索
});
$('#zmail-select').on('change', function(){
//用户改变了值之后作如下处理
var treeObj = $.fn.zTree.getZTreeObj("zmail-tree");
treeObj.expandAll(true);//展开所有树节点
treeObj.checkAllNodes(false);//清空所有树节点
$("#zmail-select option:selected").each(function(i,obj){
var node = treeObj.getNodeByParam("id", obj.value, null);
treeObj.checkNode(node, true, true);
});
});
});
//输入框的值只要发生了改变我们就获取树的目标id，展开所有子节点，并且清空树的所有选中状态，因为输入框中的值不止一个因此我们要做一个循环，使用ztree的方法getNodeByParam（根据给定的参数查找节点）和checkNode（控制对应节点的选中或者非选中操作）

到这选取输入框数值让右侧树种对应的人员选中就实现了，下面来实现勾选右侧树中的人员来改变输入框中的数据

//树的html结构,不要忘记写ztree这个class，否则不显示数据
<ul class="ztree" id="zmail-tree">
</ul>
//树初始化代码js
//人员树基本设置
var zmailTreeSet={
view:{
dblClickExpand:false
},
async:{
enable:true,
type:'get',
url:'服务器数据地址',
},
data:{
simpleData:{
enable:true,
idKey:'id',
pIdKey:'parentId'
},
key:{
children:'userList'
}
},
check:{
enable:true,
chkboxType:{'Y':'s','N':'s'}
},
callback:{
onCheck:zmailCheck
}
};
function zmailCheck(){
//这里处理输入框的数据
}
//初始化人员树
$.fn.zTree.init($('#zmail-tree'),zmailTreeSet);

实现的思路：

（1）首先获取点击复选框的节点，

var zmaObj = $.fn.zTree.getZTreeObj(treeId);//getZTreeObj插件方法，获取目标ID
var zmaNodes = zmaObj.getCheckedNodes(true);//getCheckedNodes获取选中的所有节点，此处为集合

（2）其次清空select中的选中状态，将其恢复到初始状态，

$("#zmail-select option").each(function(j,obj){
obj.selected='';
});

（3）根据勾选的节点数量循环使select中的相应option选中，此处判断的关键是数据id

for(var i = 0;i < zmaNodes.length; i++){
if(typeof(zmaNodes[i].userList) == 'undefined'){//如果该节点的userList属性为空说明不是父节点，存取它的值，如果不为空则跳过
//不写判断，直接使用勾选的树的数据的ID来进行选择，使其属性select改为selected
$("#zmail-select option[value="+zmaNodes[i].id+"]")[0].selected='selected';
}
}

（4）更新select option列表

//循环外更新select列表
$("#zmail-select").trigger('chosen:updated');

以上所述是小编给大家介绍的基于chosen插件实现人员选择树搜索自动筛选功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的基于chosen插件实现人员选择树搜索自动筛选功能全部内容，希望文章能够帮你解决基于chosen插件实现人员选择树搜索自动筛选功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端