jquery easyui tree实战

最新推荐文章于 2024-09-26 10:23:34 发布

VincenLlin

最新推荐文章于 2024-09-26 10:23:34 发布

阅读量1.8k

点赞数

分类专栏： jquery-easyui

本文链接：https://blog.csdn.net/VincenLlin/article/details/38336243

版权

jquery-easyui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jquery easyui tree插件着实非常有用，一般来说，在项目中可以用来做树形菜单（后台使用的菜单一般是树形菜单，如果你的菜单项非常多，那么树形菜单是明智之选）；此外，在展示一些树形关系时，tree也是很有用，比如说文件与文件夹之间的关系，组织机构关系。

控制tree的整体外观

tree中有两个属性可以对tree的整体外观进行控制，分别是animate和lines，animate是在展开和收缩父节点时，添加动画；而lines在父子节点之间加上虚线，我个人认为，加上虚线的效果要比不加虚线的效果好看，而默认的是不加上虚线的。

tree的节点

一个树由若干节点构成，每一个节点是一个js对象，它有着以下属性：

id，用来识别唯一节点的标识，在程序中，这个id往往会跟数据库的主键发生关联。

text，树形节点的文字，在图标的右边。

iconCls，树形节点的图标，在文字的左边，不指定就使用默认的图标，每一个节点都可定制化图标，确实很好用。

children，树形节点的孩子，这是一个数组，如果没有你可以赋值一个空数组[]。

定制化tree节点的显示效果

如果你认为tree节点的显示只能是图标加上文字，easyui tree能做的不仅仅是这样，它提供功能强大的fomatter属性来让你定制化节点显示效果。很多情况下，在显示机构的时候，但是只允许对一个机构进行单选，如果不加以定制，tree是做不到的，要做到单选，就要使用radio，此时fomatter属性值是一个function，这个function带有一个node参数，返回值一般是一个字符串，以下代码可以在文字的右边加上一个radio按钮

$(".easyui-tree").tree({
  formatter: function (node)
  {
    return node.text + '<input type="radio" name="radioGroup"/>';
  }
});

此外，通过参数node，你可以实现对指定节点的过滤，也就是得到你想要的特定节点，然后对这个节点进行格式化，也是可以的。

让tree显示出多显框checkbox

在允许节点多选时，checkbox很有用，只需要将checkbox属性设置为true就可以了。此时每一个节点都会带上checkbox，如果对父节点选中，那么所有子节点都会选中，这非常适合于文件夹的选择。

静态tree

静态数据的tree，将静态数据作为tree的数据，一般在tree的数据变动很少的情况下使用，比如说菜单。静态数据的tree的使用比较少。

动态tree

当指定tree的url属性时，刷新页面就会去请求远程的数据。当然，这是使用ajax实现的，所以请求方式分为get和post。默认是使用post（如果包含中文的话，必须要使用post），在post方式下，请求参数通过queryParams来发送，这是一个对象。如{username: "张三"}。

tree节点的对应事件

当tree作为菜单使用时，我们肯定需要在点击菜单项来触发相应的动作，这时候可以使用onSelect事件和onClick事件，我采用的是onSelect事件，这两个事件对应的function都是带有一个node作为参数的。通过node.text或者node.id来筛选出特定的节点，然后加上相应的操作。

tree节点相关的方法

与节点相关的方法，那就是知道到底选中了什么节点。通常情况下分为单选和多选，单选情况下，使用getSelected可以得到选中的节点，多选时，使用getChecked可以得到处于某状态的多选的一群节点，这个方法带有一个state参数，选值为"checked"或"unchecked"。此外，还可以通过find方法来查找指定id的node。