jsTree插件简介(三)

UI-plugin

JSTree的UI插件：用来处理选择、不选和鼠标悬浮树选项的插件。

一、属性包括：

1、select_limit：指定一次可以选中几个节点，默认为-1，表示无限制选中。

2、select_multiple_modifier：处理当按住某个键时，用鼠标点击其他的节点可全部选中；(类似在文件目录中的按住ctrl并用鼠标选择其它目录或者文件)；默认按键为"ctrl"，可以用"shift"，"alt"等替代。

3、select_range_modifier：先选中一个节点，然后按住某个键位，再用鼠标点击另外一个节点，这样就选中这两个节点之间的部分并包含这两个节点，类似于windows中选中文件系统中的"shift"，默认选项为"shift"，可用"ctrl", "alt"等代替。

注意：使用这个选项选中的必须为兄弟节点。

4、select_parent_close：当选中节点的父节点关闭时是否选中父节点。若为"select_parent"则关闭父节点时选中父节点，若为"false"和"deselect"则当父节点关闭时不选中父节点。默认为"select_parent"。

5、select_parent_open：当程序运行过程中选中了一个节点并且这个节点的节点全是关闭的，这时要自动打开关闭的父节点。默认为"true"

6、select_prev_on_delete：当删除一个节点时默认选择前一个兄弟节点，若没有前一个兄弟节点，则选择父节点。默认为"true"

7、disable_selecting_children：默认为"false"，如果设置为"true"，你将无法选择这个节点的子节点。(待验证)

8、initially_select：当树完成加载时默认选中的节点，它需要节点的id值来标识。

 

贴一段官方的代码

<div class="panel">



<h3>Using the UI plugin</h3>

<div id="demo1" class="demo">
    <ul>
        <li id="phtml_1">
            <a href="#">Root node 1</a>
            <ul>
                <li id="phtml_2">
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3">
                    <a href="#">Child node 2</a>
                </li>
            </ul>
        </li>
        <li id="phtml_4">
            <a href="#">Root node 2</a>
        </li>
    </ul>

</div>

<script type="text/javascript" class="source">

$(function () {

    $("#demo1").jstree({

        "ui" : {
            "select_limit" : 2,
            "select_multiple_modifier" : "ctrl",
            "selected_parent_close" : "select_parent",
            "initially_select" : [ "phtml_2" ]
        },

        "core" : { "initially_open" : [ "phtml_1" ] },

        "plugins" : [ "themes", "html_data", "ui" ]

    });

});

</script>



</div>

二、函数包括：

1、._get_node(node, allow_multiple)：覆盖了core组件的get_node函数。

如果node为null或者没有定义，并且allow_multiple为true，返回所有现在被选中的节点；

如果node为null或者没有定义，并且allow_multiple不为true，返回最后被选中的节点。

node：混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

allow_multiple：是否返回所有节点或者node为null时最后一个被选中的节点。

2、.save_selected()：保存树节点当前被选中的状态。(实现是保存在一个变量中，因此刷新页面后不存在)。这个函数和cookies plugin插件相关。主要在内部使用，事件触发函数。

3、.reselect()：从save_selected()函数保存的变量恢复树的状态，主要在内部使用，事件触发函数。

4、.refresh(node)：覆盖了core组件中的refresh函数。启用前刷新保存选择状态和事后恢复。

5、.hover_node(node)：设置节点hoverd，事件触发函数。

node:mixed，混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

6、dehover_node()：删除目前已经hovered 节点，事件激发函数。

7、.select_node(node, check, event)：

node:mixed，混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

check:bool ，是否检测规则(检测"select_limit"选项等)并且做合适的行动或者仅仅选中被选中的节点。

event:event，内部使用，当点击一个节点时触发此动作。

8、.deslect_node(node), .toggle_select(node):这两个函数控制一个节点的选中状态，deselect_node激发了一个事件。

9、.get_selected(context)：返回被选中的所有节点。

10、.deselect_all(context)：补选中所有节点。

11、is_select(node)：返回是否某个节点被选中。

 

本文代码见 http://download.csdn.net/detail/yizhizouxiaqu/4268775

之ui_plugin.html

 

原英文地址为：http://www.jstree.com/documentation/ui