树状图插件

1. jsTree

介绍
jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

使用方式

引入jq以及jstree js文件和css文件

<link rel="stylesheet" href="jstree/themes/default/style.min.css">
<script src="js/jquery.min.js"></script>
<script src="jstree/js/jstree.js"></script>

事件

 // 展开节点
$("#jstree").on("loaded.jstree", function (event, data) {
    // 展开所有节点
    //$('#jstree').jstree('open_all');
    // 展开指定节点
    //data.instance.open_node(1);     // 单个节点 （1 是顶层的id）
    data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行）1：从第一个节点开始 10：展开节点数，最大为总的节点数
});

// 所有节点都加载完后
$("#jstree").on("ready.jstree", function (event, data) {
  
});
//注：loaded和ready的区别：
//loaded：首次加载根节点后触发
//ready:所有节点加载完成后触发

// 获得点击节点的id  id为数据结构中的id
$('#jstree').on("changed.jstree", function (e, data) {
    console.log("The selected nodes are:");
    console.log(data.selected);
    alert('node.id is:' + data.node.id);
    alert('node.text is:'+data.node.text);
    console.log(data);
});

//绑定点击事件2
 $("#jstree").jstree({
     "core":{
         "data":treeData
     }
 }).bind('select_node.jstree', function (event, data) {  //绑定的点击事件
     console.log(data,"=>data")
 });

API

$("#jstree").jstree().get_theme():取得当前激活即使用的主题
$("#jstree").jstree().set_theme(name, url):设置主题
$("#jstree").jstree().show_dots(),,:显示树边框的点
$("#jstree").jstree().hide_dots():隐藏树边框的点
$("#jstree").jstree().toggle_dots()激活树边框的点
$("#jstree").jstree().show_icons(),,:显示树的图标
$("#jstree").jstree().hide_icons():隐藏树的图标
$("#jstree").jstree().toggle_icons():激活树的图标

示例

将html转换成树状图

<div id="jstree">
        <ul>
            <li>root
                <ul>
                    <li>root1
                        <ul>
                            <li>child1-1</li>
                            <li>child1-2</li>
                        </ul>
                    </li>
                    <li>root2
                        <ul>
                            <li>child2-1</li>
                            <li>child2-2</li>
                            <li>child2-3</li>
                        </ul>
                    </li>
                    <li>root3</li>
                </ul>
            </li>
        </ul>
    </div>
 $("#jstree").jstree()

效果图：

2. 动态数据转换成树状图

    <div id="jstree"></div>
    <script>
        var treeData = [
            {
                id:0,
                text:"root",
                children:[
                    {
                        id:1,
                        text:"root1",
                        children:[
                            {id:"1-1",text:"child1-1"},
                            {id:"1-2",text:"child1-2"},
                        ]
                    },
                    {
                        id:2,
                        text:"root2",
                        children:[
                            {id:"2-1",text:"child2-1"},
                            {id:"2-2",text:"child2-2"},
                            {id:"2-3",text:"child2-3"},
                        ]
                    }
                ]
            }
        ];

        $("#jstree").data("jstree",false).empty();
        $("#jstree").jstree({
            "core":{
                "data":treeData
            }
        })
    </script>

效果图：

带有图标以及禁用的树状图

 <div id="jstree">
        <ul>
            <li>root
                <ul>
                    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>root1
                        <ul>
                            <li data-jstree='{"disabled":true}'>child1-1</li>
                            <li>child1-2</li>
                        </ul>
                    </li>
                    <li>root2
                        <ul>
                            <li>child2-1</li>
                            <li>child2-2</li>
                            <li>child2-3</li>
                        </ul>
                    </li>
                    <li>root3</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
         $("#jstree").jstree();
    </script>

效果图：

官网地址：https://www.jstree.com/
Github地址：https://github.com/vakata/jstree

2. zTree

介绍
一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。

特点

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

使用
引入js以及css文件

<link rel="stylesheet" href="ztree/css/zTreeStyle.css">
<script src="js/jquery.min.js"></script>
<script src="ztree/jquery.ztree.core.js"></script>

参数设置

