/** * 树形结构转换 * @param a * @param idStr * @param pidStr * @param chindrenStr * @returns {Array}.../** * 树形结构转换 * @param a * @param idStr * @param pidStr * @returns {Array} */ function transData2Tree...hashVP.children.push(aVal) } else { r.push(aVal) } } return r } /** * 返回一个节点下的所有子孙节点
最近在做一个Web平台,其中想用一个树形展示。上网搜了搜基于JQuery的树形插件还真不少,最后选定zTree。关于zTree这里只是简单给出一个使用的示例。...首先声明zTree的配置信息,然后声明zTree的节点信息,最后初始化zTree。 下面给出一个示例: <script type="text/javascript" src="<em>js</em>/jquery.ztree.all-3.5.min.<em>js</em>"...打开zTreeStyle.css(zTree默认的的样式文件)进行自定义图标的修改。其中CSS涉及到的原图使用了CSS Sprites技术,我们只需要修改我们想要改变的样式,其它的可以不用去管。
jsTree 是一个基于 jQuery 和 Sarissa 的免费网页树形部件,它设置灵活,并且支持几乎主流的浏览器,如:Internet Explorer 6 +, Mozilla Firefox,...jsTree 支持三种数据源头: 预先定义好的 HTML -嵌套的列表结构 JSON XML jsTree 的主要功能有: 同步导入 - 只需要提供一个 URL,就会去请求数据(只适合 JSON 和 XML...支持打开,关闭,重命名,创建,删除节点(通过预先定义好的规则) 支持多种回调函数(onchange, oncreate, ondelete, onload, 等等) 支持拖拉 支持多重选择 支持多种语言...支持主题(可以修改图标,大小和背景等等) 可以支持动态打开和关闭(configurable) 可选的快捷键导航 支持多个树形部件 另外还可以做为 jQuery 插件。
// pid 代表属于的父级 id // id 代表的是自己本身的id,本身的 id 是多少 let flatArr = [ { id: 1, name: "部门1", pid: 0 },...子节点的pid是父节点的id,即某个对象的 pid 与 某个对象的 id 相同,则前者为后者的子节点 // 2....// 3.遍历传入的数组,根据传入的 parent_id(pid),获取所有父节点的对象,push 到数组中,作为第一层对象 // 4.在遍历数组过程中,获取数组的 pid,从刚才保存的对象中寻找父级对象是否存在如果存在..."部门5", pid: 4 }], }, ], }, ], }, ]; // 树形结构转为扁平数组...} = cur; return prev.concat([{ ...others }], flatten(children)); }, []); } console.log("树形数组转为扁平数组
题目描述 这是 LeetCode 上的「310. 最小高度树」,难度为「中等」。 Tag : 「树形 DP」、「DFS」、「动态规划」 树是一个无向图,其中任何两个顶点只通过一条路径连接。...= bi 所有 (ai, bi) 互不相同 给定的输入保证是一棵树,并且不会有重复的边 树形 DP 这是一道树形 DP 模板题。...当确定以某个点为根节点时,整棵树的形态唯一固定,不妨以编号为 0 的节点作为根节点进行分析。 假设当前处理到的节点为 u,其是从父节点 fa 遍历而来,且将要遍历的子节点为 j。...即树的形态如图所示(一些可能有的出边用虚线表示): 树形 DP 问题通常将问题根据「方向」进行划分。...Math.max(g[j], g[u] + 1); dfs2(j, u); } } } 时间复杂度: O(n) 空间复杂度: O(n) 补充 可能会初次接触「树形
在项目开发过程中,都会遇到树形数据结构与扁平数据结构的转换。...下面分享一下,树形数据结构转扁平数据结构的方法 01 数据结构 树形数据结构 [{id:1, pid:0, name:'沃尔玛', childrens:[ {id:2, pid:1, name...name:'卫生纸'}, {id:7, pid:3, name:'牙刷'}, {id:8, pid:7, name:'电动牙刷'}, {id:9, pid:7, name:'普通牙刷'}] 02 树形转扁平...思路 ( 递归方法 ): 1、循环数组,取出每个对象进行判断 2、如果有children属性,将children传到flat函数重复执行,并将执行的结构返回数组,加入到新数组中。...然后删除当前对象的childrens属性 3、不管是否有childrens属性,都要将当前对象解构,然后加入新数组中 代码如下: function flat(arr){ var newArr=[];
在项目开发过程中,都会遇到树形数据结构与扁平数据结构的转换。...今天就分享一下,扁平数据结构转树形数据结构的方法 01 回顾数据结构 扁平数据结构 [{id:1, pid:0, name:'沃尔玛'}, {id:2, pid:1, name:'生鲜区'}, {..., name:'卫生纸'}, {id:7, pid:3, name:'牙刷'}, {id:8, pid:7, name:'电动牙刷'}, {id:9, pid:7, name:'普通牙刷'}] 树形数据结构...childrens:[ {id:6, pid:3, name:'卫生纸'}, {id:7, pid:3, name:'牙刷'} ]} ]} 02 扁平转树形...,请看下面文章 【算法解析】js 树形数据 转 扁平数据
前言 好多天前,领导让我实现一个树形图拖拽插件,这个插件用来描述各部门领导与员工之间的关系,每个父节点显示其子结点数量,拖拽任意一个叶结点上的人到另一个结点,他们之间的关系发生改变,树形图重新渲染。...用户操作都完成后,点击保存根据树形图生成JSON,将JSON发送给后端,后端根据JSON修改数据库中的人员对应关系。 接下来就跟大家下分享下我实现的这个插件,欢迎各位感兴趣的开发者阅读本文。...难点分析 实现可拖拽树形图 可拖拽树形图的实现,也是本插件的核心功能,根据dom的特定规则构建树,实现拖拽功能,拖拽功能我使用的是JQueryUI提供的方法,获取当前拖拽结点和目标结点的原始dom,重新构建树...渲染树形结构的json数据 css 插件内用到的css文件 js 插件内用到的js文件 assets 静态资源存放目录 config 树形结构渲染需要的文件 index.html 树形拖拽插件演示DEMO...--树形拖拽插件--> <!
;我为了方便都写到一个html中了;请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响...号(叹号)或者;(分号)这不是写错了,为了防止那个二货写的js结束没有分号;而可能发生报错 /* ;function(win,doc,$,undefined){ }(window...比如你要点击按钮 添加input的值到 div里 var addHtml = function(demo,btn){//插件名,调用的时候直接new一下插件名就行了并传参数或者传对象(一般这个函数名手写字母大写比较好...add-1");//这里是实例1调用插件的代码 new addHtml("demo-2","add-2"); //这里是实例2调用插件的代码 //是不是明白为什么要写插件了;要封装...--这里是最简单的插件写法;当然还有传对象参数的插件等等。。。。-->
分享一个js的拖拽框选插件 官网:https://dragselect.com/ 源码:https://github.com/ThibaultJanBeyer/DragSelect.git 使用: pnpm...i dragselect 有前端大佬翻译了部分,并编写了一个html的demo https://gitee.com/ovsexia/DragSelect-Doc-Cn 我在使用过程中发现反选有点问题,...所以如果是跟我一样pnpm i下载下的版本,应该也会有这个问题,因此反选自己实现即可,这是我按照上面链接中的demo在vue模块化项目中的组件: TagDragSelect.vue <!...element.querySelector('input[type="checkbox"]').checked = false; }, //鼠标抬起后返回所有选中的元素
1.Chart.js 官网地址:http://chartjs.cn/ 2.优秀的bootstrap模板推荐 官网地址:http://bootswatch.com 3.wow+animate+js插件库
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做起来比较繁琐...,几个功能做了一个月,当然了有能力的关系,也有插件易用度的关系 最近要实现的功能用tree树形结构来做是最好的,就是资源的分配,来简单讲讲ztree吧,这是目前国内很火的一个插件,百度一下就能了解,使用起来十分简单...小编我用过3年的jqgrid,在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出,多用了jqgrid后,再看ztree,那就十分简单了,不知道ztree作者是否也参考过jqgrid 首先你需要引入...js以及css吧 ?...zNodes是初始化的静态数据,可以不用,这里为了方便贴了出来,初始化的时候放入$.fn.zTree.init($("#treePermission"), setting, zNodes);即可 这是官网的
前言: 前端最重要的就是美感,图片的显示也需要,博主在此分享一款灯箱JS插件,非常简单的调用即可实现全局的图片灯箱。...优势介绍 无需其他JavaScript编码 没有其他HTML片段 没有额外的CSS资源 没有其他图标/资产 无需额外处理动态内容和事件侦听器 效果图 调用方法 将以下代码插入到HTML底部 --> $(function
html,js,css轮播插件 2016-9-9 今天帮一人写了个简单的轮播,工作不紧张,就顺便传上来分享给大家吧。源码,带部分注释。。。 //html Title $(function(){ Carousel.init($(".carouselBody")); });.../img/btn_r.png") no-repeat center center;} 注意事项,设置carouselBody的宽高时一定要考虑到图片的宽高,最好是宽高都是图片相同
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来。...本插件可以自定义的功能: 1....自己实现的简单小插件,把分页部分的css样式写在了插件paging.js中,以动态创建style标签的方式,加入到页面中。...1、代码部分: 1.1、插件 - paging.js 分页的css样式写在插件中,动态创建style标签,加载到页面中。在该js中有一个Paging构造函数。...,传入设置项的js对象,然后在回调函数里发送ajax请求获取数据。
摘要: 各位Fundebug老用户,请尽快更换JS插件域名!!!将og6593g2z.qnssl.com替换为js.fundebug.cn。...某CDN的证书被Chrome 66中招 以前,Fundebug的JavaScript监控插件使用的是某CDN厂商提供的域名以及HTTPS证书: https://og6593g2z.qnssl.com/fundebug...请尽快更换JS插件域名 为了保证服务质量,我们果断更换了CDN厂商,绑定了js.fundebug.cn域名,并且申请了新的HTTPS证书。...各位Fundebug老用户,如果您是采用script接入插件的,请尽快更换JS插件域名!!!...但是,新版本的插件都将使用js.fundebug.cn域名。 由于更换插件域名所造成的困扰,Fundebug团队深表歉意!
1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。...2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。...服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。 例子: <!...hide(); document.title = '1/' + len;//初始化第一张 } }); //未封装成插件的无序预加载...,因此用$.extend(object)挂载插件
分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css...viewer.css" rel="external nofollow" rel="external nofollow"> </...//缩放等级(1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js
thread_key 可选 被评论文章在原站点的文章标识。如果有thread_id,此参数是可选参数,否则是必选参数。 thread_id 可选 被评论文章的多说文章ID。...parent_id 可选 父评论(被回复的评论)的ID。 author_name 可选 作者名字。如果已登陆多说,此参数是可选参数,否则是必选参数。 author_email 可选 作者邮箱。...remote_auth 可选 remote_auth串是判断用户是否登录的依据。...likes int 一定返回 评论被点【赞】的次数。 reports int 一定返回 评论被【举报】的次数。 type string 一定返回 类型。现在均为空。...畅言:http://changyan.kuaizhan.com/ PC端 通用代码接入 畅言支持各种类型的Web网站接入,网站只需要粘贴、复制JS代码到网页的任意位置,或者复制代码到模板中,畅言评论框将在所有网页自动出现
原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name...(this instanceof Fn)){ //只要不是new的,用Fn()直接调用的,这里的this绝对不指向Fn;让它从 //新new一下;直到下一次代码走else里的内容...Fn.prototype = { constructor:Fn, getF:function(){ console.log(1); } } 2.默认参数 //我们用过一些插件...4.方法名防止冲突处理 //如果在引入你的插件之前,window下已经有Fn的变量;怎么办,你如果这么搞; 岂不是把别人写的Fn搞掉了 //此时应该把Fn的控制权交出,自己用Fn2输出 (function...typeof define === 'function') define(function() { return MyPlugin; }); //注册全局变量,兼容直接使用script标签引入该插件
领取专属 10元无门槛券
手把手带您无忧上云