轻松学习jQuery插件EasyUI EasyUI创建树形菜单_jquery_脚本之家

意气风发、EasyUI使用标识创立树形菜单一个树形菜单能够从标志成立。easyui
树形菜单也足以定义在

澳门贵宾会娱乐官网,要素中。严节列表的

  • 要素将产生一个树节点,子

-   Folder
    -   Sub Folder 1
        -   File 11
        -   File 12
        -   File 13
    -   File 2
    -   File 3
-   File21

**二、EasyUI创建异步树形菜单**为了创建异步的树形菜单,每一个树节点必须要有一个
'id' 属性,这个将提交回服务器去检索子节点数据。

**创建树形菜单**



**服务器端代码**

     $id = isset ? intval : 0; include 'conn.php'; $result = array(); $rs = mysql_query("select * from nodes where parentId=$id"); while($row = mysql_fetch_array{ $node = array(); $node['id'] = $row['id']; $node['text'] = $row['name']; $node['state'] = has_child ? 'closed' : 'open'; array_push; } echo json_encode; function has_child{ $rs = mysql_query from nodes where parentId=$id"); $row = mysql_fetch_array; return $row[0] > 0 ? true : false; }

**三、EasyUI树形菜单添加节点**本节向您展示如何附加节点到树形菜单。我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。

创建食品树首先,我们创建食品树,代码如下所示:



请注意,树组件是定义在

<!-- -->

    var node = $.tree; if { var nodes = [{ "id":13, "text":"Raspberry" },{ "id":14, "text":"Cantaloupe" }]; $.tree('append', { parent:node.target, data:nodes }); }

当添加一些水果,您将看见:

正如您所看到的,使用 easyui
的树插件去附加节点不是那么的难。**四、EasyUI创建带复选框的树形菜单**easyui
的树插件允许您创建一个复选框树。如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承。例如:点击
'tomato' 节点的复选框,您将会看见 'Vegetables'
节点现在仅仅选中部分。

**创建复选框树**

**五、EasyUI树形菜单拖放控制**当在一个应用中使用树和放置功能要求允许用户改变节点位置。启用拖拽操作,所有您需要做的就是把树插件的
'dnd' 属性设置为 true。

**创建树形菜单**

    $.tree({ dnd: true, url: 'tree_data.json'});

当在一个树节点上发生放置操作,'onDrop'
事件将被触发,您应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等。

    onDrop: function(targetNode, source, point){ var targetId = $.tree('getNode', targetNode).id; $.ajax({ url: '...', type: 'post', dataType: 'json', data: { id: source.id, targetId: targetId, point: point } });}

**六、EasyUI树形菜单加载父/子节点**通常表示一个树节点的方式就是在每一个节点存储一个
parentid。 这个也被称为邻接列表模型。
直接加载这些数据到树形菜单是不允许的。
但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单插件提供一个
'loadFilter' 选项函数,它可以实现这个功能。
它提供一个机会来改变任何一个进入数据。 本教程向您展示如何使用
'loadFilter' 函数加载父/子节点到树形菜单。

**父/子节点数据**

    [{"id":1,"parendId":0,"name":"Foods"},{"id":2,"parentId":1,"name":"Fruits"},{"id":3,"parentId":1,"name":"Vegetables"},{"id":4,"parentId":2,"name":"apple"},{"id":5,"parentId":2,"name":"orange"},{"id":6,"parentId":3,"name":"tomato"},{"id":7,"parentId":3,"name":"carrot"},{"id":8,"parentId":3,"name":"cabbage"},{"id":9,"parentId":3,"name":"potato"},{"id":10,"parentId":3,"name":"lettuce"}]使用 'loadFilter' 创建树形菜单.tree({ url: 'data/tree6_data.json', loadFilter: function{ return convert;

**转换的实现**

    function convert{ function exists{ for(var i=0; i以上就是关于EasyUI创建树形菜单的基本操作方法,希望大家可以学以致用,真正的掌握其中的技巧。

发表评论

电子邮件地址不会被公开。 必填项已用*标注