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

喻树临风-CS

于 2021-01-21 15:28:16 发布

阅读量324

点赞数

分类专栏：前端 JS相关文章标签： js jquery

本文链接：https://blog.csdn.net/jerome0815/article/details/112948340

版权

本文介绍了如何在前端项目中调用ztree库实现复选框功能。首先，展示了ztree库的引入路径和按需加载配置。接着，通过JSP页面调用并提供JSON数据来展示ztree的复选框效果。无需手动处理层级结构，ztree的excheck.js插件能自动构建。最后，提到了ztree官网作为参考资料。

摘要由CSDN通过智能技术生成

引入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"
            }
        }
    };

    //初始化ztree
    var loadZTree = function(roleId,roleType){
   
        $.ajax({
   
            url:contextPath + '/XXXXXXXXXXXX/loadZTreeData?t=' + Math.random(),
            type:'post',
            data:{
   
                "roleId" : roleId,