共计 2948 个字符，预计需要花费 8 分钟才能阅读完成。
如图，要做一个两级的下拉标签，可以用函数实现，但是太麻烦，而且不灵活，查阅资料之后发现，jsTree 很方便，下面介绍一下 jsTree 的入门，并附上代码。
阅读 jsTree 的官方文档之后，你会知道，它有很多实现方式，我下面使用的是 Ajax 请求，从后台获取 json 数据返回给 jsTree。
jsTree 的官网：https://www.jstree.com/
点击页面的 Download 按钮，下载并解压之后，将 dist 下的文件都复制到你自己的项目中
Html 代码
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> 通信监测 </title>
<script type="application/javascript"
src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="dist/js/themes/default/style.min.css" />
<script type="application/javascript" src="dist/js/jstree.js"></script>
</head>
<script>
$(function() {$('#routerip').jstree({
"core" : {
'data' : {
'url' : "router/selectConEqui",// 后台访问路径
'data' : function(node) {console.log(node);
return node;
}
},
"themes" : {
"ellipsis" : true
// 文字多时省略
},
"check_callback" : true
},
"types" : {
"default" : {"icon" : "false"},
"text" : {"icon" : "false"}
},
"plugins" : ["wholerow", "types", "themes"]
}).on('select_node.jstree', function(event, data) {//console.log(data.node);
}).on('changed.jstree', function(event, data) {//console.log("-----------changed.jstree");
//console.log("action:" + data.action);
//console.log(data.node);
});
});
function create() {
debugger;
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
currNode = ref.create_node(currNode, {"type" : "file"});
if (currNode) {ref.edit(currNode);
}
}
function rename() {var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
ref.rename_node(currNode, "rename node222");
}
function del() {var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
ref.delete_node(currNode);
}
function moveup() {var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
var prevNode = ref.get_prev_dom(currNode, true);
ref.move_node(currNode, prevNode, 'before');
}
function movedown() {var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
var nextNode = ref.get_next_dom(currNode, true);// 返回兄弟节点的下一个节点
ref.move_node(currNode, nextNode, 'after');
}
/**
* 获取当前所选中的结点
*/
function _getCurrNode() {var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
console.log(sel);
if (!sel.length) {console.log("----");
return false;
}
selsel = sel[0];
return sel;
}
</script>
</head>
<body>
<input type="button" value="create node" onclick="create();">
<input type="button" value="rename node" onclick="rename();">
<input type="button" value="del node" onclick="del();">
<input type="button" value="上移" onclick="moveup();">
<input type="button" value="下移" onclick="movedown();">
<div id="jstree1" style="width: 200px; background: #fff322"></div>
</body>
</html>后台代码
@ResponseBody
public void selectConEqui(Model model, HttpServletRequest request, HttpServletResponse response)
throws IOException {List<Map<String, String>> router = routerService.selectConEqui();
response.setContentType("application/json; charset=UTF-8");
response.getWriter().write(new Gson().toJson(router));
}数据库存储格式
sql 查询
<select id="selectMenu" resultType="java.util.HashMap">
select
<include refid="Base_Column_List" />
from menu
</select>返回前端的 json 格式为
注意几点：1. 根级 parent 的值固定设为“#”，其他的不能识别；
2.“parent”，“id”,”text“都是固定的命名，且都是小写，如果数据库字段是大写，可以 AS 为小写；
如果没有这样的数据库结构，也可以通过后台代码将数据改造为上述格式
更多详细的用法，可以参考官方网站
正文完
发表至： javascript
2019-06-05
