基于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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
传智播客学习之java 反射
Nov 22 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
Node.js的特点详解
Feb 03 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
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
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
详解Python文本操作相关模块
2017/06/22 Python
Python中文件的读取和写入操作
2018/04/27 Python
pytorch SENet实现案例
2020/06/24 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
一年级语文教学随笔
2015/08/14 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android