chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图:
要求:
1、点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态
2、勾选树右侧树的复选框左侧出现相应的内容
我用到的插件
vue+chosen+ztree
vue:组件化的MVVM库
chosen:单选列表和多选列表增强
ztree:基于jquery的树插件
分析
chosen插件已经可以实现1中的大部分效果,我们只需要预先获取数据,实现左右两侧一 一对应,最后点击发送获取最终的数据集合ID
具体实现
chosen需要的html结构
//只需要提供包含数据的select标签即可,该select默认隐藏,chosen依据该数据构建新的html结构
部门1
部门2
部门3
//chosen初始化
$(function(){
$('.dept_select').chosen({
no_results_text:'没有结果',
allow_single_deselect:true
});
});
这样要求1中的大部分效果就实现了,因为我们的数据是从后台获取的,因此我们需要从后台获取select的option的值,这里采用vue解析数据,相应的html结构和js为:
//基于vue解析的html结构
{{item.name}}
//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提供了一个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,否则不显示数据
//树初始化代码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 jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能相关推荐
- jquery ajax动态模糊查询插件
html代码如下: <div id="select_model"><div style="width: 150px;line-height: 24px& ...
- 基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
- jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能
http://www.jsfoot.com/jquery/items/2011-09-27/209.html
- 表格控件DHTMLX Spreadsheet 5.0版本重大更新,新增搜索和过滤数据、合并单元格、自动宽度功能
DHTMLX Spreadsheet是用纯JavaScript编写的开源电子表格小部件,可让您快速在网页上添加类似于Excel的可编辑数据表.高度可定制的JavaScript电子表格组件,具有优雅的M ...
- python自动抢单_【Python成长之路】基于sikuli jar包,实现淘宝自动抢单功能(1)...
[写在前面] 记得节前,西哥问我能不能帮忙写个淘宝自动抢单的功能.其实之前就有提到过sikuli IDE工具,可以很方便地实现图形化自动化,只是当时并没有真正用python实现. 因此刚好借这个机会, ...
- 基于51单片机的智能太阳能充电器带自动断开功能proteus仿真原理图PCB
功能介绍: 0.本系统采用STC89C52作为单片机 1.LCD1602液晶实时显示当前检测的充电电压 2.当电压超过设定阈值时,继电器断开,停止充电,同时蜂鸣器报警,提醒充电完成 3.按键可切换界面 ...
- 物资信息管理系统(springboot+bootstrap+jquery+ajax适合才学完springboot的童鞋,基本的增删改查)
1.概述 本系统是基于Java设计的网页式开发项目,是一款用于物资管理人员对物资管理,其中包括对物资信息,出库物资信息,入库物资信息,物资信息余额等相关内容的管理,具有物资管理.用户管理.出库物资管理 ...
- AlphaGo制胜绝招:蒙特卡洛树搜索入门指南
作者 | int8.io 编译 | 张健欣 编辑 | Emily Chen AI 前线导读:本文是一篇关于蒙特卡洛树搜索的入门指南,介绍什么是蒙特卡洛树搜索及其各个细节的基本概念,然后通过一个简单的例 ...
- AlphaGo背后的力量:蒙特卡洛树搜索入门指南
我们都知道 DeepMind 的围棋程序 AlphaGo,以及它超越人类的强大能力,也经常会听到「蒙特卡洛树搜索」这个概念.事实上,蒙特卡洛树搜索是在完美信息博弈场景中进行决策的一种通用技术,除游戏之 ...
最新文章
- 关于64位 MS SQL 导入导出 Oracle 引发 ORA-06413 的解决方法
- 为什么数学无法给机器意识
- CSP认证201809-2	买菜[C++题解]:区间覆盖、pair、交集长度、右端点的min-左端点的max
- 如何迁移完整SQL数据库到另外一台服务器
- 谷歌浏览器32位版本安装包_Windows 10 OEM渠道告别32位版本 这意味着什么?
- Effective Java之注解优于命名模式(三十五)
- 黑马程序员—java基础总结1
- 边打工边研究数学 泸州“农民数学家”出版15本著作
- 各种锁的介绍、锁之间的区别
- java局部变量的描述正确的是_【Java入门课|这才是Java局部变量的正确使用方法,你真的会用这些吗】- 环球网校...
- ffdshow神奇的功能:视频播放时显示运动矢量和QP
- Java基础---Java---网络编程---TCP、UDP、UDP-键盘录入方式数据、Socket、TCP复制文件、UDP-聊天
- OpenLayers geojson 进行展示矢量标签展示
- 微信公众号html教程,公众号排版简易教程
- 图纸怎么折?(A0,A1,A2,A3の图纸如何折成A4大小)
- 用mysql做宠物商店项目_使用Java实现数据库编程 项目(宠物商店)
- 类抽屉问题的C++解决
- SVG_37_六一儿童节快乐-路径移动-火焰文字
- 砍价永远差一刀?拼多多法庭上回复:小数点后有6位···
- 声纹识别概述(3)声纹识别系统