首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jsTree -当checkbox为ticket时调用函数,并获取所有已勾选的复选框

jsTree是一个基于jQuery的开源插件,用于创建交互式的树形结构。它提供了丰富的功能和选项,可以轻松地创建可折叠、可拖拽、可编辑的树形结构。

在使用jsTree时,可以通过设置checkbox属性为"ticket"来创建带有复选框的树形结构。当复选框为"ticket"时,可以通过调用函数来处理已勾选的复选框。

以下是一个示例代码,演示了如何使用jsTree来实现该功能:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jsTree Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
  <div id="jstree"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <script>
    $(function() {
      $('#jstree').jstree({
        'core': {
          'data': [
            {
              "text": "Node 1",
              "children": [
                {
                  "text": "Child 1",
                  "state": {
                    "checkbox": "ticket"
                  }
                },
                {
                  "text": "Child 2",
                  "state": {
                    "checkbox": "ticket"
                  }
                }
              ]
            },
            {
              "text": "Node 2",
              "children": [
                {
                  "text": "Child 3",
                  "state": {
                    "checkbox": "ticket"
                  }
                },
                {
                  "text": "Child 4",
                  "state": {
                    "checkbox": "ticket"
                  }
                }
              ]
            }
          ]
        },
        'plugins': ['checkbox']
      });

      $('#jstree').on('changed.jstree', function(e, data) {
        var checkedNodes = data.instance.get_checked(true);
        var checkedValues = [];

        for (var i = 0; i < checkedNodes.length; i++) {
          checkedValues.push(checkedNodes[i].text);
        }

        console.log(checkedValues);
        // 在这里调用你的函数,处理已勾选的复选框
      });
    });
  </script>
</body>
</html>

在上述代码中,我们首先引入了jsTree的CSS和JavaScript文件。然后,在一个具有唯一ID的div元素中创建了一个jsTree实例。通过设置checkbox属性为"ticket",我们创建了带有复选框的树形结构。当复选框状态发生改变时,通过监听changed.jstree事件,可以获取所有已勾选的复选框,并将其值存储在checkedValues数组中。

你可以根据实际需求,在console.log(checkedValues);后面调用你的函数,对已勾选的复选框进行处理。

关于jsTree的更多详细信息和用法,请参考腾讯云的产品介绍链接地址:jsTree - 腾讯云产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于MetronicBootstrap开发框架经验总结(2)--列表分页处理和插件JSTree使用

,是在页面准备完成后,通过Search脚本函数进行处理,处理时候,先序列号表单条件和分页条件信息,传入MVC控制器,获取对应列表数据,在界面上进行动态绑定即可完成整个处理过程了。...那么一般初始化函数就需要变化一下,如下代码所示 //带复选框JSTree初始化代码 $.getJSON(url, function (data) { control.jstree...', loadedfunction); }); 综合两者,我们可以进一步把JSTree控件初始化绑定提炼一个JS公共函数bindJsTree即可。...//以指定Json数据,初始化JStree控件 //treeName树div名称,url数据源地址,checkbox是否显示复选框,loadedfunction加载完毕回调函数 function...");//取消所有选中 //指定内容 $.getJSON("/RoleData/GetRoleDataList

2.4K50

JS插件Fancytree使用分享及源码分析

