ztree

ztree 样式更改

由 为君一笑 提交于 2020-02-25 17:22:20
管理系统三个不同样式不同内容的左侧导航栏就懒得自己写用的这个插件 插件太多api有的不是很全面查起来浪费时间自己整理下 api: http://www.treejs.cn/v3/demo.php#_114 去掉前面的加减符号 找到 jquery.ztree.core.js 1258行 注释就可以了 makeDOMNodeLine: function (html, setting, node) { /*html.push("<span id='", node.tId, consts.id.SWITCH, "' title='' class='", view.makeNodeLineClass(setting, node), "' treeNode", consts.id.SWITCH, "></span>");*/},自定义背景图片插件中包含的样式根据不同位置更改背景定位 比较局限 可以添加iconSkin class 设置对应的背景图片 如图 更换被点击的图片和样式 来源： https://www.cnblogs.com/Kipper-liu/p/9212452.html

Ztree改版 - 将图标字体化 - fontAwesome

由 拜拜、爱过 提交于 2020-02-13 09:08:55
引言 ps:小白可以一看，大神勿打~ 用过 ztree 的盆友们都知道，ztree 功能强大，就功能上来说，追求着“无处不按钮”的体验，但好用不好看。可能有朋友说：“我这棵树只有我自己看，够用就行” （我听不见，你没追求~）。对于这种更多时候是在背面展示的内容，我们追求一个词：简约，什么叫简约？简约就是：简单中透露着大气，朴实中内敛着奢华。呃~ 对不起，扯远了，看最终效果图： 对比一下原型ztree，想要女神女友，还需改版ztree~ 正文 对于ztree，我们审查下代码就能发现，它里面的图标是一整张图片，以背景图片配合background-position，来实现的。这样做的好处从性能方面来说储存消耗小，加载快，从更新方面来说 ，新版本图标上传图片覆盖就行了，当然前提是你得有个ui或者懂ps和ai的前端，光ps肯定是不够的，图标必须是矢量才能保证清晰度效果。 知道了 ztree 图标是背景图片方式生成的，那么改版ztree我们就有了两个思路： 　　第一种：做一张尺寸一样的图片（注意图片里面图标大小也一致 ）去覆盖，这样的方便之处在于我们只需要知道背景图片在哪个文件夹 　　就能完成改版，不需要去看源码（想想挺方便哈），而条件在上面提过了； 　　第二种：注意它是背景图片，如果我们代码中在某图标位置添加文字（当然不能过多，不然会撑大）或尺寸合适的图片并不会改变布局，而是覆盖在背景图片上

打造遮罩弹出带有搜索框的zTree页面

由 半腔热情 提交于 2020-01-26 18:08:16
版权声明：模糊查询js代码部分引用原生zTree官方代码，任何商业应用请联系zTree官方。 先上一下效果图： 技术要求：点击input标签或者打开遮罩层按钮时，弹出zTree页面；zTree页面中在关键字后面的input输入框输入搜索信息后，zTree关键字高亮显示，并关闭其他子节点！ zTree版本要求： ztree v3.5.19.1及以上,使用到getPath()方法 ztree.exhide扩展,使用到hideNode()方法​​​​​​​ 1. CSS、jQuery等底层框架选择： CSS部分：bootstrap3x，部分CSS用到了layui的样式、zTree样式采用metroStyle jQuery：jQuery3.3.1 2.代码： 2.1 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Bootstrap core CSS --> <link rel="icon" href="js/bootstrap/favicon.ico"> <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css"> <!-- IE10 viewport hack for Surface

jquery复选框思路

由 杀马特。学长 韩版系。学妹 提交于 2020-01-23 02:11:59
复选框的思路 复选框的主要问题就是多个框以及父子框之间的联系以及因果关系,然后编写时有两个思路。 先暂写一个思路一，剩下的下次再补 源码 <ul id="tree"> <li><input type="checkbox" value="1">1 <ul> <li> <input type="checkbox" value="1">2 <ul> <li><input type="checkbox" value="1">3 <ul> <li><input type="checkbox" value="1">4 <ul> <li><input type="checkbox" value="1">5</li> <li><input type="checkbox" value="1">5</li> <li><input type="checkbox" value="1">5</li> </ul> </li> <li><input type="checkbox" value="1">4</li> <li><input type="checkbox" value="1">4</li> <li><input type="checkbox" value="1">4</li> </ul> </li> <li><input type="checkbox" value="1">3 <ul> <li>

