一  tree初始化方式

1. html方式初始化

<ul id="tt1" class="easyui-tree"><li>  <span>Folder</span><ul><li><span>Sub Folder 1</span><ul>  <li><span><a href="#">File 11</a></span>  </li></ul></li><li><span>File 2</span>  </li><li><span>File 3</span>  </li></ul></li><li><span>File21</span>  </li></ul>

html

2. 本地加载json

<ul id="tt1">
</ul>

<script type="text/javascript">$(function () {var data = [{text: 'Item1',state: 'closed',children: [{text: 'Item11'}, {text: 'Item12'}]}, {text: 'Item2'}];$('#tt1').tree();  //首先初始化树结构$('#tt1').tree('loadData', data);});
</script>

js

3. 异步加载树结构

<ul id="tt">
</ul>

<script type="text/javascript">$(function () {$('#tt').tree({lines: true,  //显示格式控制url: '/Ajax/Parameter/AA40.ashx?Method=InitTree',/*************每次打开所有节点*************************/onLoadSuccess: function (node, data) {var t = $(this);if (data) {$(data).each(function (index, d) {if (this.state == 'closed') {t.tree('expandAll');}});}/***********选中指定id的节点****************/var node = $('#tt').tree('find', 410);$('#tt').tree('select', node.target);          },/**************点击节点展开或关闭树形结构***************/onClick: function (node) {if (node.state == 'closed') {$(this).tree('expand', node.target);console.info(node.target);} else {$(this).tree('collapse', node.target);}},onDblClick: function (node) {var g = $(this).tree('getParent', node.target);   //获取选中节点的父节点
                }});});</script>View Code 

js

        /// <summary>/// 初始化树结构/// </summary>public void InitTree(){com.zhonghui.bll.sys bll = new bll.sys();DataSet ds = bll.GetList("");if (ds.Tables[0].Rows.Count > 0){string strWhere = string.IsNullOrEmpty(Request["id"]) == true ? " sysPID IS NULL" : " sysPID='" + Request["id"] + "'";string s = GetTreeJson(ds.Tables[0], "sysID", "sysName", "sysPID", strWhere);Response.Write(s);   }}           /// <summary>/// 根据DataTable生成Json树结构  【异步加载树结构】/// </summary>/// <param name="tabel">table列表</param>/// <param name="nodeID">节点id</param>/// <param name="nodeName">节点名称</param>/// <param name="pNodeID">父节点ID</param>/// <param name="strWhere">条件</param>/// <returns></returns>public string GetTreeJson(DataTable tabel, string nodeID, string nodeName, string pNodeID, string strWhere){StringBuilder strJson = new StringBuilder();strJson.Append("[");DataRow[] rows = tabel.Select(strWhere);if (rows.Length > 0){foreach (DataRow row in rows){strJson.Append("{\"id\":\"" + row[nodeID] + "\",\"text\":\"" + row[nodeName]);if (tabel.Select(string.Format("{0}='{1}'", pNodeID, row[nodeID])).Length > 0){strJson.Append("\",\"state\":\"closed\"");}else{strJson.Append("\",\"state\":\"open\"");}strJson.Append("},");}strJson = strJson.Remove(strJson.Length - 1, 1);}strJson.Append("]");return strJson.ToString();}       

aspx

转载于:https://www.cnblogs.com/zhujp/p/3430835.html

jquery easyui-----------tree相关推荐

  1. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: [html]  view plain copy print ? <ul  ...

  2. jquery easyui Tree API

    Query EasyUI API 中文文档 - Tree树使用介绍,需要的朋友可以参考下. 用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppa ...

  3. EasyUI Tree判断节点是否是叶

    方法1:  $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...

  4. easyui tree 检索树节点(3)

    1.检索树节点的调用方法 function searchTreeFunc(){  $("#tree").tree("searchTree",$("#s ...

  5. php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法

    在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...

  6. jQuery EasyUI使用教程之使用标记创建树形菜单

    2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...

  7. 富有客户端技术之——jQuery EasyUI

    在B/S开发中页面制作涉及HTML.CSS.javascript等技术,我们随掌握相关技术,但实际开发中页面美化特别是样式设计一直困扰着我们.怎样更好.更快的设计美观.专业.时代性的页面呢?JQuer ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. 20130327 jQuery easyUI

    1.jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等. 2. ...

  10. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

最新文章

  1. C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比(Windows VirtualStudio)——删除
  2. java uml 为什么_Java开发为什么需要UML
  3. Xamarin如何生成Android项目的APK
  4. Facebook AI 提出10亿级数据规模的半监督图像分类模型,ImageNet测试精度高达81.2%!...
  5. Setting Up ODI's Schedule
  6. Python实现机房管理软件的文件分发功能
  7. mysql 计划任务关闭_mysql计划任务
  8. 使用PickerView
  9. java双向循环链表
  10. Python3正则匹配re.split,re.serach,re.sub,re.finditer及re.findall函数用法详解
  11. 通过手机实现外网远程唤醒内网下的群辉Nas等设备
  12. Markdown书写软件Typora的使用--图片上传(PicGo与Github/Gitee)及排版
  13. 安装MySQL8.0+,数据库初始化失败错误解决办法
  14. w7电脑蓝屏怎么解决_电脑蓝屏怎么解决win7
  15. matlab单容建模仿真,大学毕业论文-—基于matlab的过程控制系统仿真研究
  16. revit二次开发--异形柱翻模
  17. 【PHP发送邮件】PHP实现发送邮件
  18. mac设置文件权限_如何在Mac上设置文件权限
  19. 光纤收发器常见故障问题的时候我们该如何解决呢
  20. HTML之 <p></p>标签 笔记

热门文章

  1. [原创]UUID的介绍和使用
  2. 一个可以实时查相关电子产品价格的网站
  3. UFLDL 教程学习笔记(二)反向传导算法
  4. 常见HTTP状态(304,200等)转
  5. 数据结构上机实践第八周项目9-广义表算法库及应用
  6. java linux ping ip,java linux ping命令
  7. ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
  8. 服务器查看数据库日志文件,服务器数据库查看日志文件
  9. 易语言怎么判断文件是否一样_怎么判断自己是否怀孕?
  10. python写日志到文件_python 通过logging写入日志到文件和控制台的实例