bootastrapTable的配置参观作者的其他文章。
BootStrapTable的基础配置
一、先上图，是你想要的继续看
二、官网demo，这个在源码zTree_v3\demo\en\super的目录下面有
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {//这里挺多设置的，等下根据楼主的效果说明一下
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
//beforeClick: beforeClick,点击之前的事件
onClick: onClick点击事件
}
};
var zNodes =[
{id:1, pId:0, name:"Beijing"},
{id:2, pId:0, name:"Tianjin"},
{id:3, pId:0, name:"Shanghai"},
{id:6, pId:0, name:"Chongqing"},
{id:4, pId:0, name:"Hebei Province", open:true},
{id:41, pId:4, name:"Shijiazhuang"},
{id:42, pId:4, name:"Baoding"},
{id:43, pId:4, name:"Handan"},
{id:44, pId:4, name:"Chengde"},
{id:5, pId:0, name:"Guangdong Province", open:true},
{id:51, pId:5, name:"Guangzhou"},
{id:52, pId:5, name:"Shenzhen"},
{id:53, pId:5, name:"Dongguan"},
{id:54, pId:5, name:"Fushan"},
{id:6, pId:0, name:"Fujian Province", open:true},
{id:61, pId:6, name:"Fuzhou"},
{id:62, pId:6, name:"Xiamen"},
{id:63, pId:6, name:"Quanzhou"},
{id:64, pId:6, name:"Sanming"}
];
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("Do not select province...");
return check;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
//初始化ztee，setting是配置，zNodes就是节点数据，后面楼主会用ajax获取
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<BODY>
<h1>Drop-down Menu</h1>
<h6>[ File Path: super/select_menu.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title"> <span class="highlight_red">Press Ctrl-key or Cmd-key to select multiple cities</span></li>
<li class="title"> city: <input id="citySel" type="text" readonly value="" style="width:120px;"/>
<a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a></li>
</ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>Explanation of implementation method</h2>
<ul class="list">
<li>Achieve this drop-down menu, it is relatively easy, you only need to control zTree Hide / Show, and location.</li>
<li class="highlight_red">Use zTree v3.x, you can select multiple nodes, so the multi-selection is also easy.</li>
<li class="highlight_red">Use the configuration parameters setting, fully meet the needs of most of the functionality.</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
</BODY>
</HTML>
demo效果图
三、实战
//页面代码，楼主用的是bootStrap，在模态框的body里面应用，zTreeDemoBackground left是ztree的样式一定要加不然显示不了
<div class="form-group row zTreeDemoBackground left">
<label for="citySel" class="col-sm-3 col-form-label">上级菜单</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control" id="citySel" placeholder="上级菜单" onclick="showMenu();">
//楼主的目的是想点击input出选择框，所以取消了外部按钮
<div id="menuContent" class="menuContent" style="display:none;" onclick="doNothing();">
<ul id="treeDemo" class="ztree" ></ul>
</div>
</input>
</div>
</div>
js
var setting = {
view: {
dblClickExpand: false,
selectedMulti: false//阻止多选，ctrl的多选
},
data: {
key: {
isParent: "isParent",
children: "children",
name: "menuName",//这个是显示的名称记得配置，不然显示不出来
title: "",
/*url: "url",*/
url: "ahref",//这个设置防止点击跳转页面
icon: "icon"
},
simpleData: {
enable: true,
idKey: "menuId",//id和默认结构不一样的配置一下
pIdKey: "parentId",//父id和默认结构不一样的配置一下
rootPId: -1//根节点的数值
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
$(function() {
getZNodes();//ztree初始化，页面一加载就初始化
});
function getZNodes(){
$.post("menu/getAllMenu",function(result){//后台获取数据的方法，treeDemo是要显示的地方
if(result.errorCode==0){
$.fn.zTree.init($("#treeDemo"), setting, result.data.data);//ztree初始化
}else{
console.log("操作失败");
}
})
}
function beforeClick(treeId, treeNode) {//这个很关键，我的需求是只能选择菜单，demo默认的是只能选择按钮
var check = (treeNode && treeNode.isParent);
if (!check) alert("只能选择菜单");
return check;
}
//点击的时候将数值回填到input
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
//v += nodes[i].name + ",";
v += nodes[i].menuName + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
//这个是楼主自己加的需要父id
$("#parentId").val(nodes[0].menuId);
//这里楼主改进了一下，用prop，用attr会出现选不动
cityObj.prop("value", v);
}
function doNothing(){//阻止冒泡的，各位有好的方法可以不用
return;
}
//点击input出现ztree的方法
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
楼主的数据结构
{
"errorCode": 0,
"msg": "处理成功",
"data": {
"data": [{
"menuId": 0,
"parentId": -1,
"menuName": "终极菜单",
"url": null,
"permisson": null,
"icon": null,
"type": 0,
"sort": null,
"createTime": "2019-06-30 21:17:04",
"updateTime": null,
"checked": false
}, {
"menuId": 1,
"parentId": 0,
"menuName": "系统管理",
"url": null,
"permisson": null,
"icon": "zmdi zmdi-settings",
"type": 0,
"sort": 1,
"createTime": "2017-12-28 00:39:07",
"updateTime": null,
"checked": false
}, {
"menuId": 2,
"parentId": 0,
"menuName": "系统监控",
"url": null,
"permisson": null,
"icon": "zmdi zmdi-shield-security",
"type": 0,
"sort": 2,
"createTime": "2017-12-28 00:45:51",
"updateTime": "2018-01-18 01:08:28",
"checked": false
}, {
"menuId": 3,
"parentId": 1,
"menuName": "用户管理",
"url": "user",
"permisson": "user:list",
"icon": "",
"type": 0,
"sort": 1,
"createTime": "2017-12-28 00:47:13",
"updateTime": "2018-04-25 17:00:01",
"checked": false
}, {
"menuId": 4,
"parentId": 1,
"menuName": "角色管理",
"url": "role",
"permisson": "role:list",
"icon": "",
"type": 0,
"sort": 2,
"createTime": "2017-12-28 00:48:09",
"updateTime": "2018-04-25 17:01:12",
"checked": false
}, {
"menuId": 5,
"parentId": 1,
"menuName": "菜单管理",
"url": "menu",
"permisson": "menu:list",
"icon": "",
"type": 0,
"sort": 3,
"createTime": "2017-12-28 00:48:57",
"updateTime": "2018-04-25 17:01:30",
"checked": false
}, {
"menuId": 6,
"parentId": 1,
"menuName": "部门管理",
"url": "dept",
"permisson": "dept:list",
"icon": "",
"type": 0,
"sort": 4,
"createTime": "2017-12-28 00:57:33",
"updateTime": "2018-04-25 17:01:40",
"checked": false
}, {
"menuId": 8,
"parentId": 2,
"menuName": "在线用户",
"url": "session",
"permisson": "session:list",
"icon": "",
"type": 0,
"sort": 1,
"createTime": "2017-12-28 00:59:33",
"updateTime": "2018-04-25 17:02:04",
"checked": false
}, {
"menuId": 10,
"parentId": 2,
"menuName": "系统日志",
"url": "log",
"permisson": "log:list",
"icon": "",
"type": 0,
"sort": 3,
"createTime": "2017-12-28 01:00:50",
"updateTime": "2018-04-25 17:02:18",
"checked": false
}, {
"menuId": 11,
"parentId": 3,
"menuName": "新增用户",
"url": null,
"permisson": "user:add",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:02:58",
"updateTime": null,
"checked": false
}, {
"menuId": 12,
"parentId": 3,
"menuName": "修改用户",
"url": null,
"permisson": "user:update",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:04:07",
"updateTime": null,
"checked": false
}, {
"menuId": 13,
"parentId": 3,
"menuName": "删除用户",
"url": null,
"permisson": "user:delete",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:04:58",
"updateTime": null,
"checked": false
}, {
"menuId": 14,
"parentId": 4,
"menuName": "新增角色",
"url": null,
"permisson": "role:add",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:06:38",
"updateTime": null,
"checked": false
}, {
"menuId": 15,
"parentId": 4,
"menuName": "修改角色",
"url": null,
"permisson": "role:update",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:06:38",
"updateTime": null,
"checked": false
}, {
"menuId": 16,
"parentId": 4,
"menuName": "删除角色",
"url": null,
"permisson": "role:delete",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2017-12-28 01:06:38",
"updateTime": null,
"checked": false
}, {
"menuId": 124,
"parentId": 3,
"menuName": "查看用户",
"url": "user/pageList",
"permisson": "user:read",
"icon": null,
"type": 1,
"sort": null,
"createTime": "2019-07-05 07:13:12",
"updateTime": null,
"checked": false
}]
}
}
四、得到开篇所示效果图
五、带选框的demo在\zTree_v3\demo\en\excheck目录下面，这里暂时不贴出来了。
参考文献：ztee官网，前面有连接
本文为原创文章，转载请注明出处。
有问题请留言 邮箱：[email protected] qq 2519946973
