干货 把ajax获取的数据转化成树状结构(并做成多级联动效果)
2018-01-30 10:38
337 查看
1.首先通过ajax获取数据,此处省略,直接贴出获取到的数据格式
];
2.定义函数 proJSON将获取到的数据转化为树状结构
3.调用函数,将原始数据转化为树状结构数据
此时输出的即为以下格式的树状结构
4.分享一个网上找的极好的插件mobileSelect.js
在实际开发过程中我们经常会遇到多级联动,比如省市区多级联动等等,之前就做过一个项目需要从数据库获取省市区的数据再在移动端展示出来,当时使用的插件是网上找的一个叫做LArea.js的插件,需要把获取的数据改成该插件自带数据的格式,用起来还不错,id和value都可以回写在标签中,但是有个很大的局限:只支持三级联动。所以当我发现以下插件的时候简直如获珍宝!!!LArea.js有的它都有,而且它支持无限级联动,使用时的数据结构正是上面所讲的树状结构,也就是说,当你拿到数据库的数据,proJSON一下,把数据塞进调用函数中就可以坐等一个完美的页面了(而且该插件是原生js写的不依赖jquery,只是我习惯用jquery所以引入了jquery插件),废话不多说,直接上代码。
html部分
js 直接用刚刚的树状结构数据
完活
附上插件下载地址点击打开链接
https://github.com/onlyhom/mobileSelect.js
本人职场小白,刚毕业,如有问题还请各位大神多多指教
var arr = [{ id: 1, name: "一级标题", pid: 0 }, { id: 2, name: "二级标题", pid: 0 }, { id: 3, name: "2.1级标题", pid: 2 }, { id: 4, name: "2.2级标题", pid: 2 }, { id: 5, name: "1.1级标题", pid: 1 }, { id: 6, name: "1.2级标题", pid: 1 }, { id: 7, name: "1.21级标题", pid: 6 }, { id: 8, name: "三级标题", pid: 0 }, { id: 9, name: "1.22级标题", pid: 6 }, { id: 10, name: "1.221级标题", pid: 9 }, { id: 11, name: "1.2211级标题", pid: 10 }, { id: 12, name: "1.2212级标题", pid: 10 }
function proJSON(oldArr, pid) { var newArr = []; var self = this; oldArr.map(function(item) { if(item.pid == pid) { var obj = { id: item.id, value: item.name } var childs = self.proJSON(oldArr, item.id); if(childs.length > 0) { obj.childs = childs } newArr.push(obj) } }) return newArr; };
];
2.定义函数 proJSON将获取到的数据转化为树状结构
function proJSON(oldArr, pid) { var newArr = []; var self = this; oldArr.map(function(item) { if(item.pid == pid) { var obj = { id: item.id, value: item.name } var childs = self.proJSON(oldArr, item.id); if(childs.length > 0) { obj.childs = childs } newArr.push(obj) } }) return newArr; };
3.调用函数,将原始数据转化为树状结构数据
$(function(){ var testdata = proJSON(arr,0); console.log(testdata); })
此时输出的即为以下格式的树状结构
[{ id: 1, value: "一级标题", }, { id: 2, value: "二级标题", childs:[{ id:3, value:"2.1级标题" }] } ];
4.分享一个网上找的极好的插件mobileSelect.js
在实际开发过程中我们经常会遇到多级联动,比如省市区多级联动等等,之前就做过一个项目需要从数据库获取省市区的数据再在移动端展示出来,当时使用的插件是网上找的一个叫做LArea.js的插件,需要把获取的数据改成该插件自带数据的格式,用起来还不错,id和value都可以回写在标签中,但是有个很大的局限:只支持三级联动。所以当我发现以下插件的时候简直如获珍宝!!!LArea.js有的它都有,而且它支持无限级联动,使用时的数据结构正是上面所讲的树状结构,也就是说,当你拿到数据库的数据,proJSON一下,把数据塞进调用函数中就可以坐等一个完美的页面了(而且该插件是原生js写的不依赖jquery,只是我习惯用jquery所以引入了jquery插件),废话不多说,直接上代码。
html部分
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>多层级下拉框</title> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="wap-font-scale" content="no"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no"> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/public.css"> <!-- 引入样式和js文件 --> <link rel="stylesheet" type="text/css" href="css/mobileSelect.css"> <script src="js/jquery.min.js"></script> <script src="js/mobileSelect.js" type="text/javascript"></script> </head> <body> <div class="contain"> <div class="fixWidth"> <div class="nav"> <h1>mobileSelect Demo</h1> </div> <div class="demo"> <div id="test">测试下拉框</div> </div> </div> </div> </body> </html>
js 直接用刚刚的树状结构数据
var mobileSelect5 = new MobileSelect({ trigger: '#test',//下拉框id title: '测试下拉框', wheels: [ {data : testdata}//树状结构数据 ], transitionEnd:function(indexArr, data){ // console.log(data); }, callback:function(indexArr, data){//回调,此处即可将选择的数据post到数据库 console.log(data); $("#test").attr("id",data[data.length-1].id); } });
完活
附上插件下载地址点击打开链接
https://github.com/onlyhom/mobileSelect.js
本人职场小白,刚毕业,如有问题还请各位大神多多指教
相关文章推荐
- 利用ajax技术从后端获取数据来制作留言本类瀑布流效果
- ajax+dom+php+mysql实现多级联动效果
- 将当前时间戳转化为 struct tm 结构 然后获取自己想要的数据
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
- ajax+dom+php+mysql实现多级联动效果
- ajax完成异步的省市联动效果--使用xml接收数据
- 用Ajax实现多级联动下拉列表For JSP(无限级别,JSON传输数据,含全国地区数据库
- jQuery与Ajax小练习-二级联动(从Oracle数据库获取数据)
- iOS:二叉树多级表格的使用,使用三方库TreeTableView-master实现对json解析数据的递归遍历整理成树状结构
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- ajax(三)之省市二级菜单联动(从sql获取数据),无刷新翻页
- 实现多级下拉框联动获取数据
- ajax--将获取到的文件内的数据转化成json格式并使用---输入提示
- MySQLl命令desc:获取数据表结构
- 页面单击按钮弹出modaldialog然后调用ajax处理程序获取数据,给父级页面控件赋值
- jquery的ajax和getJson跨域获取json数据
- php ajax实现的二级(多级)联动菜单(2008-10-21,11:36:08)
- asp.net线程批量导入数据时通过ajax获取执行状态
- 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据
- JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程