`
zhanglun1225
  • 浏览: 56851 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jstree实现checkbox的多选和单选

    博客分类:
  • HTML
阅读更多

在学习jstree1.0的时候,学习实现checkbox的默认选中情况,其实在“plugins”中添加“checkbox”组件,就可以自动实现checkbox,若要实现默认选中,则需要在loaded.jstree时传入需要选中的id值,然后使用“$("#modeltree").jstree("check_node",$(this));”就看实现。代码如下:

 

checkbox默认选中

<script type="text/javascript">
	 	var obj = window.dialogArguments;//获取传递的参数
	 	$(function(){
	 		 //$.ajaxSetup({cache:false});//ajax调用不使用缓存
			  $("#modeltree").bind("loaded.jstree",function(e,data){//树形加载前判断哪个节点被选中
				  $("#modeltree").jstree("open_all");
				  $("#modeltree").find("li").each(function(){
					  if($(this).attr("id") == obj.nodeid){
						  //$("#modeltree").jstree("check_node",$(this));//jstree默认方法,如果默认的是父节点,那么子节点也会被选中
						  //自定义check_node方法
						  $("#modeltree").jstree("check_node",function(){
							  alert($("#"+obj.nodeid).attr("class"));
							  $("#"+obj.nodeid).removeClass("jstree-unchecked jstree-undetermined").addClass("jstree-checked");
						  });
					  }
				  });
			  }).jstree({
				"json_data": {
					"ajax" : {
						"async" : false,//设置是否异步,此处设置为同步
						"url" : "tree_data.jsp",
						"data" : function(n){//传递参数
							return{
								"id" : n.attr ? n.attr("id") : 0
							}
			  			}
			  		}
			  	},
			  	"plugins" : ["themes","json_data","checkbox","ui"]
			  }).bind("click.jstree",function(event){
				  var eventNodeName = event.target.nodeName;
				  
			  })
			  ;
			  //var obj = document.getElementById("modeltree");
			  //alert(obj.innerHTML);
			  //将内容复制到剪贴板中
			  //window.clipboardData.setData("Text", obj.innerHTML);
		});

 上面代码就可以实现checkbox默认选中的情况。

存在一个问题就是:

若使用“$("#modeltree").jstree("check_node",$(this));”让jstree来默认选中的时候,如果传入的是父节点的值,那么此父节点下的所有子节点都会被选中;传入的子节点,那么父节点会被半选中。

值得一提的是,此处jstree并不是使用<input type="checkbox">来实现checkbox,而是使用图片,通过不同的class来控制此图片的绝对定位来实现checkbox是否选中的效果。

若使用自己定义的check_node方法,可以实现单选的效果,但是在ie中有点问题,在firefox和chrome中都可以看到效果。(期待高手帮忙解决)

具体代码,参照“jstree v1.0 实现树形结构”.

分享到:
评论

相关推荐

    前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。

    在本教程中,我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先,zTree.js 提供了丰富的 API 和配置选项,使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时,我们需要提供 ...

    结合ztree的下拉框树形结构数据多选,单选

    这通常通过设置zTree的配置参数来实现,例如设置`check.enable`为`true`启用复选功能,然后通过`check.chkStyle`设置为`radio.type`或`checkbox.type`来切换单选或多选模式。 在实际应用中,"数据可以是固定数据或...

    Layui的eleTree树式选择器,分单选和多选,带搜索功能

    eleTree提供了单选和多选功能,并且内置了搜索功能,使得用户能够更高效地在大量数据中定位目标。 ### 一、eleTree简介 eleTree是基于Layui框架的一个扩展组件,它以树形结构展示数据,支持多种交互操作,包括展开...

    bootstrap-JsTree简单dome

    这个简单Dome提供了一个快速入门的例子,展示了如何在网页中集成JsTree,并实现多选、单选、添加和删除节点等功能。下面将详细介绍JsTree的核心特性以及如何与Bootstrap结合使用。 首先,JsTree是一个基于jQuery的...

    jstree单选功能的实现方法

    在jstree的core里加入 “multiple”: false, 注意是写在core 如下所示 'plugins': ["wholerow", "checkbox", "types"], 'core': { "multiple": false,//单选 "themes": { "responsive": false }, 如果只选择子...

    EXT TREE 扩展CHECKBOX JS

    总的来说,EXT TREE扩展CHECKBOX JS是一项实用的功能,它使得EXT JS的树形组件能够更好地满足多选和交互的需求,适用于那些需要用户对层次结构数据进行选择的应用场景。通过深入理解并利用`Ext.tree.TreeCheckNodeUI...

    layui+ztree下拉树,支持单选和多选

    `layui`和`ztree`这两个工具结合,可以实现一个功能强大的下拉树组件,支持单选和多选,大大提升了用户体验。本文将详细介绍如何利用`layui`和`ztree`来构建这样的组件,并探讨其关键技术和应用场景。 `layui`是一...

    CheckBoxTree

    在Z-Tree中,CheckBoxTree可能被用来设计实验任务,让用户在多个可选选项中进行多选或单选。例如,研究人员可以创建一个树状结构来表示不同的决策路径,用户通过勾选复选框来表达他们的选择。Z-Tree的这种功能使得...

    jsTree例子3-UI-plugin

    在这个“jsTree例子3-UI-plugin”中,我们将深入探讨jsTree的UI插件,它是如何增强树形结构的外观和用户体验的。 **1. UI 插件的引入** 在jsTree中,UI插件是默认启用的,但为了确保其功能正常工作,我们需要在初始...

    jsTreeSelect jquery 树形下拉菜单

    - 配置jsTree选项,例如设置主题、启用多选或单选、定义异步加载等。 ### 3. 自定义配置和扩展 jsTreeSelect允许通过配置对象进行高度定制,你可以设置各种选项来改变树的外观和行为。例如: - `core`: 设置基本...

    vue实现的树形结构加多选框示例

    文章中提到的实现全选、单选以及全选与单选之间的联动逻辑,这是通过在Vue实例的`data`中维护一个选中状态的数组,并在事件处理中更新这个数组来实现的。全选操作通常是一个遍历所有节点的操作,而单选则是更新某个...

    动态带复选框、单选框Tree

    总结来说,动态带复选框和单选框的Tree是结合了前端技术和后端处理的一种交互式界面组件,通过JavaScript库(如dtree.js)和CSS样式(如dtree.css)实现动态加载和样式控制,而Java和JSP则处理服务器端的数据和逻辑...

    实现ztree树形的js和css

    它结合了JavaScript和CSS,提供了丰富的配置选项和功能,如多选、单选、部分选以及全选功能。下面我们将详细探讨如何实现ZTree的这些功能。 首先,ZTree的核心是JavaScript,它基于jQuery库,因此在使用前需确保...

    dtree和dtree_checkbox(dtree复选框)

    在网页开发中,交互性和用户体验是至关重要的元素,而JavaScript(简称JS)作为客户端脚本语言,为实现这些功能提供了强大的支持。在这个话题中,我们将重点探讨两种常用的JS控件:dtree和dtree_checkbox。它们都是...

    DTree & CheckBox

    3. 多选模式:实现CheckBox的多选逻辑,包括全选、反选、单选、多选等功能。 4. 展开/折叠:支持节点的展开和折叠,用户可以控制查看的层级。 5. 事件处理:监听用户对节点的操作,如点击、拖拽、选择等,并触发相应...

    ext树的控制选择和撤销,可以直接使用

    5. **JS文件直接调用**:描述中的“js文件可以直接调用”意味着提供的代码资源可能包含了一套完整的EXT树选择和撤销实现,可以直接引入到项目中使用,无需从头编写这部分逻辑。 在实际应用中,开发人员需要根据具体...

    Ext js-2.0 带API

     再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    Ext js 教程大全

    再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS 4.2.0

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,...

    EXTJS 3.0中文版文档+实例

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...

Global site tag (gtag.js) - Google Analytics