首页 > 其他 > 详细

zTree的基本用法

时间:2019-12-02 17:15:08      阅读:92      评论:0      收藏:0      [点我收藏+]

zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定义样式,足以满足大部分业务的开发。

技术分享图片

 第一步先导入css及js文件

1 <link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css">
2 <script type="text/javascript" src="zTree/js/jquery.ztree.all.min.js"></script>

第二步在html页面创建ztree Div

<div>
    <ul id="regionZTree" class="ztree"></ul>
</div>

第三步初始化ztree

var setting = {
        view: {
            dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
            showLine: true,//是否显示节点之间的连线
            fontCss:{‘color‘:‘black‘,‘font-weight‘:‘bold‘},//字体样式函数
            selectedMulti: true //设置是否允许同时选中多个节点
        },
        check:{
            //chkboxType: { "Y": "ps", "N": "ps" },
            chkboxType: { "Y": "", "N": "" },
            chkStyle: "checkbox",//复选框类型
            enable: true //每个节点上是否显示 CheckBox
        },
        edit:{
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn : true,
            showRenameBtn : true,
            removeTitle : "remove",
            renameTitle : "rename"
        },
        data: {
            simpleData: {//简单数据模式
                enable:true,
                idKey: "id",
                pIdKey: "IPARENTID",
                rootPId: null
            }
        },
        callback: {
            beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
        }
    };
zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree); 

zTree的基本用法

原文:https://www.cnblogs.com/ZYTA/p/11971597.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!