TreeSelect
使用 bootstrap-treeview
生成树形选择器
- 支持扁平json数据结构，指定pid即可
- 支持把Select转化成树，支持单选和多选，支持通过
data-设置options - 多选时，选中节点自动选中子节点，所有兄弟节点选中时，自动选中父节点
- 支持使用分级节点
section形式的数据，例如shiro的权限串 - 支持树形下拉框
- 支持搜索
- 仅叶子节点可选
Demo
For demo, See http://kangarooxin.github.io/treeSelect
20190923103907.png
20190923103936.png
20190923103957.png
Useage:
Demo1: 使用扁平JSON数据
var data = [
{ id: 1, text: 'Node1', pid: 0, checked: true, icon:"glyphicon glyphicon-stop", tags: ['tag1','tag2']},
{ id: 2, text: 'Node2', pid: 0 },
{ id: 3, text: 'Node3', pid: 0 },
{ id: 4, text: 'Node11', pid: 1, checked: true },
{ id: 5, text: 'Node12', pid: 1, checked: true },
{ id: 6, text: 'Node13', pid: 1, checked: true },
{ id: 7, text: 'Node21', pid: 2 },
{ id: 8, text: 'Node22', pid: 2 },
{ id: 9, text: 'Node111', pid: 4, checked: true },
{ id: 10, text: 'Node112', pid: 4, checked: true },
];
$('#selectTree').treeSelect({
data: data,
onCheckChange: function(nodes, $tree, $container) {
}
});
Demo2: 把Select转化成树
$('#selectTree2').treeSelect();
Demo3: 树形下拉框
$('#selectTree3').treeSelect();
Demo4: 使用分级节点数据
$('#selectTree4').treeSelect();
Options:
$.fn.treeSelect.defaults = {
data: [], []()
flatData: true,//扁平json数据，使用pid指定父节点
dropdown: false,//下拉选择框
dropdownEmptyText: '请选择...',//下拉选择框不选择时显示的内容
section: false,//不使用pid，使用分级节点和分隔符构建父子节点
sectionName: 'section', //分级节点名称
sectionDelimiter: ':', //分级节点分隔符
searchable: true, //可以搜索
searchIgnoreCase: true, //搜索忽略大小写
searchExactMatch: false, //搜索全匹配
idName: 'id',
pidName: 'pid',
textName: 'text',
iconName: 'icon',
tagsName: 'tags',
checkedName: 'checked',
multiple: true, //多选
onlyLeafSelectable: false, //仅可选中叶子节点
autoCheckChildNode: true,//选中节点时自动选中所有子节点
autoCheckParentNode: true, //兄弟节点都被选中时，自动选中父节点
ignoreChildNode: true,//选中父节点时上报事件中忽略子节点
showIcon: true,//显示图标
showTags: true,//显示标签
levels: 2,//默认展开2层
color: "#000", //文字颜色
maxHeight: 0, //框体最大高度，0不限制
div: '' +
' ' +
' ' +
' ' +
' ' +
' ' +
'',
getDropdownText: function (checkedDatas) {//下拉选择框选中后展示内容
var checkedTexts = checkedDatas.map(function (value) {
return value.text;
});
return checkedTexts.join(',');
},
onCheckChange: function (checkedDatas, $treeSelect, $container) {
},
onSearchResult: function(searchResultDatas, $treeSelect, $container) {
}
};