jstree-左到右-只输出末级-且须要点击添加，右侧结果点击叉删除

时间 2019-11-17
标签 jstree 输出须要点击添加右侧结果删除繁體版
原文原文链接
<!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">&times;</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>