,相比普通jsTree,fancytree扩展功能非常多,除了checkbox选中,拖拽排序等基础功能,还有节点过滤,即时编辑,tabletree(在列表中展示jstree),各种键盘事件,以及各种皮肤样式...设置true,fancytree只有当前选中节点展开,其余收缩。 checkbox: 默认false。设置true,展示checkbox。 debugLevel:默认为2。...其中1单选,2多选(但是不会自动选上级),3多选(会自动根据选中节点状态来判断父节点状态),如果是多选的话,推荐换成3。...unselectableStatus:false会忽略父级全选,true自动,不受父级约束。...如果看源码的话,fancytree写还是挺庞大(毕竟差不多涵盖了jstree所能拥有的所有功能),fancytree.js总共大概5000+行(还有一个fancytree.all.js,包含了table

3K20
  • vue复选框实现组件支持单选和多选

    如果不加click事件,用复选框实现单选功能会有一个问题:只有取消上一次选中才能再选。 这个函数不难理解:判断是否单选组,把选中值改为最新值就可以了。..."; } return value; }, }, 2、代码解析 新增代码中多了很多逻辑: (1)、初始进入页面,会调用两个接口:一个是获取主页面的电器,另一个是获取【更多】中电器...(2)、进入页面后,会自动一些项,这是根据接口返回数据。 this....$nextTick(()=>{ this.getCaseById(curCaseId); }) 这里要在页面渲染完毕后,再。 (3)、在【更多】里电器,要同步更新到主页面。...这需要把【更多】里选中电器数据增加到主页面数据上,还要把值添加到主页面选项中。

    10510

    VBA专题10-23:使用VBA操控Excel界面之添加动态菜单

    下面展示了选择不同工作表菜单内容: 640.gif 保留自定义复选框条件 在上面的示例XML和VBA代码中,当用户在工作表Data中单击动态菜单中复选框后,复选框会相应地显示或者取消...然而,如果用户在设置复选框后,通过单击工作表标签激活其他工作表,那么动态菜单被无效,与菜单相关任何数据(包括复选框条件)将被销毁。...重新激活工作表Data,通过调用GetMenuContent过程会重新创建菜单,而复选框会重置其默认值(即,取消条件)。...End Sub 当用户单击该复选框,执行Checkbox1_Change并在Checkbox1Pressed变量中存储复选框状态。...现在,复选框能够保留其在动态菜单被无效并重新构建后状态。正如所看到Checkbox1Pressed模块级变量在过程调用之间保留其值。

    6.1K20

    每周学点测试小知识-WebDriver页面操作

    eleS.click() #判断是否 print(eleS.is_selected()) 复选框: 对于页面上复选框,与单选框类似,WebDriver提供了click函数进行选择,提供了is_selected...函数来判断是否被选择: #定位第一个复选框和第三个复选框 eleC0 = driver.find_element_by_id("checkbox0") eleC2 = driver.find_element_by_id...#反第三个复选框 eleC2.click() 下拉列表: 对于页面上下拉列表,WebDriver提供了Select类进行处理,它提供了select_by_index函数以index属性值来查找匹配元素选择...;select_by_value函数以value属性值来查找该option选择;函数select_by_visible_text以text文本值来查找匹配元素选择。...#将一行中所有的列元素保存在二维数组中 eleL.append(eleTemp) return eleL 调用: #获取表格中第2行,第3列数据 print(get_table_content

    1.4K20

    Python 图形化界面基础篇:添加复选框( Checkbutton )到 Tkinter 窗口

    Tkinter 复选框是一种用于选择一个或多个选项 GUI 元素。每个复选框通常表示一个选项,用户可以通过或取消复选框来选择或取消选择相应选项。...然后,我们创建了一个复选框对象 checkbox ,将其附加到 root 窗口,设置了复选框文本"选择我"。...然后,我们创建了一个复选框 checkbox ,将其附加到 root 窗口,设置了复选框文本"选择我"。...自定义复选框属性 除了基本复选框,你还可以自定义复选框外观和行为。你可以设置复选框文本颜色、背景颜色、字体、选择响应函数等。...,我们创建了一个自定义样式复选框,设置了字体、文本颜色、背景颜色、选中颜色和选中响应函数

    1.2K50

    Selenium2+python自动化19-单选和复选框

    四、复选框checkbox 1.选单个框,比如selenium这个,可以根据它id=c1直接定位到点击就可以了 ? 2.那么问题来了:如果想全部选上呢?...五、全部: 1.全部,可以用到定位一组元素,从上面源码可以看出,复选框type=checkbox,这里可以用xpath语法:....2.这里注意,敲黑板做笔记了:find_elements是不能直接点击,它是复数,所以只能先获取所有checkbox对象,然后通过for循环去一个个点击操作 六、判断是否选中:is_selected...() 1.有时候这个选项框,本身就是选中状态,如果我再点击一下,它就反了,这可不是我期望结果,那么可不可以它是没选中时候,我去点击下;它已经是选中状态,我就不点击呢?...2.判断元素是否选中这一步才是本文核心内容,点击选项框对于大家来说没什么难度。获取元素是否选中状态,打印结果如下图。

    2.2K80

    react结合redux实现一个购物车功能

    接着我们看一下功能,功能分析: 第一个功能,购物车中物品数量增加和减少功能 第二个功能,结算前需要要结算物品,实现单件物品选中与未选中状态,并且和全选复选框关联。...第三个功能,可以实现所有物品全选和取消全选,并且和所有物品选中复选框状态关联。 第四个功能,被要结算物品总件数和总价会根据物品实时计算显示。...getdata函数生成action对应着获取初始数据,我们将异步获取数据过程放到这个action中,得到数据对数据做处理。...DOM状态,调用dispatch触发selectall这个action,将获取复选框状态进行传递,reducer根据参数,修改商品是否选中。...我们定义一个all计算函数,这个函数返回结果计算商品是否被全部选中,我们将其和全选/反复选框进行绑定,store触发action,这个all函数会重新计算,这样的话,当我们点击单件商品选中状态,

    4.8K30

    JS如何实现全部复选框和不全选复选框

    前言 在一些后台管理系统里面,针对全选,复选框是一个很常见操作,复选框可以执行多项选择一种控件,有时,为了方便用户选中所有复选框,网页界面 会提供一个选中所有复选框功能,怎么实现一个复选框全部被选中效果呢...示例效果 allcheckbox 原生Js 实现全选效果,复选框是否被,是由它checked属性决定,因此,实现本例效果关键就是找到所有对应复选框,然后将其它checked属性设置...true或false实现全选或全不 如下实现一个简易全选功能 // 选择所有函数 function checkAll(c) { var arr = document.getElementsByTagName...,即this.checkAll if (this.checkAll) { // 全选被选中时候,循环遍历源数据,把数据每一项加入到默认选中数组中区...,是一个很常见基础业务实现 全选与全不复选框是否被,是由它checked属性决定,checked属性值若为true那么状态选中,若为false那么不选中 前端UI显示,与具体要向后端传入

    6.4K60

    【Java 进阶篇】JQuery 案例:全选全不选择添彩

    使用 JQuery 选择器选中需要进行全选和全不操作目标元素,通常是表格中多个复选框触发元素绑定事件,监听其点击事件。...在事件处理函数中,通过 JQuery 选择器选中目标元素,设置它们 checked 属性,实现全选和全不效果。 下面是一个基本实现示例: <!...= $(this).prop("checked"); // 设置所有复选框状态 $("table input[type='checkbox...selectAll,以及表格中所有复选框 table input[type='checkbox']。...... }); 在这个例子中,我们通过on()方法将点击事件委托给ul元素,然后在点击事件发生,判断点击是哪个子元素li input[type='checkbox'],执行相应操作。

    34840

    【愚公系列】2023年09月 WPF控件专题 CheckBox控件详解

    IsChecked:用于获取或设置复选框选中状态,其值类型Nullable,即既可以为true,也可以为false,还可以为null表示未选中。...IsChecked:用于获取或设置复选框选中状态,其值类型Nullable,即既可以为true,也可以为false,还可以为null表示未选中。...1.属性介绍 WPF中CheckBox控件属性包括: Content:控件文本内容。 IsChecked:控件状态,可以绑定到数据模型属性。...IsThreeState:控件是否支持三态选择。 Checked:状态下事件处理方法。 Unchecked:非状态下事件处理方法。...grid1.Children.Add(chk); } } private void BtnGet_Click(object sender, RoutedEventArgs e) { //获取窗口中所有

    57900

    C++ Qt开发:CheckBox多选框组件

    首先在主构造函数MainWindow中通过使用setTristate()将前三个半选框设置三态状态,使用setEnabled()将前三个选择框设置可选择状态,代码如下所示; #include "mainwindow.h...QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); // 启用三态状态设置可选择...} // 否则恢复默认值 else { ui->checkBox_c->setText("半选框3"); } } 至此,当选择不同选择框则可以切换到不同选择状态...,如下图; 接着来说说如何实现清除选择框状态,当用户点击清除状态,首先我们要做就是调用isChecked()来检查每一个选择框是否被选中,如果是则通过setChecked()将属性设置false...(false); ui->checkBox_h->setChecked(false); } } 读者选择选中全部子框按钮,则底部四个CheckBox将会联动,如下图所示;

    65510

    Android CompoundButton(抽象类按钮)、StringBuffer(字符串变量)「建议收藏」

    2、任务目标 目前正在学习这本书,在做P110页作业,发现问题: 作业要求,点击“进入主页”按钮,一次性获取近选取多选框text属性,然后Toast出来。...这个比较简单,按钮添加单击事件监听器,根据id判断CheckBox状态,如果isChecked,则获取其text属性,然后赋值给string,依次判断,依次string+,实现字符串连接效果,达到一次性获取选项目的...而我想法是每次选择:(1)就直接获取(省去按钮作用),然后Toast出来。(2)点选,一次性获取到 全部选项text属性,然后Toast出来。...3.思路:利用CompoundButton监控所有CheckBox判断某一个被选中,利用StringBufferappend方法,完成字符串连接。...),抽象复合按钮,因为是抽象类,所以不能直接使用,它派生类有CheckBox复选框)、RadioButton(单选框)、Switch(开关按钮),这些派生类都能使用CompoundButton属性和方法

    58520
    领券