EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

在开发过程中遇到的小案例

效果展示

未处理之前的效果：

处理之后的效果：

需求详情

combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值，但是子节点的状态是选中的。
当所有子节点都选中时输入框只显示根节点或父节点的文本值
当根节点或者父节点下面的子节点没有全部选中时显示各个子节点的文本值

做法思路

在复选框中点击选中哪个节点就在输入框中显示哪个节点的文本值，因为在combotree(树形下拉框)中点击选中父节点时子节点的状态也是默认被选中的。

主要代码

$(function() {$('#cc').combotree({ method: 'get',url: 'combotree_data.json',    multiple: true,required: true,   onCheck: function(node, checked) {function getText(roots, checked, str) {roots.map(function(node) {if (checked[node.id]) {str.push(node.text);//选中节点后即退出循环} else if (node.children && node.children.length > 0) {getText(node.children, checked, str);}return node;});}//获取所有选中的节点var checkedList = $('#cc').combotree('tree').tree('getChecked');//获取所有的节点var roots = $('#cc').combotree('tree').tree('getRoots');var checked = {};checkedList.map(function(node) {checked[node.id] = true;//节点状态return node;});var str = [];getText(roots, checked, str);$('#cc').combotree('setText', str);//输入框设置值}});
})

EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值相关推荐

jQuery下拉式复选框
jQuery下拉式复选框 jQuery制作选择分类点击弹出下拉复选菜单,支持子菜单和主菜单多选效果.这是一款简单实用的复选框菜单选择代码. 演示地址下载地址
雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
jquery获取单选框复选框下拉框值
jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用.有什么疑问可以留言效果图: html代码: <!DOCTYPE html> <h ...
单选框-复选框重置的方法
问题描述希望对于填报表中的编辑风格为单选钮或复选框的单元格能够进行重置.如男.女单选框,在报表初始化展现时是两个单选钮都不点选,当选择一项后,无法将其重新改成都不点选的状态,需要能对单选钮的单元格进 ...
自学篇之-----纯css做的漂亮的单选框复选框样式
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <title>ch ...

EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

效果展示

需求详情

做法思路

主要代码

EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值相关推荐

最新文章

热门文章