最近完成了一个可以拖拽的异步按需加载树,顾名思义,这个树,至少支持以下三个功能。

1,节点可以拖拽(项目需要,已设置为只允许同级节点拖拽)。

2,异步加载(使用ajax加载数据,没啥好说的)。

3,按需要加载(点击展开按钮时,加载所需数据,不点击不加载,最小化的加载数据,最大化的支持大数据,哈哈)。

下面就这三个功能,分别贴出关键代码。

一,节点可以拖拽需要添加的代码。

1,先对树型控件的setting变量增加如下属性,并添加dropPrev,dropInner,dropNext方法,具体方法内容,请点击后面demo中网址右键。

edit: {enable: true,showRemoveBtn: false,showRenameBtn: false,drag: {autoExpandTrigger: true,prev: dropPrev,inner: dropInner,next: dropNext}}

2,在callback属性中加载如下代码,并分别新建两个方法beforeDrag和beforeDrop

callback: {beforeDrag: beforeDrag,beforeDrop: beforeDrop}

至此拖拽功能基本实现,详细代码请自行扒下。

二:异步加载(使用ajax加载数据,没啥好说的),代码略。

三:按需要加载(点击展开按钮时,加载所需数据,不点击不加载)

1,在callback属性中加载如下代码,并新建方法beforeExpand,为什么是beforeExpand而不是onExpand呢,是因为在这个树中,预加载比加载完成后显示效果好。

callback: {beforeExpand: beforeExpand}

并且这里有个小技巧:若节点存在子节点,就让其前面以文件夹图标显示,方法如下。

public string GetList()
{
string parentId = RequestExtension.GetForm<String>("parentId", "");
if (String.IsNullOrEmpty(parentId))
{
parentId = new Guid().ToString();
}

StringBuilder treeSb = new StringBuilder("[");

var list = fileTypeRepository.GetFileTypeByParentId(new Guid(parentId));

foreach (var item in list)
{
treeSb.Append(string.Concat("{'id':'", item.ID, "'"));
treeSb.Append(string.Concat(",'name':'", item.TypeName.Trim(), "'"));

var childList = fileTypeRepository.GetFileTypeByParentId(item.ID);
if (childList.Count > 0)
{
treeSb.Append(",'isParent':true");
}
else
{
treeSb.Append(",'isParent':false");
}

treeSb.Append("},");
}
return String.Concat(treeSb.ToString().TrimEnd(','), "]");
}

这里如果有子节点,不管多少,虚加载一个名字为本人名字的节点,当然这个子节点在父节点展示时,自然会被干掉,同时真正的节点加载进来,并同时判断这一级节点是否有子节点,代码如下:

        function beforeExpand(treeId, treeNode) {if (treeNode.children) {for (i = 0; i < treeNode.children.length; i++) {zTree.removeNode(treeNode.children[i]);}}if (treeNode.children) {for (i = 0; i < treeNode.children.length; i++) {zTree.removeNode(treeNode.children[i]);}}$.post("/Ashx/FileType.ashx?action=GetList", { parentId: treeNode.id }, function (txt) {var childNodes = eval(txt);for (i = 0; i < childNodes.length; i++) {var newNode = { id: childNodes[i].id, name: childNodes[i].name, children: childNodes[i].children, childOuter: false };addTreeNode(treeNode, newNode);}}, "text");return (treeNode.expand !== false);}

这里判断清除children用了两次,不得已,因为只清除一次,有子节点的节点不会被清除,所以需要清除两次,若是有人有更好的办法,一次就清除,不吝赐教。

(找到问题的原因了,清除子节点的代码应该改为:

                var childCount = treeNode.children.length;for (i = 0; i < childCount; i++) {            zTree.removeNode(treeNode.children[0]);            }

这段代码有意思,呵呵。2月16号备注。

至此,一个可以拖拽的异步按需加载树就基本完成,当然这个树,还不只这点功能,比如右键增加、删除节点,比如修改节点等等,都一一实现,更多效果,请查看demo网址:http://www.qicheba.net/FileManage/TypeManage

如果觉得有用,请猛击推荐,谢谢。

备注:这个Demo使用了一款功能强大的树型控件,名字叫:zTree,官网地址:http://www.ztree.me/v3/demo.php#_101

转载于:https://www.cnblogs.com/ushou/archive/2013/01/31/2888249.html

一个可以拖拽的异步按需加载树相关推荐

  1. React单页如何规划路由、设计Store、划分模块、按需加载

    本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...

  2. vue 路由按需加载

    在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...

  3. 利用jQuery的deferred异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码), ...

  4. 经验总结:按需加载JS和css

    项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...

  5. iOS和tvOS游戏按需加载资源简介

    2019独角兽企业重金招聘Python工程师标准>>> 戴维营教育翻译:感谢Davis Allie的An Introduction to On-Demand Resources on ...

  6. On-Demand Resources Guide中文版(按需加载资源--上)

    本文翻译由唧唧歪歪翻译自Apple文档 On-Demand Resources Guide On-Demand Resources Guide中文版(按需加载资源--下)包含管理按需加载资源.调试以及 ...

  7. antd 日期选择框如何提交_基于Ant Design的Modal组件来实现一个可拖拽的React模态框...

    引言 写这篇文章的原因是因为在项目中用到了Antd Design的React组件,当有业务需求需要用到模态框的时候遇到了一些小问题,Antd的模态框Modal组件时不能拖拽的,一般情况下不可拖拽也没什 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. 【GitHubDailyShare】开源的可视化平台搭建方案,让你可以快速定制一个可视化拖拽平台

    开源的可视化平台搭建方案:dooringx,通过提供一套数据流事件机制.弹窗等解决方案,让你可以快速定制一个可视化拖拽平台. GitHub:github.com/H5-Dooring/dooringx ...

最新文章

  1. dell 远程访问管理卡iDRAC 7
  2. PAT甲级1013 Battle Over Cities:[C++题解]并查集、结构体存边
  3. JavaScript实现找出买卖股票的最大利润算法(附完整源码)
  4. SpringIOC容器-创建对象
  5. PyQt5学习笔记(二) 文本控件及使用
  6. [HAOI 2010]订货
  7. switch php 比大小,PHP 基础:比较、If、Switch
  8. 带哨兵节点的链_Redis 哨兵节点之间相互自动发现机制(自动重写哨兵节点的配置文件)...
  9. 编译原理:有穷自动机(DFA与NFA)
  10. com app.html,downloadApp.html
  11. linux grep 日期,linux 文本处理工具之一grep命令详解
  12. Linux平台提取DSDT,ubuntu下提取DSDT SSDT
  13. Iptables详解七层过滤
  14. 【python练习笔记】神秘的王宫
  15. Python分析双色球,中大奖指日可待
  16. 安卓手机 ADB 操作指令
  17. 铁流:苹果为何不找IBM,而选择中国浪潮
  18. STC用PCA测量脉宽_示波器在进行频率测量时如何减少误差
  19. Linux运维:推荐八款Linux远程连接工具
  20. ​​​​​​青少年软件编程(C语言)等级考试试卷目录一览

热门文章

  1. C#中动态加载和卸载DLL
  2. delphi self 的使用
  3. UA SIE545 优化理论基础1 凸分析8 极点与极方向
  4. bochs调试linux内核学习4 - bochs配置文件的$BXSHARE变量、bochs的System BIOS must end at 0xfffff错误、运行内核0.00版本
  5. asp.net 表单总结
  6. eclipse调试一个struts2例子时遇到的一些问题总结
  7. websocket探究
  8. Html和CSS的关系
  9. 制作 OpenStack Linux 镜像 - 每天5分钟玩转 OpenStack(151)
  10. nginx log response_python+pandas分析nginx日志的实例