`

jstree碎知识

 
阅读更多
<link rel="stylesheet" type="text/css" href="#{config.context}/assets/global/plugins/jstree/dist/themes/default/style.min.css"/>

<script src="#{config.context}/assets/global/plugins/jstree/dist/jstree.js"></script>

	<div class="portlet-body form">
			<form id="saleForm" class="form-horizontal">
				<input type="hidden" id="checkboxSaleIds" name="checkboxSaleIds" />
				<div class="modal-body">
					<div class="row">
						<div class="form-group">
							<input type="hidden" id="selectedSalesMan" name="selectedSalesMan" />
						</div>
						<div class="scroller" style="height:400px;">
							<div id="jstree" class="tree-demo"></div>
						</div>
			
					</div>
				</div>
				<div class="modal-footer">
					<div class="col-md-offset-4 col-md-3">
						<button type="submit" class="btn blue " >
							<i class="fa fa-check"></i>  确定
						</button> 
						<button type="button" data-dismiss="modal" class="btn btn-default" >
							<i class="fa fa-times"></i>  关闭
						</button>
					</div>
				</div>
			</form>
		</div>

//选中指定的节点(3中方式)
// 3 ways of doing the same thing
$('#jstree').jstree(true)
  .select_node('mn1');//mn1为节点ID
$('#jstree')
  .jstree('select_node', 'mn2');//mn2为节点ID
$.jstree.reference('#jstree')
  .select_node('mn3');//mn3为节点ID

//获取值: 
function getSelectedValue() {  
    var nodes = $.jstree.reference($("#JsTree")).get_selected();  
    $.each(nodes, function(i, n) {  
          
    });  
}  
function getMenuIds(){   
    
 //取得所有选中的节点,返回节点对象的集合
      var ids="";
      var nodes=$("#JsTree").jstree("get_checked")搜索; //使用get_checked方法 
      $.each(nodes, function(i, n) { 
      ids += $(n).attr("id")+",";
      }); 
      alert(ids);

}
//jsTree想实现点击父节点的文字展开, 而不是点左边的下来按钮
//答案1
刚好我也碰到这个问题。bind("select_node.jstree", function (event, data) {   //myThis.id 是jstree的Id,还有你必须设置每个节点的id			 $('#' + myThis.id).jstree("toggle_node", "#"+data.rslt.obj.attr("id"));       })


正好我用到了$("#jstree的ID").jstree("toggle_node", $(this).parent());

$.jstree.reference("#authoriytysTree").is_parent(nodeId);//判断是否为父节点
$.jstree.reference("#authoriytysTree").get_node(nodeId);//获取节点对象
//取半选节点ID
$("#authoriytysTree li").has("i[class*='jstree-undetermined']").each(function(){
            		codeIds+=","+$(this).attr("id");
            		console.log(codeIds);
            	});

//取消全部选择项
$("#authoriytysTree").jstree("deselect_all");
分享到:
评论

相关推荐

    jsTree中文文档

    **jsTree 中文文档概述** jsTree 是一个流行的JavaScript库,用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据,如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作,包括点击、拖放、...

    jsTree中文api

    **jsTree API详解** jsTree 是一个流行的JavaScript库,用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API,使得开发者能够方便地实现树形结构的各种功能,如添加、删除、修改节点,以及节点的移动...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    jsTree.v.1.0中文文档

    **jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...

    jsTree大集合学习资料

    【jsTree大集合学习资料】是一份综合性的学习资源,主要涵盖了jsTree这款JavaScript库的各个方面。jsTree是一款强大的开源库,专用于在Web应用程序中创建交互式树型视图。它提供了丰富的功能,包括数据加载、节点...

    JsTree 最详细教程及完整实例

    **JsTree 全面解析与实战指南** JsTree 是一个基于 JavaScript 的开源库,用于创建交互式的树形数据结构。这个强大的工具适用于多种用途,包括文件管理、菜单系统、数据可视化等。它提供了丰富的功能,如多选、拖放...

    jsTree 很好用的动态加载数

    **jsTree 概述** jsTree 是一个基于 JavaScript 的开源库,专为创建交互式的树状视图而设计。它提供了丰富的功能,如动态加载、增删节点、拖放操作等,使得在网页中实现复杂的数据结构展示变得简单。jsTree 支持...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。...在实际开发过程中,理解并运用这些知识点将有助于构建高性能、易维护的移动端js Tree实现。

    jsTree JAVA例子

    **jsTree 与 Java 整合详解** jsTree 是一个流行的 JavaScript 库,用于创建交互式的树状视图。它提供了丰富的功能,如节点的拖放、搜索、上下文菜单等,广泛应用于网站的导航菜单、文件管理器、数据结构展示等领域...

    jsTree操作 jsTree插件简介

    **jsTree 操作详解** jsTree 是一个基于 jQuery 的开源 JavaScript 库,用于创建交互式的树状视图。它提供了一种优雅的方式来呈现和操作数据结构,尤其适用于构建树形菜单或目录。jsTree 支持多种功能,包括动态...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    **JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...

    jsTree动态tree

    **jsTree动态tree详解** jsTree是一款基于JavaScript的开源库,专门用于构建交互式的树形视图。在网页开发中,树形结构常用于展示层级关系的数据,如目录、组织结构或导航菜单等。jsTree提供了丰富的API和可定制的...

    JsTree静态例子

    **JsTree静态例子详解** JsTree是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建可交互的目录结构、文件管理系统或者组织复杂的分类信息。本篇文章将深入探讨如何...

    jstree目录树控件

    **jsTree:构建交互式目录树的利器** jsTree是一款完全用JavaScript编写的开源库,专为实现跨浏览器的树状视图而设计。它在Web应用中扮演着目录树控件的角色,允许用户以树形结构展示数据,极大地提高了用户体验。...

    JsTree 实例使用

    **JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...

    JStree(最全)

    **JStree 全面解析** JStree 是一个基于 JavaScript 的开源库,专用于创建交互式的树形数据结构。这个强大的工具支持多种操作,包括拖放、搜索、多选、加载异步数据(AJAX)等,广泛应用于网页中的菜单、文件浏览器...

    jstree用法大集合

    **jstree用法大集合** `jstree` 是一个强大的JavaScript库,用于创建交互式的树状视图。在ASP.NET开发中,它经常被用来构建网站的导航菜单、组织结构图或文件系统浏览器。这个集合包含了多个压缩包文件,每个都提供...

    jsTree实例,jsTree实例

    **jsTree 实例详解** jsTree 是一个流行的 JavaScript 库,专门用于创建、操作和展示交互式的树型结构。在 Web 开发中,它常被用于构建目录结构、组织数据或者构建导航菜单。jsTree 提供了丰富的 API 和多种主题,...

    jsTree菜单大集合

    通过这个"史无前例的大集合",你不仅能够掌握jsTree的基础知识,还能探索其高级特性,提升你的前端开发技能。"好东西"的确值得珍藏,对于任何需要构建树形菜单的开发者来说,这都是一份宝贵的资源。无论是初学者还是...

    jsTree树形菜单

    **jsTree:JavaScript实现的树形菜单** jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据...

Global site tag (gtag.js) - Google Analytics