上网搜了很多JQuery树型表格插件都不满意,决定自己写

简介: 效果图第一次写简书好激动,就是想和大家分享下   O(∩_∩)O哈哈哈~干货来了~~~~~~~~~1.  首先是对数据的处理接口返回的没有结构的数据,只有数据关系这里要把这些没有结构的数据,进行树型结构处理,你们自己...
img_4bde16aa1d4f8a70d95649391898bf92.png
效果图

第一次写简书好激动,就是想和大家分享下   O(∩_∩)O哈哈哈~

干货来了~~~~~~~~~

1.  首先是对数据的处理


img_0a7e4a3311f98fc16ca8049dc8b5df92.png
接口返回的没有结构的数据,只有数据关系

这里要把这些没有结构的数据,进行树型结构处理,你们自己看吧,copy调用就行了<( ̄3 ̄)> !,下面是树型处理的方法:

<pre>

// 入参:生成树的数组,id的属性名,父id的属性名,生成的子数组的,排序的属性,升序asc/降序desc

generateTree: function(array, idName, parentIdName, childrenName, sortName, sortType) {

if (!array) {

return [];

}

idName = idName || "id";

parentIdName = parentIdName || "parentId";

childrenName = childrenName || "children";

//sortName = sortName || "sort";

sortType = sortType || "asc";

var result = [];

var leafList = [];

var parent = {}; // 缓存所有的父id

// 先收集所有的父元素id

$.each(array, function(i, n) {

if (!parent[n[parentIdName]]) {

parent[n[parentIdName]] = 1;

}

});

// 区分叶子节点和父节点,父节点放result里,叶子节点放leafList里

$.each(array, function(iLeaf, leaf) {

if (typeof(leaf[childrenName]) == 'undefined') {

leaf[childrenName] = [];

}

if (parent[leaf[idName]] == 1) {

// 当前元素是父节点

result.push(leaf);

} else {

// 当前元素是叶子节点

leafList.push(leaf);

}

});

// 排序

if (sortName) {

$.kingdom.quickSort(leafList, 0, leafList.length - 1, sortName, sortType);

}

// 当result的length和array的length一样时,说明全是叶子元素,则跳出

if (leafList.length == array.length) {

return leafList;

}

// 此时,result里面没有叶子元素了

// 把叶子元素放入result中对应元素的属性中

// 若没有对应元素匹配,则直接放到result数组中

$.each(leafList, function(iLeaf, leaf) {

// 是否已经放入结果集

var hasPushed = false;

$.each(result, function(iParent, parentObject) {

if (leaf[parentIdName] == parentObject[idName]) {

// 把叶子元素放入result中对应元素的属性中

parentObject[childrenName].push(leaf);

hasPushed = true;

return false; // 实现break功能

}

});

$.each(result, function(i, e) {

$.kingdom.quickSort(e[childrenName], 0, e[childrenName].length - 1, idName, "asc")

});

// result中没有对应元素匹配,则直接放到result数组中

if (hasPushed == false) {

result.push(leaf);

}

});

// 继续找叶子元素,直到全是叶子元素

return $.kingdom.generateTree(result, idName, parentIdName, childrenName, sortName, sortType);

}

</pre>

2,渲染,我写的渲染是点一次生成一次的,不是点一次调用一次接口

一开始写的点一次调一次几口,太浪费资源了,我把接口返回的数据,定义个变量存了起来,顺便又对数据修饰了下,方便我渲染。\(^o^)/~


img_daf6d84c03014edef1d66f83520b8858.png
数据处理


img_53df8bb629c71ad728b6a211644f025b.png
生成后的数组

填充后的效果:


img_65499c9215f3b2e80055fa7dca4d4210.png
先得到是最顶级的元素

3,下面来看看控制怎么写的 O(∩_∩)O~


img_cc498aeec22a97a4c132f311324184d9.png
jquery控制


img_94b30bba30ff934238963253238ca0d8.png
递归的方法判断无限层级下的状态

谢谢大家!!!

目录
相关文章
|
17天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
56 21
|
18天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
48 16
|
13天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
39 9
|
16天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
18天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
17天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
14天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
24 2
|
14天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
18天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
16天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
21 2