基于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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 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的可变变量名需要的注意的问题
2013/06/20 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
Element Input组件分析小结
2018/10/11 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
前台文员的岗位职责
2013/11/14 职场文书
意向书范文
2014/03/31 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
健康证明
2015/06/19 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS