<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左选择_点箭头再输出且只输出末级店_模糊搜索</title>
<link rel="stylesheet" href="http://www.reoonet.com/plug/bootstrap3.3.5/bootstrap.css" />
<link rel="stylesheet" href="http://www.reoonet.com/plug/jstree/dist/themes/default/style.css" />
<style>
.modal-body .col-md-5{ border: 1px solid #ccc; min-height: 300px;}
.modal-body .col-md-2 .button{ margin: 0 auto;}
.father-content .father-item {
margin-bottom: 15px;
}
/*树结果*/
.tree-result div{ float: left; line-height: 28px; transition: all 0.2s;}
.tree-result div:nth-child(1){ width: 90%;}
.tree-result div:nth-child(2){ width: 10%; text-align: right; color:red; cursor: pointer;} /*icon-otoc-close-circled*/
.tree-result div:nth-child(2):hover{ transform: scale(1.2); color: #d30707;}
</style>
</head>
<body>
<div class="container">
<p>
<button class="btn-default" data-toggle="modal" data-target="#modal-add">新增分组</button>
</p>
<table class="table">
<tr>
<td>列表</td>
<td>
<button class="btn btn-success">编辑</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<!-- 模态框（Modal） -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 60%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">新增分组</h4>
</div>
<div class="modal-body" style="min-height: 330px; overflow: hidden;">
<h4>功能：1，只输出末级门店，按照已经写好的样式；2，输出需要点中间的“添加”按钮，而不是左侧勾选后立即过去。</h4>
<div class="col-md-5">
<p>未添加门店</p>
<div class="otoc-p-10">
<form id="s">
<div class="input-group input-group-sm otoc-w-100">
<input type="search" class="form-control" id="q">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div id="tree_partType" class="tree-demo right-border"> </div>
</div>
<div class="col-md-2" style="padding-top: 120px; text-align: center; vertical-align: middle;">
<a class="btn btn-default btn-add">>> 添加</a>
</div>
<div class="col-md-5">
<p>已添加门店</p>
<div id="selectedStore">
<!-- <div class="tree-result">
<div>氧车乐-西湖路店</div>
<div>
<i class="icon-otoc-close-circled"></i>
</div>
</div>
<div class="tree-result">
<div>氧车乐-西湖路店</div>
<div>
<i class="icon-otoc-close-circled"></i>
</div>
</div>
<div class="tree-result">
<div>氧车乐-西湖路店</div>
<div>
<i class="icon-otoc-close-circled"></i>
</div>
</div> -->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div><
</div>
<script src="http://www.reoonet.com/plug/jquery/2.2.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.reoonet.com/plug/bootstrap3.3.5/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.reoonet.com/plug/jstree/dist/jstree.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jstree-配件类型-弹窗
//实例化
var UITree = function() {
var tree_partType = function() {
$('#tree_partType').jstree({
"multiple": true, //单选 true ; 父类选中子节点全勾选 false，下面 plugins 配置 checkbox
'plugins': ["search","changed", "wholerow","checkbox"], //配置选项：wholerow 整行； checkbox 复选框； dnd 拖拽 ；contextmenu 可反键操作；
'core': {
'data': [{
"state": {"opened": true,"selected": false},
"text": "浙江省",
"children": [
{
"text": "宁波",
"state": {
"opened": false
},
"children": [
{
"text": "海曙区",
"children": [{"text": "氧车乐-人民路店",}, {"text": "氧车乐-福庆北路店"}]
},
{
"text": "江东区",
"children": [{"text": "氧车乐-兴宁路店",}, {"text": "氧车乐-樱花公园店"}]
},
{
"text": "江北区",
"children": [{"text": "氧车乐-大庆路店",}, {"text": "氧车乐-外滩大桥店"}]
},
{
"text": "鄞州区",
"children": [{"text": "氧车乐-大庆路店",}, {"text": "氧车乐-外滩大桥店"}]
}
]
},
{
"text": "杭州",
"children": [
{
"text": "西湖区",
"children": [{"text": "氧车乐-西湖路店",}, {"text": "氧车乐-东湖路店"}]
},
{
"text": "滨江区",
"children": [{"text": "氧车乐-滨江路店",}, {"text": "氧车乐-福庆北路店"}]
},
{
"text": "余杭区",
"children": [{"text": "氧车乐-中华路店",}, {"text": "氧车乐-福庆南路店"}]
},
{
"text": "上城区",
"children": [{"text": "氧车乐-锦宇路店",}, {"text": "氧车乐-福庆北路店"}]
}
]
}
]
}]
}
});
};
return {
init: function() {
tree_partType();
}
};
}();
UITree.init();
// 搜索
$("#s").submit(function(e) {
e.preventDefault();
$("#tree_partType").jstree(true).search($("#q").val());
});
var resultList = [];
// 操作左到右
var tree = $('#tree_partType').on("changed.jstree", function (e, data) {
var selected = [{}, {}, {}, {}]; //储存结构
data.selected.forEach(function (id) {
var node = data.instance.get_node(id),
parents = node.parents,
level = parents.length - 1;
//如果父节点没选中,也存储
parents.forEach(function (p, i) {
if (p != '#' && !selected[level - i - 1][p]) { //!=# 含有父级
selected[level - i - 1][p] = data.instance.get_node(p);
}
})
selected[level][id] = node; //存储当前节点
})
var level0 = selected[0],
level1 = selected[1],
level2 = selected[2],
level3 = selected[3];
resultList = [];
for (var l0 in level0) {
for (var l1 in level1) {
if (level1[l1].parent == l0) {
for (var l2 in level2) {
if (level2[l2].parent == l1) {
for (var l3 in level3) {
if (level3[l3].parent == l2) {
resultList.push(level3[l3]);
}
}
}
}
}
}
}
});
var createItem = function () {
var inner = [];
resultList.forEach(function (result) {
inner.push('<div class="col-md-4">\
<div class="father-item tree-result" data-id="' + result.id + '">\
<div>' + result.text + '</div>\
<div>\
<i class="glyphicon glyphicon-remove btn-remove"></i>\
</div>\
</div>\
</div>');
});
$('#selectedStore').html(inner.join(''));
}
//点击添加
$(document).on('click', '.btn-add', createItem)
.on('click', '.btn-remove', function () {
//点击删除
var id = $(this).parents('.tree-result').data('id');
//从数组中删除
resultList.splice(resultList.indexOf(resultList.filter(function (result) {
return result.id === id;
})[0]), 1);
//取消选中
tree.jstree('deselect_node', id);
//创建HTML
createItem();
});
</script>
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
