我的前端工具集(四)树状结构后篇

我的前端工具集(四)树状结构后篇

liuyuhang原创，未经允许禁止转载

我的前端工具集

上文连接

我的前端工具集(四)树状结构前偏

1.数据组织

　　在3.2.节有截图

2.树状结构代码

　　2.1.css代码，自己可以随意修改，也蛮方便

.treeDiv {margin: 2px 0px 2px 0px;padding: -1px;width: 800px;
}.others {padding: 1px 5px 1px 5px;margin: 0px 1px 0px 1px;
}.plusBtn {padding: 1px 5px 1px 5px;margin: 0px 3px 0px 0px;
}.On {color: #26ca28;margin-left: 4px;
}.Off {color: white;margin-left: 12px;margin-right: 6px;
}.checkboxBtn {border-radius: 15px;background-color: #cccccc;border-width: 2px;border-color: #999999;border-style: solid;border-collapse: inherit;padding: 2px 0px 0px 0px;height: 22px;width: 22px;margin-right: 2px;font-size: 12px;
}

　　2.2.js代码，注意看注释说明，List的构成

　　　　/*** list构成* [{id:id , pid:pid , param1:param1 , param2:param2 , ...} ,...]* @param:id:目标div的id* @param:list:树形结构的json,构成如上* @param:arr:要从list中遍历出来作为一行的顺次元素数组.arr[i]将作为其class之一* @isCheckbox:是否添加层级复选框* @pid:顶级pid,初始化使用0*/function initTree(id, list, pid, arr, isCheck) {if (pid == 0 || (pid != 0 && $("#" + id + " #span-down-" + pid).is(":hidden"))) {var result = "";for (var i = 0; i < list.length; i++) {var row, //定义当前行divtab, //定义缩进checkbox, //定义checkboxplus; //定义节点if (list[i].pid == pid) {row = "<div id='" + list[i].id + "' pid='" + list[i].pid + "' class='treeDiv'>";if (pid != 0) {var space = parseInt($("#" + id + " #" + pid + " .space").css("padding-left").split("px")[0]) + 28;tab = "<span class='space' style='padding-left:" + space + "px'></span>";} else {tab = "<span class='space' style='padding-left:0px;'></span>";}if (isCheck) {checkbox = "<button select='off' class='btn checkboxBtn' οnclick='selectChange(\"" + id + "\",\"" + list[i].id + "\")'></button>";}plus = "<button type='button' class='btn btn-default plusBtn'>" + "<span  id='span-right-" + list[i].id + "' class='glyphicon glyphicon-plus' style='color:black'></span>"+ "<span id='span-down-" + list[i].id + "' class='glyphicon glyphicon-minus' style='color:black;display:none'></span></button>"var others = "<button type='button' class='btn btn-default btn-xs other'>";for (var j = 0; j < arr.length; j++) {others = others + "<span style='padding:5px' class='" + arr[j] + "'>" + list[i][arr[j]] + "</span>";}result = result + row + tab + (isCheck ? checkbox : "") + plus + others + "</button></div>";}}//加载内容if (pid == 0 || pid == "0") {$("#" + id).append(result);//获取已加载的节点的pidvar temp = $("#" + id + " .treeDiv");//循环该idfor (var i = 0; i < temp.length; i++) {var thisId = $(temp[i]).attr("id");//调用自身加载节点
                        initTree(id, list, thisId, arr, isCheck);}} else {$("#" + id + " #" + pid).append(result);//获取已加载的节点的pidvar temp2 = $("#" + id + " #" + pid + " .treeDiv");//循环该idfor (var i = 0; i < temp2.length; i++) {var thisId2 = $(temp2[i]).attr("id");//调用自身加载节点
                        initTree(id, list, thisId2, arr, isCheck);}}//展开节点按钮监听$("#" + id + " .plusBtn").unbind("click");$("#" + id + " .plusBtn").click(function() {initTree(id, list, $(this).parent().attr("id"), arr, isCheck);});$("#" + id + " #span-right-" + pid).hide();$("#" + id + " #span-down-" + pid).show();} else {$("#" + id + " div[pid='" + pid + "']").remove();$("#" + id + " #span-right-" + pid).show();$("#" + id + " #span-down-" + pid).hide();}}

3.调用及效果

　　3.1.调用代码

　　　 $("#assetShowTree").html(""); //删除原有树控件console.log(list);//打印数据initTree("assetShowTree", list, 0, [ "assetName", "assetDesc", "inspecteStatusShow", "fixStatusShow" ], true);

　　3.2.调用效果截图以及数据

4.其他功能

　　4.1.若该树调用时，复选框参数为true，则有复选框功能，要搭配复选框的js函数

　　　　点击父节点的checkbox，子节点也会跟随点亮

　　　checkbox是div模拟的，增加了select属性，为on即为选择，为off即为未选择。