一. zTree的 setting 配置详解

var setting = {
	 treeId : "", //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。
	 //请勿进行初始化 或 修改，属于内部参数。 
	 treeObj : null, //zTree 容器的 jQuery 对象，主要功能：便于操作。
	 //请勿进行初始化 或 修改，属于内部参数。
 	 async : { // 是否异步加载 相当于ajax
		autoParam : [], //可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"] ; 默认值空
		contentType : "application...",
		dataFilter : null,
		dataType : "text",
		enable : false,//设置 zTree 是否开启异步加载模式  默认值：false
		otherParam : [],//其他参数 ;直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 }
		type : "post",  //请求方式
		url : ""  //路径
	 },
 	 callback : { //返回函数; 根据需求选择合适的监听事件  //以下事件默认权威null 事件例子参见第83行
		beforeAsync : null,//异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载
		beforeCheck : null,//勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选
		beforeClick : null,//单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
		beforeCollapse : null,//父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作
		beforeDblClick : null,// zTree 上鼠标双击之前的事件回调函数，并且根据返回值确定触发 onDblClick 事件回调函数
		beforeDrag : null,//节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
		beforeDragOpen : null,//拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作
		beforeDrop : null,//节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
		beforeEditName : null,//节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态
		beforeExpand : null,//父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
		beforeMouseDown : null,// zTree 上鼠标按键按下之前的事件回调函数，并且根据返回值确定触发 onMouseDown 事件回调函数
		beforeMouseUp : null,//zTree 上鼠标按键松开之前的事件回调函数，并且根据返回值确定触发 onMouseUp 事件回调函数
		beforeRemove : null,//节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
		beforeRename : null,//节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
		beforeRightClick : null,// zTree 上鼠标右键点击之前的事件回调函数，并且根据返回值确定触发 onRightClick 事件回调函数
		onAsyncError : null,//异步加载出现异常错误的事件回调函数
		onAsyncSuccess : null,//异步加载正常结束的事件回调函数
		onCheck : null,// checkbox / radio 被勾选 或 取消勾选的事件回调函数
		onClick : null,//节点被点击的事件回调函数
		onCollapse : null,//节点被折叠的事件回调函数
		onDblClick : null,// zTree 上鼠标双击之后的事件回调函数
		onDrag : null,//节点被拖拽的事件回调函数
		onDragMove : null,//节点被拖拽过程中移动的事件回调函数
		onDrop : null,//节点拖拽操作结束的事件回调函数
		onExpand : null,//节点被展开的事件回调函数
		onMouseDown : null,// zTree 上鼠标按键按下后的事件回调函数
		onMouseUp : null,// zTree 上鼠标按键松开后的事件回调函数
		onNodeCreated : null,//节点生成 DOM 后的事件回调函数
		onRemove : null,//删除节点之后的事件回调函数。
		onRename : null,//节点编辑名称结束之后的事件回调函数。
		onRightClick : null// zTree 上鼠标右键点击之后的事件回调函数
	 }, 
    /*例. 节点勾选或取消事件 
		function zTreeOnCheck(event, treeId, treeNode) {
			alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
			//event js event 对象标准的 js event 对象
	       //treeId  String 对应 zTree 的 treeId，便于用户操控
	       //treeNode  JSON 被勾选 或 取消勾选的节点 JSON 数据对象
		};
		var setting = {
			callback: {
				onCheck: zTreeOnCheck
			}
		};
	 */
 	 check : { //设置zTree是否可以被勾选,及勾选的参数配置
		 autoCheckTrigger : false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。		[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
		chkboxType : {"Y": "ps", "N": "ps"},//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
		chkStyle : "checkbox",//勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
		enable : false,//设置 zTree 的节点上是否显示 checkbox / radio  默认值: false
		nocheckInherit : false//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效]
		chkDisabledInherit : false//当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]
		radioType : "level"//radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]
	 },
 	  data : { //非常重要
		keep : {  //子节点和父节点属性设置 默认值都为false
  			 leaf : false,//zTree 的节点叶子节点属性锁，是否始终保持 isParent = false
 			 parent : false//zTree 的节点父节点属性锁，是否始终保持 isParent = true
		},
		key : {  //节点数据
  			 checked : "checked",//zTree 节点数据中保存 check 状态的属性名称。
 			 children : "children",//zTree 节点数据中保存子节点数据的属性名称。
  			 name : "name",//zTree 节点数据保存节点名称的属性名称。
 			 title : ""  //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
 			 url : "url"  //设置 zTree 显示节点时，将 treeNode 的 xUrl 属性当做节点链接的目标 URL
		},
		simpleData : {
  			 enable : false,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
  			 idKey : "id",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
 			 pIdKey : "pId",//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
 			 rootPId : null//用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
		}
	 },
	  edit : { //可以编辑节点 : 增 删 改
		drag : {
			autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]
			isCopy : true,//拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]
			isMove : true,//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
			prev : true,  //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]
			next : true,  //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]
			inner : true,  //拖拽到目标节点时，设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效]
			borderMax : 10,//拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效]
			borderMin : -5,//拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。[setting.edit.enable = true 时生效]
			minMoveSize : 5,//判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效]
			maxShowNodeNum : 5,//拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]
			autoOpenTime : 500//拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效]

		},
		editNameSelectAll : false,
		enable : false,//设置 zTree 是否处于编辑状态,true / false 分别表示 可以 / 不可以 编辑
		removeTitle : "remove",//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]
		renameTitle : "rename",//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效]
		showRemoveBtn : true,//设置是否显示删除按钮。[setting.edit.enable = true 时生效]
		showRenameBtn : true//设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效]
	},
 	 view : {
		addDiyDom : null,//用于在节点上固定显示用户自定义控件
		addHoverDom : null,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
		autoCancelSelected : true,//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。
		dblClickExpand : true,//双击节点时，是否自动展开父节点的标识
		expandSpeed : "fast",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。
		fontCss : {},  //个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
		nameIsHTML : false,//设置 name 属性是否支持 HTML 脚本
		removeHoverDom : null,//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
		selectedMulti : true,//设置是否允许同时选中多个节点。
		showIcon : true,//设置 zTree 是否显示节点的图标。
		showLine : true,//设置 zTree 是否显示节点之间的连线。
		showTitle : true,//设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。
		txtSelectedEnable : false//设置 zTree 是否允许可以选择 zTree DOM 内的文本。
	 }
}

