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

原创于 2021-01-21 15:28:16 发布 · 416 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #jquery

JS相关同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

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

引入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,
                "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": "可用"
	}
]