2.3.4.5.Folder6.7.8.9.10.11.S" />

EasyUI-tree

EasyUI-tree
EasyUI-tree

重写默认方法$.fn.tree.defaults.

这棵树显示分层数据在一个树结构在一个web页面。它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。

依赖

?draggable

?droppable

应用实例

树可以研究在< ul >元素。标记可以定义了叶和儿童。节点将

  • 元素在ul列表。以下显示的元素,这将用来制作树节点的嵌套在ul元素。

    [html]预览复制print?

    1.

      EasyUI-tree">

      2.

      3.

    • 4.

      5.Folder

      6.

      7.

        8.

        9.

      • 10.

        11.Sub Folder 1

        12.

        13.

          14.

          15.

        • 16.

          17.File 11

          18.

          19.

        • 20.

          21.

        • 22.

          23.File 12

          25.

        • 26.

          27.

        • 28.

          29.File 13

          30.

          31.

        • 32.

          33.

        34.

        35.

      • 36.

        37.

      • 38.

        39.File 2

        40.

        41.

      • 42.

        43.

      • 44.

        45.File 3

        46.

        47.

      • 48.

        49.

      50.

      51.

    • 52.

      53.

    • 54.

      55.File21

      56.

      57.

    • 58.

      59.

    树还可以被定义在一个空的< ul >元素和负载数据使用javascript。[js]预览复制print?

    1.

      2.

      3.$('#tt').tree({

      4.url:'tree_data.json'

      使用loadFilter处理json数据从https://www.360docs.net/doc/bf9573289.html,的web服务。

      [js]预览复制print?

      1.$('#tt').tree({

      2.url: ...,

      3.

      4.loadFilter: function(data){

      5.if (data.d){

      6.return data.d;

      7.} else {

      8.return data;

      9.}

      10.}

      11.});

      树数据的格式

      每个节点可以包含以下属性:

      ?id: 节点id,它是重要的来加载远程数据

      ?text: 节点文本来显示

      ?state: 节点状态,“open”或“closed”,默认是“open”。当设置为“closed”,节点有子节点,并将负载从远程站点

      ?checked: 显示选定的节点是否选中。

      ?attributes: 自定义属性可以被添加到一个节点

      ?children: 一个数组节点定义了一些子节点

      一些例子:

      [js]预览复制print?

      1.[{

      2."id":1,

      3.

      4."text":"Folder1",

      5.

      6."iconCls":"icon-save",

      7.

      8."children":[{

      9."text":"File1",

      10.

      11."checked":true

      12.},{

      13."text":"Books",

      14.

      15."state":"open",

      16.

      17."attributes":{

      18."url":"/demo/book/abc",

      19.

      20."price":100

      21.},

      22.

      23."children":[{

      24."text":"PhotoShop",

      25.

      26."checked":true

      27.},{

      28."id": 8,

      29.

      30."text":"Sub Bookds",

      31.

      32."state":"closed"

      33.}]

      34.}]

      35.},{

      36."text":"Languages",

      37.

      38."state":"closed",

      39.

      40."children":[{

      41."text":"Java"

      42.

      43.},{

      44.

      45."text":"C#"

      46.

      47.}]

      48.}]

      树的异步

      这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。这里是一个例子:

      [html]预览复制print?

      1.

        这棵树是装有URL”get_data.php’。子节点加载依赖父节点状态。当扩展一个封闭的节点,如果节点没有子节点加载,它将发送节点id的值作为http请求参数命名为“id”到服务器上面定义通过URL检索的子节点。

        看着从服务器返回的数据:

        [js]预览复制print?

        1.[{

        2."id": 1,

        3.

        4."text": "Node 1",

        5.

        6."state": "closed",

        7.

        8."children": [{

        9."id": 11,

        10.

        11."text": "Node 11"

        12.},{

        13."id": 12,

        14.

        15."text": "Node 12"

        16.}]

        17.},{

        18."id": 2,

        19.

        20."text": "Node 2",

        21.

        22."state": "closed"

        23.}]

        节点1和节点2是封闭的,当扩展节点1,将直接显示它的子节点。当扩展节点2,它将发送值(2)服务器获取子节点。

        这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。

        属性

        事件

        许多事件回调函数可以把“节点”参数,其中包含以下属性:

        ?id: 一个标识值绑定到该节点。

        ?text: 文本显示。

        ?iconCls: css类来显示图标。

        ?checked: 检查是否该节点。

        ?state: 节点状态,“open”或“closed”。

        ?attributes: 自定义属性绑定到该节点。

        ?target: 目标DOM对象。

        方法

      • 相关主题
        相关文档
        最新文档