在学习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 实现树形结构”.
分享到:
相关推荐
在本教程中,我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先,zTree.js 提供了丰富的 API 和配置选项,使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时,我们需要提供 ...
这通常通过设置zTree的配置参数来实现,例如设置`check.enable`为`true`启用复选功能,然后通过`check.chkStyle`设置为`radio.type`或`checkbox.type`来切换单选或多选模式。 在实际应用中,"数据可以是固定数据或...
这个简单Dome提供了一个快速入门的例子,展示了如何在网页中集成JsTree,并实现多选、单选、添加和删除节点等功能。下面将详细介绍JsTree的核心特性以及如何与Bootstrap结合使用。 首先,JsTree是一个基于jQuery的...
在jstree的core里加入 “multiple”: false, 注意是写在core 如下所示 'plugins': ["wholerow", "checkbox", "types"], 'core': { "multiple": false,//单选 "themes": { "responsive": false }, 如果只选择子...
总的来说,EXT TREE扩展CHECKBOX JS是一项实用的功能,它使得EXT JS的树形组件能够更好地满足多选和交互的需求,适用于那些需要用户对层次结构数据进行选择的应用场景。通过深入理解并利用`Ext.tree.TreeCheckNodeUI...
eleTree提供了单选和多选功能,并且内置了搜索功能,使得用户能够更高效地在大量数据中定位目标。 ### 一、eleTree简介 eleTree是基于Layui框架的一个扩展组件,它以树形结构展示数据,支持多种交互操作,包括展开...
`layui`和`ztree`这两个工具结合,可以实现一个功能强大的下拉树组件,支持单选和多选,大大提升了用户体验。本文将详细介绍如何利用`layui`和`ztree`来构建这样的组件,并探讨其关键技术和应用场景。 `layui`是一...
在Z-Tree中,CheckBoxTree可能被用来设计实验任务,让用户在多个可选选项中进行多选或单选。例如,研究人员可以创建一个树状结构来表示不同的决策路径,用户通过勾选复选框来表达他们的选择。Z-Tree的这种功能使得...
在这个“jsTree例子3-UI-plugin”中,我们将深入探讨jsTree的UI插件,它是如何增强树形结构的外观和用户体验的。 **1. UI 插件的引入** 在jsTree中,UI插件是默认启用的,但为了确保其功能正常工作,我们需要在初始...
- 配置jsTree选项,例如设置主题、启用多选或单选、定义异步加载等。 ### 3. 自定义配置和扩展 jsTreeSelect允许通过配置对象进行高度定制,你可以设置各种选项来改变树的外观和行为。例如: - `core`: 设置基本...
文章中提到的实现全选、单选以及全选与单选之间的联动逻辑,这是通过在Vue实例的`data`中维护一个选中状态的数组,并在事件处理中更新这个数组来实现的。全选操作通常是一个遍历所有节点的操作,而单选则是更新某个...
总结来说,动态带复选框和单选框的Tree是结合了前端技术和后端处理的一种交互式界面组件,通过JavaScript库(如dtree.js)和CSS样式(如dtree.css)实现动态加载和样式控制,而Java和JSP则处理服务器端的数据和逻辑...
它结合了JavaScript和CSS,提供了丰富的配置选项和功能,如多选、单选、部分选以及全选功能。下面我们将详细探讨如何实现ZTree的这些功能。 首先,ZTree的核心是JavaScript,它基于jQuery库,因此在使用前需确保...
在网页开发中,交互性和用户体验是至关重要的元素,而JavaScript(简称JS)作为客户端脚本语言,为实现这些功能提供了强大的支持。在这个话题中,我们将重点探讨两种常用的JS控件:dtree和dtree_checkbox。它们都是...
3. 多选模式:实现CheckBox的多选逻辑,包括全选、反选、单选、多选等功能。 4. 展开/折叠:支持节点的展开和折叠,用户可以控制查看的层级。 5. 事件处理:监听用户对节点的操作,如点击、拖拽、选择等,并触发相应...
5. **JS文件直接调用**:描述中的“js文件可以直接调用”意味着提供的代码资源可能包含了一套完整的EXT树选择和撤销实现,可以直接引入到项目中使用,无需从头编写这部分逻辑。 在实际应用中,开发人员需要根据具体...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,...
单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...