了解了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的形式加载数据的更多相关文章

  1. VC++ 使用WebBrowser控件中html文件以资源形式加载

    . . . . //加载资源文件中的HTML,IDR_HTML1就是HTML文件在资源文件中的ID wchar_t self_path[MAX_PATH] = { }; GetModuleFileNa ...

  2. EasyUI使用tree方法生成树形结构加载两次的问题

    html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

  3. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  4. EasyUI datagrid 改变url属性 实现动态加载数据

    $(function () { //说明:btnsearch按钮,selCat下拉列表,ttdatagrid table $("#btnsearch").click(functio ...

  5. react中使用antd Table组件滚动加载数据的实现

    废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...

  6. swift中利用系统线程实现异步加载数据同步更新UI

    swift中的使用案例样式 // Mark: -数据源更新 typealias AddDataBlock = () ->Void var updataBlock:AddDataBlock? fu ...

  7. 使用EasyUI中Tree

    easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...

  8. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  9. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

随机推荐

  1. python学习-day16:函数作用域、匿名函数、函数式编程、map、filter、reduce函数、内置函数r

    一.作用域 作用域在定义函数时就已经固定住了,不会随着调用位置的改变而改变 二.匿名函数 lambda:正常和其他函数进行配合使用.正常无需把匿名函数赋值给一个变量. f=lambda x:x*x p ...

  2. State Machine.(状态机)

    What is a State Machine? Any device that changes its state from one to another due to some actions a ...

  3. CSS基本语法

    这里主要介绍Bootstrap里用到的CSS语法,以便在源码分析时更容易理解和学习.Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理. 优先级 如何确定CSS的优先级,这里 ...

  4. 网站整合Ucenter详细流程

    最近公司项目要用到SNS,在具体采取解决方案上面由于项目由一实力较强的外包公司做,所以没有采用商业解决方案.不过本人一直比较看好康盛的产 品,因为被外派到外包公司去负责项目,尽管以前用的SNS也在不少 ...

  5. ubuntu 下载额外数据不成功”的恼人提示通知

    最近用Ubunt也遇到这个问题,搜到这个答案 参考原文链接: http://forum.ubuntu.org.cn/viewtopic.php?t=387865 2.移除“下载额外数据不成功”的恼人提 ...

  6. eclipse 工程默认编码修改 JSP编码修改

    1. Window->Preferences->General->Workspace->Text file encoding 将其改为UFT-8  新建的文件即为UTF-8编码 ...

  7. 利用反射及JDBC元数据编写通用查询方法

    元数据:描述数据的数据,ResultSetMetaData是描述ResultSet的元数据对象,从它可以得到数据集有多少了,每一列的列名... ResultSetMetaData可以通过ResultS ...

  8. 重置SQL Server连接池

    EXEC sp_configure 'show advanced options', 1 GO -- To update the currently configured value for adva ...

  9. apache2 tomcat https配置-被忽悠进了CentOS 6

    因为需要让ios应用可以绕过appstore,要找个https的地方放ipa,决定使用已有http server. 首先需要说明的是,apache可以通过反向代理方式将用户的https分发到tomca ...

  10. JavaScript Function(函数表达式)

    创建函数 创建函数的方式有两种:1.函数声明,2.函数表达式 函数声明的语法为 functionName(); //不会报错,函数声明提升function functionName(arg0,arg1 ...