jQuery带多选和过滤功能的树状结构下拉框插件
源码介绍
combo-tree是一款jQuery带多选和过滤功能的树状结构下拉框插件。通过该插件,可以在下拉框中生成指定数据结构的目录树,提供单选和多选,以及过滤功能。它的特点有: 在HTML文件中引入下面的文件。 定义数据结构。 然后通过下面的方法来进行初始化插件。 获取数据。 销毁插件。 combo-tree插件的github网址为:https://github.com/kirlisakal/combo-tree简要教程
使用方法
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/icontains.js" type="text/javascript"></script>
<script src="js/comboTreePlugin.js" type="text/javascript"></script>
HTML结构
<input type="text" id="example" placeholder="Select">
javascript
var SampleJSONData = [
{
id: 0,
title: 'choice 1 '
}, {
id: 1,
title: 'choice 2',
subs: [
{
id: 10,
title: 'choice 2 1'
}, {
id: 11,
title: 'choice 2 2'
}, {
id: 12,
title: 'choice 2 3'
}
]
}, {
id: 2,
title: 'choice 3'
}, {
id: 3,
title: 'choice 4'
}, {
id: 4,
title: 'choice 5'
}, {
id: 5,
title: 'choice 6',
subs: [
{
id: 50,
title: 'choice 6 1'
}, {
id: 51,
title: 'choice 6 2',
subs: [
{
id: 510,
title: 'choice 6 2 1'
}, {
id: 511,
title: 'choice 6 2 2'
}, {
id: 512,
title: 'choice 6 2 3'
}
]
}
]
}, {
id: 6,
title: 'choice 7'
}
];
// 单选
comboTree1 = $('#example').comboTree({
source : SampleJSONData
});
// 多选
comboTree1 = $('#example').comboTree({
source : SampleJSONData,
isMultiple: true
});
// Array, One title/id, or False value return
var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();
// To remove plugin
comboTree1.destroy();
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » jQuery带多选和过滤功能的树状结构下拉框插件
发表评论 取消回复