基于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 ie6兼容position:fixed实现思路
Apr 01 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
angular将html代码输出为内容的实例
Sep 30 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代码运行时间查看类代码分享
2011/08/06 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
详解YII关联查询
2016/01/10 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python与php实现分割文件代码
2017/03/06 Python
python的re正则表达式实例代码
2018/01/24 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python内存管理机制原理详解
2019/08/12 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python中re模块知识点总结
2021/01/17 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
旷课检讨书范文
2014/10/30 职场文书
出纳岗位职责范本
2015/03/31 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
优秀大学生申请书
2019/06/24 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL