Dynatree_树控件基础详解精选.ppt

Dynatree 树控件基础 讲解内容 1、dynatree简介 2、构造dynatree 3、操作dynatree 4、常见问题及解决方案 5、作业 dynatree 简介 Dynatree是一个jQuery插件， 能够实现使用JavaScript动态创建Html Tree控件。 主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候才会创建). 主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候才会创建). 可编程提供一个面向对象接口 支持通过Ajax实现树节点懒加载 支持为树节点添加Checkboxes和层级选择 支持拖放操作（drag和drop） 支持持久化保存 支持键盘Keyboard操作 可以从HTML代码、JSON或JavaScript对象初化构建树 构造dynatree 1、简单构造一棵树 2、相关属性介绍 3、服务器端数据传递 4、树对象常用方法介绍 5、延时加载和一次性加载树结构原理 简单构造一棵树 构造一颗简单树需要的元素： 1、页面中有一个div在加载这可树div id=tree /div 2、导入四个js文件和一个css样式 3、要编写$(“#tree”).dynatree({...});函数 显示相关属性介绍 树的属性 title 树的名字 minExpandLevel 最小折叠层数 imagePath 引用图标路径 children 子元素 Checkbox（boolean） 是否显示为复选框(默认为false) selectMode 1:单选, 2:不关联复选, 3:关联复选? fx:{ height:toggle, duration:200 } jquery点击打开隐藏树节点的动画效果(一般如前面设置) keyboard 键盘导航(默认为true) autoFocus 自动设置焦点(默认为true) persist Cookic中读取记录(默认为false) noLink 使用span代替a标签，取消连接 节点属性 title 节点名（null） key 键（null） isFolder 是否收起（false） isLazy 是否延迟加载（false） tooltip 鼠标显示（null） icon 图标（null）这里null为默认图标，false为无图标 addClass 增加class属性（null） noLink 将a标签替换为span，无链接（false） activate 初始的活动状态（false） focus 初始化获得焦点（false） expand 是否展开（false） select 是否被选中（false） hideCheckbox 隐藏复选框（false） unselectable 不可被选中（false） children 子节点（null） Tips：isFolder和expand功能是相反的，但由于默认值的缘故，要想初始化子节点是展开的，就必须要设置expand为true，isFolder默认为false 节点node具有两种状态：focus和activate Tip： keyboard导航的是focus状态，activate状态不变，另外碰到noLink属性项将无法导航 服务器端数据传递 1、传值方式：Ajax initAjax:{ //树的初始化函数 url:/dynatree/department/nowTree, //url data: { mode: “funnyMode”} //传递参数 } 2、数据形式：json {title:root,isFolder:true,key:1,expand:false, children:[ {title:child2,key:3}, {title:child1,key:2, children:[ {title:grandchild,key:4} ] } ] } 3、服务器端设置返回值为JSON import?grails.converters.JS