上网搜了很多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
递归的方法判断无限层级下的状态

谢谢大家!!!

目录
相关文章
|
30天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
50 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
60 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
36 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
36 4
jQuery Cookie 插件
|
2天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
12 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
33 0
|
6月前
|
JSON JavaScript 数据格式
jQuery 树型菜单完整代码
jQuery 树型菜单完整代码
|
6月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
52 0
|
6月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
58 0