【JSTREE】 复选框默认选中【总结】
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>js Tree Test</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- CSS for js tree -->
<link rel="stylesheet" type="text/css" href="static/jstree/dist/themes/default/style.min.css">
<link rel="stylesheet" type="text/css" href="static/jstree/dist/themes/default-dark/style.min.css">
<!-- CSS for bootstrap -->
<link rel="stylesheet" type="text/css" href="static/bootstrap4.0/css/bootstrap.min.css"> <!-- JS for jQuery -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<!-- JS for js tree -->
<script type="text/javascript" src="static/jstree/dist/jstree.min.js"></script>
<!-- JS for bootstrap -->
<script type="text/javascript" src="static/bootstrap4.0/js/bootstrap.min.js"></script>
</head> <body>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="tree" id="jstree"></div>
</div>
</div> <script>
$(function(){
$('#jstree').jstree({
core : {
check_callback : true,
data : [
{ "id" : "1", "parent" : "#", "text" : "root"},
{ "id" : "2", "parent" : "1", "text" : "child 1" },
{ "id" : "3", "parent" : "1", "text" : "child 2"},
{ "id" : "4", "parent" : "1", "text" : "child 3" },
{ "id" : "5", "parent" : "1", "text" : "child 4" },
{ "id" : "6", "parent" : "1", "text" : "child 5" },
{ "id" : "7", "parent" : "1", "text" : "child 6"},
{ "id" : "8", "parent" : "3", "text" : "child 3-1" },
{ "id" : "9", "parent" : "3", "text" : "child 3-2" },
{ "id" : "10", "parent" : "3", "text" : "child 3-3"}
],
},
plugins : ["wholerow","checkbox"]
}).on("ready.jstree", function (e, data) {
//data.instance.open_all();
}).bind("loaded.jstree",function(e,data){
var checkId=[9];
jQuery('#jstree').jstree("open_all");
jQuery('#jstree').find("li").each(function(){
if(checkId == 'all'){
jQuery('#jstree').jstree("check_node",jQuery(this));
}else if(checkId instanceof Array){
for(var i=0;i<checkId.length;i++){
if(jQuery(this).attr("id") == checkId[i]){
jQuery('#jstree').jstree("check_node",jQuery(this));
}
}
}
});
});
});
</script>
</body>
</html>
一丶
1.该checkbox并不是真正的input-type='checkbox',而是图片，可以在jstree的包中看到这个图片，这也是比较通用的方式。
2.该页面放在SSM架构中实现的显示，在配置静态文件的时候遇到了一个问题：无法加载32.png和.gif文件
于是在web.xml文件分发器的前面加入了如下的配置：
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.png</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.gif</url-pattern>
</servlet-mapping>
网上有几种关于静态文件的加入方法，这种配置方法看起来有一些麻烦。把常用的后缀配置出来也还行。不想要的直接过滤掉。
二丶构建树的两种方式：
方式1：使用id,parent,text,icon等给出树的列表，parent节点将id设置为#
缺点：id和parent均必须唯一，不能有重复的key出现，如果重复，在使用plugins-checkbox时会出现错误勾选的情况。
方式2：使用text,children{}显示的把树形结构给出来，可以不设置id和parent，自动根据children的关系生成树。
缺点：需要根据数据库中的id和parent关系，在后台自己写嵌套方法或者递归将树形结构生成
结构如下：
为何不和方式1冲突，此处id和parent的命名不要出现
package com.ws.poi.user; /**
* @author Administrator
*
*/
public class JsTreeVo {
private int keyId;
private int pId;
private String text;
private String icon;
private JsTreeVo children;
private LiAttr liattr;
// private TreeState{opened:true,selected:true,disabled,true} TODO
public int getKeyId() {
return keyId;
}
public void setKeyId(int keyId) {
this.keyId = keyId;
}
public int getpId() {
return pId;
}
public void setpId(int pId) {
this.pId = pId;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public JsTreeVo getChildren() {
return children;
}
public void setChildren(JsTreeVo children) {
this.children = children;
}
public LiAttr getLiattr() {
return liattr;
}
public void setLiattr(LiAttr liattr) {
this.liattr = liattr;
} }
class LiAttr{
private int pId;
// TODO 其他 li的自定义属性 -同理 a_li属性也可以定义一个类来管理
}
生成List<JsTreeVo> treeList即可：结构需要自己写方法生成。
PS：checkbox已经占用了click_node.jstree,dbclick_node.jstree,change_node事件
如果需要处理checkbox被勾选和反选，可以使用这两个事件：
select_node.jstree(e,data)和deselect_node.jstree(e,data)来获取被选中和反选的节点
e.树对象，可以拿到这棵树的所有内容
data.树数据，也可以拿到树的内容
可以通过data.instance.get_selected();获取到当前被选中的行的id，然后做进一步的处理，这些只要有一定jquery和js基础的都能做到。
三丶一些技巧
1.使用浏览器的console.log打印树的结构
2.open_all方法有弊端，如果数据量比较大，树形结构比较大的时候不建议使用这个方法。这个方法效率不高。
可以使用get_selected和get_node(node)方法拿到这个节点写一个递归方法来展开需要展开的节点：open_node(node);
3.关闭树可以直接使用close_all
4.使用checkbox-plugins时，一方面是事件的冲突性，另外一方面是数据回显时比较搞笑：如果last_child_node没有被展开是无法通过get_checked()方法来获取这个选中节点的
此时就需要借助1.2.的建议写方法来展开指定节点再抓取选中的值，不要直接使用open_all方法。
5.其他的一些常用操作，多学习js和jquery类似的插件都可以很好的解决。
6.树形结构是有层次的，4.中无法直接通过get_checked方法获取勾选的节点的根本原因就如此。使用open_node的时候也是需要递归展开节点，从root到末尾children。
7.通过get_bottom_checked()方法获取未展开却被勾选了的子末尾节点。
8.是否可以通过，get_parent和get_children回显数据呢？
没有get_children方法，可以使用：
$("#jstree2").jstree(true).get_node("j2_3")，该方法可以获取到未展开的节点。
$("#jstree2").jstree(true).get_node("j2_2").children_d，该方法能拿到该节点下的所有子节点，不区分层级。
由于树形结构未展开，所以是无法从children_d中直接获取到html的dom对象。
但是，可以拿到每一层的文本内容，可以先将这部分文本内容保存起来，找到需要勾选的节点，在open操作的时候把这些id选中。
下面成功绕过了手动调用open_node、open_all方法：
$('#jstree2').jstree({
core : {
check_callback : true,
data : [
{ "text" : "root"},
{ "text" : "A","children":[{ "text" : "A-1","children":[{ "text" : "A-1-1" },{ "text" : "A-1-2"}]},{ "text" : "A-2","children":[{ "text" : "A-2-1" },{ "text" : "A-2-2"}]}] },
{ "text" : "child 2"},
{ "text" : "child 3","children":[{ "text" : "child 5" },{ "text" : "child 6"}]},
{ "text" : "child 4","children":[{ "text" : "child 5" },{ "text" : "child 6"}]},
{ "text" : "child 5" },
{ "text" : "child 6"},
{ "text" : "child 3-1" },
{ "text" : "child 3-2" },
{ "text" : "child 3-3"}
],
},
plugins : ["wholerow","checkbox"]
}).on("ready.jstree", function (e, data) {
//data.instance.open_all();
}).bind("loaded.jstree",function(e,data){
/** 以下操作成功避开了手动调用open_node方法*/
// 测试数据 - 需要回显的数据结构
var check = ['A/A-1/A-1-2','A/A-2/A-2-1'];
// 所有节点id列表
var nodes = data.instance._model.data;
//console.log(nodes);
var $tree = $("#jstree2").jstree(true);
var p_length = 0;
var rv = "";
var val = "";
var node_id = "";
for(var i in check){
val = check[i];
$.each(nodes,function(index,element){
node_id = index;
p_length = $tree.get_node(node_id).parents.length;
// 过滤掉不足3层的节点
if(p_length==3){
var p_2 = $tree.get_parent(node_id);
var p_1 = $tree.get_parent(p_2);
// 1.2.3层文本
rv = $tree.get_node(p_1).text
+ "/" + $tree.get_node(p_2).text
+ "/" + $tree.get_node(node_id).text;
// 过滤掉不满足条件的文本
if(rv==val){
//console.log(rv);
// TODO 以下操作能选上，但是却无法将父节点半选
//$tree.get_node(node_id).state.selected=true;
// 调用check_node方法勾选满足条件的文本
$("#jstree2").jstree("check_node",node_id);
}
}
});
}
});
下面是两种实现的效果图：
四丶关于异步
后续补充
五丶关于添加菜单操作
后续补充
本文代码量太少，工作性质约束，没办法把代码搬迁过来，如有疑问，欢迎评论交流。
【JSTREE】 复选框默认选中【总结】的更多相关文章
- freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式
今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
- yii2.0复选框默认选中
<?php $model->node = array('0','2') ;?> <? echo $form->field($model,'node')->che ...
- element-ui v-table 复选框默认选中
<el-table ref="refTable" :data="list" v-loading="listLoading" eleme ...
- 复选框的全选+全不选+ajax传递复选框的value值+后台接受复选框默认值
1.html代码 <!--全选框/全不选--> <input type="checkbox" name="all" id="all& ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- 【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- JQuery Mobile - 修改复选框的选中状态无效解决办法！
今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...
随机推荐
- python学习之路 第三天
1.set集合:去掉重复字段 set.difference()找出不同并创建一个新的集合,不改变原来集合: set.difference_update() 改变原来集合,剔除掉括号内容: set.di ...
- vue.js 第三课
1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle 1.vue.js都是通过 var vm=new V ...
- java多线程通信 例子
package com.cl.www.thread; public class NumberHolder { private Integer number = 0; // 增加number publi ...
- 搭建web框架手册（一）
昨天听完永康对EASYUI的介绍后终于明白了优秀的UI框架就是第一生产力,过去自己一直沉浸在后端代码中,完全忽视了前端的生产力交互,总觉得界面漂亮就是生产力,其实大错特错,真正的具有高效生产力的界面其 ...
- Redux原理（一）：Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。
× 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...
- NPOI的操作
public async Task<MemoryStream> ExportExcel(IList<fuquestionbank> _list, string pId, str ...
- UVA232
这只是大概的雏形. 步骤就是:1输入网格,2给网格里的起始格编序号,3输出所有字母,前面要加序号 #include<stdio.h> #include<ctype.h> #in ...
- [虚拟机]Virtual Box的使用--共享文件夹
最近为系统测试使用了虚拟机,VM太卡,所以使用了VBox,运行效果还不错 为了主机和客户机之前方便进行数据传输,一般采用文件夹共享的方式(当然,可以直接拖拽) 1,直接拖拽,需要做如下设置 主要的是“ ...
- 深入浅出 Redis client/server交互流程
综述 最近笔者阅读并研究redis源码,在redis客户端与服务器端交互这个内容点上,需要参考网上一些文章,但是遗憾的是发现大部分文章都断断续续的非系统性的,不能给读者此交互流程的整体把握.所以这里我 ...