　　　　获取多选id在4.2.节

        /*** 点击复选框的函数 * @param:id:目标div的id* @param:listId:被点击的复选框所属的数据中的id标识*/function selectChange(id, listId) {//当前节点选择if ($("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color") == "rgb(255, 204, 0)") {$("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color", "rgb(204, 204, 204)");} else {$("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color", "rgb(255, 204, 0)");}//子节点同步点亮var temp = $("#" + id + " .checkboxBtn");for (var i = 0; i < temp.length; i++) {if ($(temp[i]).css("background-color") == "rgb(204, 204, 204)") {$(temp[i]).attr("select", "off");} else {$(temp[i]).attr("select", "on");}}//关联选择while (true) {var count = $("#" + id + " .checkboxBtn[select='off']").length; //当前off统计,中间是否有变化,用来做跳出while循环条件for (var i = 0; i < $("#" + id + " .checkboxBtn").length; i++) {if ($($(".checkboxBtn")[i]).attr("select") == "on") {//若当前节点为on,遍历兄弟节点获取状态,若都为on,则点亮直接父节点var spid = $($("#" + id + " .checkboxBtn")[i]).parent().attr("pid"); //点击节点的pidvar bro = $("#" + id + " .treeDiv[pid='" + spid + "']>.checkboxBtn");var flag = true;for (var j = 0; j < bro.length; j++) { //pid相等的节点组if ($(bro[j]).attr("select") == "off") { //若子节点中有为off的,则跳出循环flag = false;break;}}if (flag) { //若所有节点都为on,则点亮父节点$("#" + id + " #" + spid + ">.checkboxBtn").css("background-color", "rgb(255, 204, 0)");$("#" + id + " #" + spid + ">.checkboxBtn").attr("select", "on");}} else {//若当前节点为off,当前节点的直接父节点为offvar spid = $($("#" + id + " .checkboxBtn")[i]).parent().attr("pid");$("#" + id + " #" + spid + ">.checkboxBtn").css("background-color", "rgb(204, 204, 204)");$("#" + id + " #" + spid + ">.checkboxBtn").attr("select", "off");}}if (count == $("#" + id + " .checkboxBtn[select='off']").length) {break;}}}

　　4.2.获取复选框多选的id列表

        /*** 获取树形控件中已选择的id列表,备用* @param:id:树形结构所在的div的id*/function getAllIds0000(id) {var arr = [];var temp = $("#" + id + " .checkboxBtn");for (var i = 0; i < temp.length; i++) {if ($(temp[i]).attr("select") == "on") {var id = $(temp[i]).parent().attr("id");arr.push(id);}}console.log(arr);return arr;}

以上！

转载于:https://www.cnblogs.com/liuyuhangCastle/p/9801159.html

我的前端工具集(四)树状结构后篇相关推荐

【java工具类】四级菜单如何实现树状结构展示JSON给前端
前言: 主要是传给前端进行树状结构操作比较好,这样可以关联上下四级选择项,所以需要把表中的数据List转成一个树状结构. 1.数据库数据是静态的四级目录数据是这样的四级目录,没有特别明确的id进行关 ...
我的前端工具集（五）提示工具之模态窗提示
我的前端工具集(五)提示工具之模态窗提示 liuyuhang原创,未经允许禁止转载目录我的前端工具集 1.需求很多页面操作都需要提示,比如操作成功,操作失败之类. 总不能没事就console ...
java构建树状结构工具类
树状结构工具创建类TreeUtil 类属性 private List<T> rootList; //根节点对象存放到这里private List<T> bodyList; / ...
猿如意前端工具集使用体验
猿如意前端工具集使用体验 CSDN最近发布了一款应用"猿如意",里面有很多开发相关的工具软件.今天正好把手里里工作忙完,于是准备下载体验一番. 打开猿如意,输入"前端&q ...
前端获取后端的数组对象处理（去重，排序，转为树状结构）
后端接口数据处理,对数组对象进行去重(通过元素id去重),排序,转为树状结构下面为后端转过来的一个扁平数据 var data = [{id: '1',staffName: '陈三三',truePr ...
oracle 树状结构一直出现不了_深入解析Oracle ASSM 段头块(PAGETABLE SEGMENT HEADER)结构...
一.概念介绍 Oracle ASSM(Automatic Segment Space Managed)使用位图来管理数据库中的空间,具有管理简单.高并发等优点,ASSM的整体结构是3层位图块+数据块, ...
下拉菜单实现树状结构_树形图：复杂层次结构的数据可视化
树形图:复杂层次结构的数据可视化作者:Page Laubheimer[1] 树形图是一种复杂的,基于区域的数据可视化,用于复杂层次结构的数据,可能难以精确解释.在许多情况下,最好使用更简单的可视化效 ...
树状结构搜索功能_百度搜索算法全解析SEO课程笔记
搜索算法全解析SEO课程笔记主要知识点 1.新站建立适当交换外链利于发现,也可以使用主动提交到百度站长平台发现网站. 2.首页内容要保持更新速度,持续优化,并且视觉感官上符合简单.明了.主题明确.无冗 ...
vue项目结合iview4UI组件实现树状结构及复杂动态表头列表 Tree-Table 及复杂header 省市区树状表格联动数据优化后台一次性返回一万条数据页面卡死问题
一.首先看看需求最终效果图,该需求总共罗列以下几点最左侧采用树状结构将地址省市区县街道展示出来,并且控制名称长度限制,多余的用省略号表示,鼠标悬浮上去名称展示出来列表默认展示市一级数据,县及街道数 ...

我的前端工具集(四)树状结构后篇

我的前端工具集(四)树状结构后篇相关推荐

最新文章

热门文章