c#--js--树形菜单（几种常见树形菜单）

最新推荐文章于 2021-05-27 16:27:15 发布

百小容是程序员

最新推荐文章于 2021-05-27 16:27:15 发布

阅读量2.4k

点赞数

分类专栏：前端 .Net C#

本文链接：https://blog.csdn.net/VIP_CR/article/details/104606217

版权

一开始使用了jstree，因为简约风格挺好看，结果开始做动态数据时，发现api太少，效果也太少，节点想添加个链接跳转都查了好久的资料，愣是没找到好用的。
然后又去看了一下 zTree，发现demo里有带链接的实例，而且有种metro风格和 jstree效果挺相似，果断弃 jstree选择了 ztree，毕竟可以拿过来直接用，而且api很详细，demo也丰富。就是json格式没有介绍太详细。不过查资料找到很多ztree关于 json格式的介绍，nice
两种插件都支持标准json格式和简单json格式，只是写法上有细微不同，如下两图

zTree 的简单 json格式在这里插入图片描述 jstree的简单 json格式

1.zTree 简介

官网：http://www.treejs.cn/v3/demo.php#_101
引用的js和css文件下载地址：https://gitee.com/zTree/zTree_v3

.
支持的json格式：标准格式和简单格式，，（推荐使用简单（平级）的json数据结构，如下图）在这里插入图片描述
.
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。

zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能

在这里插入图片描述
实例下载地址：
js树形控件—zTree使用（推荐，看一看，有 zTree支持的几种json格式）
zTree – jQuery 树插件构造treeNode JSON 数据对象
 zTree – jQuery 树插件使用方法与例子
 超级详细的Ztree详解
 jQuery树形菜单插件zTree（实例下载）
C#动态加载树菜单
 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

2.jsTree

官网：https://www.jstree.com.cn/
实例：http://www.jq22.com/jquery-info5724
引用的js和css文件下载地址：https://www.jstree.com.cn/
.
支持的json格式：标准格式和简单格式，，（推荐使用简单（平级）的json数据结构，如下图）
（推荐使用平级的json数据结构）
在这里插入图片描述
支持的几种JSON格式：https://www.jstree.com.cn/docs/json.html
。
jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的，并根据MIT许可进行分发。jsTree易于扩展，可定义和配置，它支持HTML和JSON数据源以及AJAX加载。

jsTree可以在盒子模型（内容框或边框）中正常运行，可以作为AMD模块加载，并具有用于响应式设计的内置移动主题，可以轻松自定义。它使用jQuery的事件系统，因此对树中各种事件的绑定回调是熟悉且容易的。

仅有的一些功能值得注意：

拖放支持 键盘导航 内联编辑，创建和删除 三态复选框 模糊搜索 可定制的节点类型

在这里插入图片描述
Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+
以上的旧版本可能可以运行，但未经测试

参考:
jsTree （js 实现多级菜单+点击节点页面跳转）
JsTree 最详细教程及完整实例
 jstree – 使用JSON 数据组装成树
.
.
.
.

======================== 以下为 zTree 的 metro风格官方实例============================
======================== 以下为 zTree 的 metro风格官方实例============================
======================== 以下为 zTree 的 metro风格官方实例============================
.
参考前端框架inspinia里的树形菜单效果，重新定义了部分效果（行高改为24px，字体大小改为13px，选中效果改为浅蓝色带阴影），修改内容在下面<style>......</style>
引用的js和css文件下载地址：https://gitee.com/zTree/zTree_v3

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Simple Data</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/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.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>
    <style>
        /*参考 前端框架inspinia里的树形菜单效果，重新修改样式*/
        /*metroStyle.css 13行*/
        .ztree li {
     
            line-height: 24px !important;   
        }
         /*metroStyle.css 11行*/
        .ztree * {
   
            font-size: 13px !important;
        }
         /*metroStyle.css 19行*/
        .ztree li a.curSelectedNode {
   
            /*background-color: #e5e5e5;*/
            background: #beebff;
            border-radius: 6px;
            box-shadow: inset 0 0 5px #999;
        }
    </style>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
   
            view: {
   
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
   
                enable: true
            },
            data: {
   
                simpleData: {
   
                    enable: true
                }
            },
            edit: {
   
                enable: true
            }
        };

        var zNodes =[
            {
    id:1, pId:0, name:"父节点1", open:true},
            {
    id:11, pId:1, name:"父节点11"},
            {
    id:111, pId:11, name:"叶子节点111"},
            {
    id:112, pId:11, name:"叶子节点112"},
            {
    id:113, pId:11, name:"叶子节点113"},
            {
    id:114, pId:11, name:"叶子节点114"},
            {
    id:12, pId:1, name:"父节点12"},
            {
    id:121, pId:12, name:"叶子节点121"},
            {
    id:122, pId:12, name:"叶子节点122"},
            {
    id:123, pId:12, name:"叶子节点123"},
            {
    id:124, pId:12, name:"叶子节点124"},
            {
    id:13, pId:1, name:"父节点13", isParent:true},
            {
    id:2, pId:0, name:"父节点2"},
            {
    id:21, pId:2, name:"父节点21", open:true},
            {
    id:211, pId:21, name:"叶子节点211"},
            {
    id:212, pId:21, name:"叶子节点212"},
            {
    id:213, pId:21, name:"叶子节点213"},
            {
    id:214, pId:21, name:"叶子节点214"},
            {
    id:22, pId:2, name:"父节点22"},
            {
    id:221, pId:22, name:"叶子节点221"},
            {
    id:222, pId:22, name:"叶子节点222"},
            {
    id:223, pId:22, name:"叶子节点223"},
            {
    id:

最低0.47元/天解锁文章

百小容是程序员

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
c#--js--树形菜单（几种常见树形菜单）

1.zTree 简介官网：http://www.treejs.cn/v3/demo.php#_101。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。zTree v3.0 将核心代...
复制链接

扫一扫