guoxiangbin
/
ocr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '139090358b'
${ noResults }
ocr/htmlweb/static/js/plugins/select-tree/select-tree.html

434 lines
24 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select-tree下拉树</title>
<link href="./select-tree.css" rel="stylesheet" />
<style type="text/css">
.code {
background-color: #f6f8fa;
padding: 10px;
border-radius: 4px;
color: #333;
display: none;
}
.code-panel {
padding: 10px 0;
}
.btn-code {
font-size: 13px;
color: blue;
cursor: pointer;
}
.show {
display: block;
}
.info {
background-color: rgba(255, 155, 7, 0.1);
font-size: 12px;
color: #ff9b07;
}
</style>
</head>
<body style="padding: 0 50px 50px; ">
<h3>一.基础示例</h3>
<p>1.单选模式</p>
<select placeholder="请选择树的内容" id="tree1">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code">
&lt;select&nbsp;placeholder=&quot;请选择树的内容&quot;&nbsp;id=&quot;tree1&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点1&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点12&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2-3&quot;&nbsp;data-pid=&quot;1-2&quot;&gt;子节点123&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点13&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-1&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点131&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-2&quot;&nbsp;data-pid=&quot;1-3&quot;&nbsp;&gt;子节点132&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-3&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点133&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点134&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-5&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点135&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4-1&quot;&nbsp;data-pid=&quot;1-3-4&quot;&gt;子节点1341&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点2&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点3&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2-1&quot;&nbsp;data-pid=&quot;2&quot;&gt;子节点21&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;
</p>
<p class="code">
$(&quot;#tree1&quot;).selectTree();
</p>
</div>
<p>2.多选模式</p>
<select placeholder="请选择树的内容" id="tree2" multiple>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code">
&lt;select&nbsp;placeholder=&quot;请选择树的内容&quot;&nbsp;id=&quot;tree2&quot;&nbsp;multiple&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点1&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点12&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2-3&quot;&nbsp;data-pid=&quot;1-2&quot;&gt;子节点123&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点13&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-1&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点131&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-2&quot;&nbsp;data-pid=&quot;1-3&quot;&nbsp;&gt;子节点132&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-3&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点133&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点134&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-5&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点135&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4-1&quot;&nbsp;data-pid=&quot;1-3-4&quot;&gt;子节点1341&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点2&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点3&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2-1&quot;&nbsp;data-pid=&quot;2&quot;&gt;子节点21&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;
</p>
<p class="code">
$(&quot;#tree2&quot;).selectTree();
</p>
<p class="code info">
在select标签上直接设置'multiple'属性，实现多选模式。
</p>
</div>
<h3>二.折叠显示层级</h3>
<p>1.默认展开一级</p>
<select placeholder="请选择树的内容" id="tree3">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code">
$(&quot;#tree3&quot;).selectTree({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandLevel:&nbsp;1<br>});
</p>
</div>
<p>2.展开全部层级</p>
<select placeholder="请选择树的内容" id="tree4">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<p></p>
<select placeholder="请选择树的内容" id="tree5" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code">
$(&quot;#tree4&quot;).selectTree({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandAll:&nbsp;true<br>});
</p>
</div>
<h3>三.默认选中值</h3>
<p>1.单选选中</p>
<p>
<button onclick="alert('选中的value:' + $('#tree6').val())">获取选中的value</button>
<button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree6.getSelectInfo())">获取选中的对象</button>
<button onclick="tree6.selectOption('1-2');">设置选项选中</button>
<button onclick="tree6.clearSelect();">清除选中</button>
<button onclick="tree6.expandAll();">展开所有级别</button>
<button onclick="tree6.collapseAll();">折叠所有级别</button>
</p>
<select placeholder="请选择树的内容" id="tree6">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" selected>子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code info">
在选中的option标签中设置selected属性即可默认选中。
</p>
</div>
<p>2.多选选中</p>
<p>
<button onclick="alert('选中的value:' + $('#tree7').val())">获取选中的value</button>
<button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree7.getSelectInfo())">获取选中的对象</button>
<button onclick="tree7.selectOption(['1-2','1-3','2','1-3-2']);">设置选项选中</button>
<button onclick="tree7.clearSelect();">清除选中</button>
<button onclick="tree7.expandAll();">展开所有级别</button>
<button onclick="tree7.collapseAll();">折叠所有级别</button>
</p>
<select placeholder="请选择树的内容" id="tree7" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1" selected>子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" selected>子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4" selected>子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code info">
在选中的option标签中设置selected属性即可默认选中。
</p>
</div>
<h3>四.禁用选项</h3>
<p>1.单选模式</p>
<select placeholder="请选择树的内容" id="tree8">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2" disabled>子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" disabled>子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0" disabled>一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code info">
在选中的option标签中设置disabled属性禁用选项。
</p>
</div>
<p>2.多选模式</p>
<select placeholder="请选择树的内容" id="tree9" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1" disabled>子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" disabled>子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4" disabled>子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<div class="code-panel">
<div class="btn-code">查看示例代码</div>
<p class="code info">
在选中的option标签中设置disabled属性禁用选项。
</p>
</div>
<h3>五.事件操作示例</h3>
<p>1.单选模式</p>
<p>
<button onclick="alert('选中的value:' + $('#tree10').val())">获取选中的value</button>
<button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree10.getSelectInfo())">获取选中的对象</button>
<button onclick="tree10.selectOption('1-2');">设置选项选中</button>
<button onclick="tree10.clearSelect();">清除选中</button>
<button onclick="tree10.expandAll();">展开所有级别</button>
<button onclick="tree10.collapseAll();">折叠所有级别</button>
</p>
<select placeholder="请选择树的内容" id="tree10">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<p>2.多选模式</p>
<p>
<button onclick="alert('选中的value:' + $('#tree11').val())">获取选中的value</button>
<button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree11.getSelectInfo())">获取选中的对象</button>
<button onclick="tree11.selectOption(['1-2','1-3','2','1-3-2']);">设置选项选中</button>
<button onclick="tree11.clearSelect();">清除选中</button>
<button onclick="tree11.expandAll();">展开所有级别</button>
<button onclick="tree11.collapseAll();">折叠所有级别</button>
</p>
<select placeholder="请选择树的内容" id="tree11" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<h3>六.回调函数</h3>
<p>1.单选模式</p>
<p>
请打开控制台查看输出
</p>
<select placeholder="请选择树的内容" id="tree12">
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<p>2.多选模式</p>
<select placeholder="请选择树的内容" id="tree13" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3">子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<h3>七.动态更新</h3>
<p>
<button onclick="reloadTree14();">重载数据</button>
</p>
<select placeholder="请选择树的内容" id="tree14" multiple>
<option value=""></option>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
<script src="./jquery.min.js"></script>
<script src="./select-tree.js"></script>
<script>
$(function () {
$(".btn-code").click(function () {
$(this).parents('.code-panel').find('.code').toggleClass('show');
});
});
$("#tree1,#tree2").selectTree();
$("#tree3").selectTree({
expandLevel: 1
});
$("#tree4,#tree5").selectTree({
expandAll: true
});
var tree6 = $("#tree6").selectTree();
var tree7 = $("#tree7").selectTree();
var tree8 = $("#tree8").selectTree();
var tree9 = $("#tree9").selectTree();
var tree10 = $("#tree10").selectTree({
changeCallBack: function (arrs) {
console.info('发生变更，当前选中的内容是：', arrs);
}
});
var tree11 = $("#tree11").selectTree({
changeCallBack: function (arrs) {
console.info('发生变更，当前选中的内容是：', arrs);
}
});
$("#tree12,#tree13").selectTree({
changeCallBack: function (arrs) {
console.info('发生变更，当前选中的内容是：', arrs);
}
});
var tree14 = $("#tree14").selectTree();
function reloadTree14() {
var newOption = '<option value="1" data-pid="0">重载选项一</option>';
newOption += '<option value="2" data-pid="0">重载选项二</option>';
newOption += '<option value="3" data-pid="0">重载选项三</option>';
newOption += '<option value="21" data-pid="2">重载选项21</option>';
newOption += '<option value="31" data-pid="3">重载选项31</option>';
$("#tree14").html(newOption);
tree14.clearSelect();
}
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink