热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在NetMVC中应用JsTree

先实现个基本用法1-引入js和css2-html


先实现个基本用法


1 - 引入js和css


2 -  html



"list_left" class="col-md-2 pre-scrollable">
class="list_wrap">

class="lead">数据列表


"jstree">




3 - js






//初始化jstree控件
function init_jstree() {
$(
"#jstree").jstree({
"core": {
'data': {
'url': '/Home/GetTreeData',
'dataType': 'json',
success:
function () {
//alert('ok');
}
},
'themes': {
'name': 'proton',
'responsive': true,
"dots": true,
"icons": true
}
}
});
};


View Code

4 - cs






public JsonResult GetTreeData()
{
IBaseBll
tableBll = new BaseBll();
var treeNodes = tableBll.QueryAll().Select(m => new
{
id
= m.Id,
parent
= m.ParentId.ToString() == "0" ? "#" : m.ParentId.ToString(),
text
= m.NameCh,
icon
= m.TreeIcon
});
return Json(treeNodes, JsonRequestBehavior.AllowGet);
}


View Code

5 - 说明


  • js中themes是选择的皮肤
  • 后台代码中的treeNodes 是封装符合jstree中的,还有其他属性 详见http://www.cnblogs.com/wuhuacong/p/4759564.html
  • 表设计 详见 http://www.cnblogs.com/jeffwongishandsome/archive/2010/10/26/1861633.html 评论里有更加方案



jstree的两个基本事件


1 - changed.jstree






$('#jstree').on("changed.jstree", function (e, data) {
//data.node是点击的节点信息,点击节点之后的逻辑都在这里处理
init_TableInfo(data.node.id);
var param = { TableId: data.node.id }
table.settings()[
0].ajax.data = param;
table.ajax.reload();
$(
".introWrap").css("display", "none");
});


View Code

2 - ready.jstree






$("#jstree").on("ready.jstree", function (event, data) {
data.instance.open_node(
1); // 展开root节点
//// 隐藏根节点 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree
$("#1_anchor").css("visibility", "hidden");
$(
"li#1").css("position", "relative");
$(
"li#1").css("top", "-20px");
$(
"li#1").css("left", "-20px");
$(
".jstree-last .jstree-icon").first().hide();
});


View Code

3 - 说明


  • changed中可以获取到所点击节点的所有信息,可以做逻辑判断
  • ready是所有节点加载完成后触发的,在这里我隐藏了根目录
  • jstree官网 https://www.jstree.com/
  • 借鉴 https://www.cnblogs.com/ibgo/p/4025036.html

转载于:https://www.cnblogs.com/tanfuchao/p/10547665.html



推荐阅读
  • Tkinter Frame容器grid布局并使用Scrollbar滚动原理
    本文介绍了如何使用Tkinter实现Frame容器的grid布局,并通过Scrollbar实现滚动效果。通过将Canvas作为父容器,使用滚动Canvas来滚动Frame,实现了在Frame中添加多个按钮,并通过Scrollbar进行滚动。同时,还介绍了更新Frame大小和绑定滚动按钮的方法,以及配置Scrollbar的相关参数。 ... [详细]
  • express工程中的json调用方法
    本文介绍了在express工程中如何调用json数据,包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • 在IDEA中运行CAS服务器的配置方法
    本文介绍了在IDEA中运行CAS服务器的配置方法,包括下载CAS模板Overlay Template、解压并添加项目、配置tomcat、运行CAS服务器等步骤。通过本文的指导,读者可以轻松在IDEA中进行CAS服务器的运行和配置。 ... [详细]
  • 求解连通树的最小长度及优化
    本文介绍了求解连通树的最小长度的方法,并通过四边形不等式进行了优化。具体方法为使用状态转移方程求解树的最小长度,并通过四边形不等式进行优化。 ... [详细]
author-avatar
longyuyuyu
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有