easyui中tree使用simpleData的形式加载数据
了解了zTree的使用, 发现它的simpleData是非常好用的, 由后台返回一个扁平数据, 直接在前台解析成树形菜单, 网上查了一下, easyui也可以简单实现, 不过....没看懂, 先记录一下
<script type="text/javascript">
$(document).ready(function() {
$("#tt").tree({
url:"JsonString_zTree",
checkbox:true,
lines:true,
dnd:true,
parentField:"parentid",//必须
textFiled:"menuName",//必须
idFiled:"id",//必须
onCheck:function(node, checked) {
alert(node.id+" - "+node.text);
}
});
}); //easyui实现自定义simpleData加载
$.fn.tree.defaults.loadFilter = function (data, parent) {
var opt = $(this).data().tree.options;
var idFiled,
textFiled,
parentField;
if (opt.parentField) {
idFiled = opt.idFiled || 'id';
textFiled = opt.textFiled || 'text';
parentField = opt.parentField; var i,
l,
treeData = [],
tmpMap = []; for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
} for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textFiled];
tmpMap[data[i][parentField]]['children'].push(data[i]);
} else {
data[i]['text'] = data[i][textFiled];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
};
</script>
后台返回的数据:
[
{"id":"1","menuName":"我的工作台","parentid":"0"},
{"id":"10","menuName":"拓展计划","parentid":"7"},
{"id":"11","menuName":"广告完成计划","parentid":"8"},
{"id":"12","menuName":"销量完成计划","parentid":"8"},
{"id":"13","menuName":"省领导任务","parentid":"9"},
{"id":"14","menuName":"市县领导任务","parentid":"9"},
{"id":"15","menuName":"今日完成","parentid":"3"},
{"id":"2","menuName":"我的文档","parentid":"1"},
{"id":"3","menuName":"我的计划","parentid":"1"},
{"id":"4","menuName":"我的会议","parentid":"1"},
{"id":"5","menuName":"客户文档","parentid":"2"},
{"id":"6","menuName":"公司文档","parentid":"2"},
{"id":"7","menuName":"我的上班计划","parentid":"0"},
{"id":"8","menuName":"工作计划","parentid":"7"},
{"id":"9","menuName":"任务计划","parentid":"7"}
]
easyui中tree使用simpleData的形式加载数据的更多相关文章
- VC++ 使用WebBrowser控件中html文件以资源形式加载
. . . . //加载资源文件中的HTML,IDR_HTML1就是HTML文件在资源文件中的ID wchar_t self_path[MAX_PATH] = { }; GetModuleFileNa ...
- EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- EasyUI datagrid 改变url属性 实现动态加载数据
$(function () { //说明:btnsearch按钮,selCat下拉列表,ttdatagrid table $("#btnsearch").click(functio ...
- react中使用antd Table组件滚动加载数据的实现
废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...
- swift中利用系统线程实现异步加载数据同步更新UI
swift中的使用案例样式 // Mark: -数据源更新 typealias AddDataBlock = () ->Void var updataBlock:AddDataBlock? fu ...
- 使用EasyUI中Tree
easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...
- 做权限树时 使用EasyUI中Tree
符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
随机推荐
- 完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能
#!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...
- Apache Shiro简介
作者:var dump链接:https://zhuanlan.zhihu.com/p/23300328最近要做一个基于Java C/S架构的项目,主要涉及权限管理这方面的东西.了解到Apache Sh ...
- [Spring MVC] - Spring MVC环境搭建
1) 复制Spring所需要的lib包 (这是SSH所需要的lib包,如果只使用spring,可以移除一些包) 2) 配置web.xml <?xml version=" ...
- Codeforces Round #378 (Div. 2) D - Kostya the Sculptor
Kostya the Sculptor 这次cf打的又是心累啊,果然我太菜,真的该认真学习,不要随便的浪费时间啦 [题目链接]Kostya the Sculptor &题意: 给你n个长方体, ...
- OpenGL 学习
一.红宝书学习资料汇集 第八版的图书源码 源代码: http://opengl-redbook.com/Code/oglpg-8th-edition.zip 第九版的图书源码 http://www.o ...
- VG vs SS WE vs IM [20160815]
上单:慎,纳尔,艾克,艾瑞莉娅,普朗克 中单:弗拉基米尔,玛尔扎哈,卡尔玛,丽桑卓,索尔,崔斯特,辛德拉 打野:雷克赛,奈德丽,古拉加斯,伊莉丝,赫卡里姆,玛尔扎哈 下路:艾希,克格莫,烬,希维尔,布 ...
- Codeforces 723e [图论][欧拉回路]
/* 不要低头,不要放弃,不要气馁,不要慌张. 题意: 给你一个有n个点,m条边的无向图,给每条边规定一个方向,使得这个图变成有向图,并且使得尽可能多的点入度与出度相同. 输出有多少个这样的点并且输出 ...
- weblogic 优化设置 http://wenku.baidu.com/view/c42e7a5bbe23482fb4da4cf2.html
引自:http://wenku.baidu.com/view/c42e7a5bbe23482fb4da4cf2.html
- Windows资源管理器 已停止工作
解决方案:http://jingyan.baidu.com/article/5225f26b6aa830e6fa0908a8.html
- Qlik 函数说明
集合表达式 包括 标识符 标识符 说明 1 表示应用程序中所有记录的完整集合,而不考虑选择的任何选择项.考虑维度 $ 表示当前选择项的记录.因此,集合表达式 {$} 与不陈述集合表达式的意义等同. $ ...