Select-Tree

在线预览

介绍

基于Jquery的下拉树插件，根据select的option值，自动组装树结构。可灵活应用于项目中，不需要再单独引用其他插件实现简单的多级下拉选择。目前支持单选和多选两种模式。

安装教程

下载插件包解压。
将select-tree.js和select-tree.css引入页面。
根据使用示例调用即可。

使用说明

引入js和css文件。
编写原生的select组件满足插件需要的数据元素。
使用jquery绑定插件，实现效果。

使用示例

<select placeholder="请选择组织架构" id="tree1" name="tree1">
            <option value=""></option>
            <option value="1" data-pid="0">一级节点1</option>
            <option value="12" data-pid="1">子节点12</option>
            <option value="123" data-pid="12">子节点123</option>
            <option value="13" data-pid="1">子节点13</option>
            <option value="131" data-pid="13">子节点131</option>
            <option value="132" data-pid="13">子节点132</option>
            <option value="133" data-pid="13">子节点13</option>
            <option value="134" data-pid="13">子节点134</option>
            <option value="135" data-pid="13">子节点135</option>
            <option value="1341" data-pid="134">子节点1341</option>
            <option value="2" data-pid="0">一级节点2</option>
            <option value="3" data-pid="0">一级节点3</option>
            <option value="21" data-pid="2">子节点21</option>
        </select>

 $("#tree1).selectTree({});

参数配置：

selectTree参数：

参数	默认值	描述
expandAll	false	是否展开所有，true时展开所有。
expandLevel	0	指定展开的级别，只在expandAll为false时生效。
changeCallBack	无	值发生变更时传递的回调函数，回传参数是当前选中的值数组。

select标签参数：

参数	默认值	描述
placeholder	请选择	默认选择为空时显示的内容
multiple	无	多选属性，存在时实现多选模式

option标签参数：

参数	默认值	描述
value	""	option的value值，单选模式想让初始化不选择任何值需要添加一个value为“”的选项，value需要保证唯一。存在重复的value时，只有第一条生效。
data-pid	无	存放上级的value值，如果值不存在于选项中，当前节点为一级节点。
selected	无	存在selected属性时，默认选中该选项。
disabled	无	存在该属性时，该选项无法被选择，但是可以操作树的折叠和显示操作。

事件：

方法	参数	描述
getSelectInfo	无	获取被选中的对象数组｛[value,text]｝
selectOption	String或者Array[String]	控制选中指定选项，参数传递单选的value值或者多选模式下的value值数组
clearSelect	无	清除选中值
expandAll	无	展开树的结构
collapseAll	无	折叠树的结构

效果预览

具体查看示例页面在线预览

木子旺旺 / Select-Tree

Select-Tree

在线预览

介绍

安装教程

使用说明

使用示例

参数配置：

效果预览

About

Releases (2)

Contributors

Activities

木子旺旺 / Select-Tree .gitee-modal { width: 500px !important; }

Select-Tree

在线预览

介绍

安装教程

使用说明

使用示例

参数配置：

效果预览

About

Releases (2)

The Open Source Evaluation Index is derived from the OSS Compass evaluation system, which evaluates projects around the following three dimensions

Contributors

Activities

Search

木子旺旺 / Select-Tree