了解了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. php微信接口实例

    <?php /** * wechat php test */ //define your token //定义TOKEN秘钥 define("TOKEN", "we ...

  2. SpringMVC学习系列(6) 之 数据验证

    在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 —> 数据验证. 这里我们采用Hibernate-validator来进行验 ...

  3. MVC:上传文件时限制文件类型

    之前写过一篇:MVC:上传文件 今天补充下一个功能:如何限制上传文件类型 文件类型可以在前段限制,但是太容易被绕过,最好还是在后端处理. 修改upload方法代码: [HttpPost] public ...

  4. OPTIMIZE TABLE的作用--转载

    当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删 除操作后在数据文件中留下碎片所致.Discuz! 在系统数设置界面提供了数据表优化的功能,可以去除删除操作后留下的数据文件 ...

  5. 48. Remove Duplicates from Sorted List && Remove Duplicates from Sorted List II

    Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that each ...

  6. Symfony2 通过命令行调用控制器

    由于系统需求,需要写一个无限循环的控制器,那么既然有一个无限循环的控制器,那么就需要有一个开关,不可能直接通过route来开启吧.当然要使用高级一点的方法啊. 那就是使用控制台通过命令行(comman ...

  7. [Appium] 使用Appium过程中遇到的各种坑

    以下问题都是以ios为背景: 1. 问题: Case: 在页面S1上,点击元素A后,判读B元素是否出现. Detail:一开始通过Appium Inspector, 可以找到B元素,所以直接取该元素的 ...

  8. 转:Connection: close和Connection: keep-alive有什么区别?

    原文:http://www.cnblogs.com/TinyMing/p/4597136.html 一.问题现象: 一个JSP页面,居然要耗时40多秒.网页中有大量的图片的CSS问题解决: 原因也找了 ...

  9. linux中软链接打包、计算以及同步

    目录test中存在软连接: 1.打包,参数h(将实际文件进行打包): tar zcvfPh test.tar.gz   test 2.计算大小,参数L(计算的是实际文件的大小): du -sL  te ...

  10. 使用JDBC进行批处理

    在实际的项目开发中,有时候需要向数据库发送一批SQL语句执行,这时应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升执行效率. JDBC实现批处理有两种方式:statement和pr ...