示例

<ul id="tree"  class="ztree"></ul>//必须得加上类名：ztree
<script>
        var setting = {};
        var zNodes =[
            { name:"父节点1 - 展开", open:true,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},
            { name:"父节点2 - 折叠",
                children: [
                    { name:"父节点21 - 展开", open:true,
                        children: [
                            { name:"叶子节点211"},
                            { name:"叶子节点212"},
                            { name:"叶子节点213"},
                            { name:"叶子节点214"}
                        ]},
                    { name:"父节点22 - 折叠",
                        children: [
                            { name:"叶子节点221"},
                            { name:"叶子节点222"},
                            { name:"叶子节点223"},
                            { name:"叶子节点224"}
                        ]},
                    { name:"父节点23 - 折叠",
                        children: [
                            { name:"叶子节点231"},
                            { name:"叶子节点232"},
                            { name:"叶子节点233"},
                            { name:"叶子节点234"}
                        ]}
                ]},
            { name:"父节点3 - 没有子节点", isParent:true}

        ];
        $(document).ready(function(){
            $.fn.zTree.init($("#tree"), setting, zNodes);
        });
        </script>

效果图：

完整示例：
百度网盘
链接：https://pan.baidu.com/s/1C6MNyfqAGBz6p_oaKDN3og
提取码：yyfc

官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
Github地址：https://github.com/zTree/zTree_v3

1. jsTree

2. zTree

AI模型 Llama 3体验笔记

【面试准备】又一次失败的面试经历，题目离谱～资深软件测试工程师

dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

vue項目中多行文本超出省略失效解決方式

uploadify---jQuery多文件上傳

input框輸入文本限制

metisMenu側邊欄插件

js 調用 IOS 、Android原生方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結