ztree

由 瘦欲@ 提交于 2020-01-10 01:01:32
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="ztree/zTreeStyle/zTreeStyle.css" type="text/css"> <!-- <script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="ztree/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> --> <!-- <script type="text/javascript" src="ztree/js/jquery.ztree.all.js"></script> --> <link href="ztree/css/zTreeStyle/zTreeStyle.css"

Ztree实现拖拽功能

由 泪湿孤枕 提交于 2019-12-31 22:57:11
树节点设置： this.tree = $.fn.zTree.init($("#topologyTree"), { async:{ enable:true }, edit : { enable : true, drag : { isMove : true, // 打开移动功能，鼠标左键点击后拖拽 prev : true, autoOpenTime : 0 }, editNameSelectAll : true, showRemoveBtn : true, removeTitle : "删除节点", renameTitle : "编辑节点名称", showRenameBtn : true, }, view : { selectedMulti : false, showIcon : true,// 显示图标 showLine : true, addHoverDom : addHoverDom , removeHoverDom : removeHoverDom }, data : { simpleData : { enable : true, idKey : 'id', pIdKey : 'pId', rootPId : 0 }, key : { name : "text" } }, check : { enable : false }, callback : { beforeDrag :

提取指定元素的所有父级标签集合，以zTree形式展示

由 孤者浪人 提交于 2019-12-31 15:26:06
<!-- 引入zTree css及js资源 --> <link href="zTree/zTreeStyle.css" type="text/css" rel="stylesheet"> <script src="zTree/jquery-2.1.4.min.js"></script> <script src="zTree/jquery.ztree.all.min.js"></script> <table class="table"> <tr> <td> <div> <ul> <li> <span> <i> <a id="enda" href="#">测试文字</a> </i> </span> </li> </ul> </div> </td> </tr> </table> <hr> <!-- zTree容器 --> <ul id="tree" class="ztree" style="width:500px; overflow:auto;"></ul> <script> $(function(){ // 返回jQuery对象所有匹配元素的标识信息数组,每个元素形如：tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.map(function(){ return this.tagName +

【zTree】zTree开发使用说明【20140610】

由 自古美人都是妖i 提交于 2019-12-27 17:34:22
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 使用条件 : 使用 zTree 树形结构，需要在当前页面中载入 zTree 的 js 文件和样式文件 zTree 核心 js 文件 :jquery.ztree-2.6.js zTree 样式文件 : 因为 zTree 是基于 jquery ，所以还需要对应的 jQuery 库文件 将这些文件引入使用页面 : < link rel = "stylesheet" href = "css/zTreeStyle.css" type = "text/css" > < script type = "text/javascript" src = "js/jquery-1.4.2.js" ></ script > < script type = "text/javascript" src = "js/jquery.ztree-2.6.js" ></ script > 简单使用 : 用户需要在页面上新建一个 tree 对象，需要使用 var zTree = $("#tree").zTree(setting, zTreeNodes); $("#tree") 是获取页面上一个 id 为 tree 的 <ul> 元素 zTree() 方法是加载树形结构，它需要两个参数，一个为 setting,zTree 的参数配置数据 ,json

zTree 显示为‘aa’,当选择aa时,传的参数为‘22’

由 荒凉一梦 提交于 2019-12-26 03:50:37
var setting = { view: { selectedMulti: false }, check: { enable: true //初始化树 function treeInt(){ $('#treeDemo').empty(); $.ajax({ type:"get", // url:"/styles/js/mock_data/inspect/task_tree.json", url:"/api/inspect/getTaskTree", dataType:'json', async:true, success:function(response){ if(response.code==200){ var data = response.data; function tree(m){ var nodes = []; if(m.length !== 0){ $.each(data, function(i,v) { var obj = {}; obj.name = v.displayName; obj.t = v.fullName; obj.open = true; // obj.icon = "../../../css/zTreeStyle/img/diy/treeIcon.png"; if(v.subNodes !== null){ obj.children = [];
订阅 ztree