ztree调用的例子（复选框、checkbox）

引入ztree库

存放目录和结构
src/main/webapp/js/lib/ztree

原则：按需引入
requireJs中的设置

shim: {'jquery': {"exports": "$"},'zTree-core' : ['jquery'],'zTree-excheck' : ['jquery','zTree-core'],
}

由于不满足AMD规范，需在shim中指定外部调用的别名、依赖的模块

前端调用

JSP页面调用

require(["grant",'jquery','popup','autoComplete','window','common','zTree-excheck','validate.zh'],function(Grant,$,Popup,AutoComplete,UIWindow,Common,ZTree){var setting = {check: {enable: true},data: {simpleData: {enable: true,idKey : "resId",pIdKey : "parentId",rootPId : 9999},key : {name : "resName"}}};//初始化ztreevar loadZTree = function(roleId,roleType){$.ajax({url:contextPath + '/XXXXXXXXXXXX/loadZTreeData?t=' + Math.random(),type:'post',data:{"roleId" : roleId,"type" : roleType},dataType:'json',success:function(response){if(response.code == '0'){console.log(response.data);//$.fn.zTree.init($("#roleTree"), setting, zNodes);$.fn.zTree.init($("#roleTree"), setting, response.data);}else{UIWindow.alert({message : response.message,type : 'error'});}}});}$resInfoForm.find('input[type="radio"][name="roleType"]').on('change',function(){$.fn.zTree.destroy("roleTree");loadZTree(null,$(this).val());});$(document).ready(function(){var clientRoleId = $resInfoForm.find('input[name="roleId"]').val();var clientRoleType = $resInfoForm.find('input:radio[name="roleType"]:checked').val();if(clientRoleId && clientRoleId != 0){loadZTree(clientRoleId,clientRoleType);}else{$resInfoForm.find('input[type="radio"][name="roleType"]').eq(0).trigger('click');}});
});

JSON格式的数据（response.data）

[{"checked": false,"createTime": "2020-12-23 18:20:26","createTimeStr": "2020-12-23 18:20:26","creator": 1,"deleted": false,"leafFlag": 0,"modifier": 1,"modifyTime": "2021-01-15 09:56:56","open": true,"order": 1,"parentId": 9999,"path": "9999_14","resCode": "114","resId": 14,"resName": "首页","roleResFlag": false,"sysCode": "KH","type": 1,"leafFlag_desc": "未启用","deleted_desc": "可用"},{"backgroundColor": "","checked": false,"createTime": "2021-01-15 09:57:36","createTimeStr": "2021-01-15 09:57:36","creator": 100000,"deleted": false,"imgUrl": "","leafFlag": 1,"modifier": 100000,"modifyTime": "2021-01-15 09:57:34","open": false,"order": 1,"parentId": 14,"path": "9999_14_15","resCode": "115","resId": 15,"resName": "订购","roleResFlag": false,"sysCode": "KH","type": 1,"url": "/sys/api/1.0/dkdkdkdkd","leafFlag_desc": "启用","deleted_desc": "可用"},{"backgroundColor": "","checked": false,"createTime": "2021-01-15 09:58:19","createTimeStr": "2021-01-15 09:58:19","creator": 100000,"deleted": false,"imgUrl": "","leafFlag": 0,"modifier": 100000,"modifyTime": "2021-01-15 09:58:17","open": true,"order": 10,"parentId": 14,"path": "9999_14_16","resCode": "116","resId": 16,"resName": "报表","roleResFlag": false,"sysCode": "KH","type": 1,"url": "","leafFlag_desc": "未启用","deleted_desc": "可用"},{"backgroundColor": "#fffff","checked": false,"createTime": "2021-01-15 09:59:08","createTimeStr": "2021-01-15 09:59:08","creator": 100000,"deleted": false,"imgUrl": "","leafFlag": 1,"modifier": 100000,"modifyTime": "2021-01-15 09:59:06","open": false,"order": 1,"parentId": 16,"path": "9999_14_16_17","resCode": "117","resId": 17,"resName": "提报需求报表","roleResFlag": false,"sysCode": "KH","type": 1,"url": "/sys/api/1.0/xkdkdkdkd","leafFlag_desc": "启用","deleted_desc": "可用"}
]

PS：无需构造父子关系的层级结构，ztree.excheck.js会自动帮你构造树形结构。

浏览器效果

参考地址

ztree官网，感谢提供了这么好用的组件。

ztree调用的例子（复选框、checkbox）相关推荐

ztree指定节点设置复选框
ztree指定节点设置复选框首先,需引入ztree的js文件 <script src="../../assets/ztree/js/jquery.ztree.core-3.5.mi ...
使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...
【Qt】QTableView中嵌入复选框CheckBox 的四种方法总结
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用第四 ...
HTML复选框--checkbox
在公司实际开发中,会经常遇到复选框全选.多选.统计选中个数的情况,所以总结研究了一些大神的帖子,汇总学习一下! 1.统计被选中复选框的个数 2.点击复选框,执行对应函数 3.获取复选框的状态 4.全选 ...
为tableview添加带控件的单元格如复选框checkbox与combbox单元格
我们常常会有这样的需求,为QTableView增加复选框checkbox和选择下拉框combbox,毕竟依靠键盘输入不是很好约束其规范性.下面我们逐个来介绍.完成之后的效果如下: 一.准备TableV ...
使用easyui框架form控件，单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
MFC复选框CheckBox使用
MFC中复选框checkbox控件,至少有三种方法对其进行操作,他们是利用Cbutton成员函数GetCheck和SetCheck,第二种是利用CWnd成员函数IsDlgButtonChecked,最 ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

ztree调用的例子（复选框、checkbox）

引入ztree库

前端调用

浏览器效果

参考地址

ztree调用的例子（复选框、checkbox）相关推荐

最新文章

热门文章