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


Posted in Javascript onSeptember 24, 2016

要实现的功能截图:

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

要求:

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这个数组,它是含有层级结构的,我们不需要输出层级结构,只需要输出里面的人员就行了,但是实践中发现一个人问题,数据解析了,鼠标点击输入框出现的下拉菜单中并没有出现我们刚才解析出来的数据,我们需要VUE的这个方法Vue.nextTick,延迟回调chosen初始化代码:
//延迟初始化chosen
Vue.nextTick(function () {
$('#zmail-select').chosen({
no_results_text: '没有找到该结果',// 当检索时没有找到匹配项时显示的提示文本
search_contains: true //从任意位置开始检索
});
});

然后出现了下面的效果:

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

接下来我们要做的就是选择人员右边相应的人员选中,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插件实现人员选择树搜索自动筛选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
深入理解js中this的用法
May 28 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
angular.js之路由的选择方法
Sep 24 #Javascript
用js写的一个路由(简单实例)
Sep 24 #Javascript
简单的js表格操作
Sep 24 #Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
关于php开启错误提示的总结
2019/09/24 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python科学计算之NumPy入门教程
2017/01/15 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python 实现性别识别
2020/11/21 Python
应届行政管理专业个人自我评价
2013/12/28 职场文书
自我评价的范文
2014/02/02 职场文书