bootstrap树形与搜索相联

<style type="text/css">
.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
}
.tree li {
list-style-type:none;
margin:0;
padding:5px 5px 5px 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li span {
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
color:#000
}
.tree li ul li{
display: none;
padding-left: 20px;
border-bottom: 1px #eeeeee solid;
}
.tree li ul li ul li{
border-bottom: none;
padding-left: 25px;
}
.addhy li{
zoom:1;
overflow: hidden;
}
.addhyleft{
float: left;
}
.addhyright{
float: right;
}
.absubd{
padding-left: 35px;
padding-right: 35px;
padding-bottom: 15px;
border-bottom: 1px #eeeeee solid;
}
.adsousu{
width: 420px;
padding: 6px 0;
border:0;
}
.adsubmid{
width: 75px;
}
.adxstj{
zoom:1;
overflow:hidden;
border-bottom: 1px #eeeeee solid;
padding: 19px;
}
.addhyleftt{
float: left;
}
.addhyrightt{
float: right;
}
</style>
<div class="absubd">
<input type="text" name="" id="s_input" class="adsousu"> <button id="search_this" type="button" class="btn btn-primary addbcsub">保存</button>
</div>
<div class="tree">
<ul>
<li>
<span><i class="fa fa-fw fa-briefcase"></i>信呼开发团队</span>
<ul>
<li>
<span><i class="fa fa-fw fa-briefcase"></i>管理层</span>
<ul class="addhy">
<li>
<div class="addhyleft">
<span style="font-size:12px;color:#888888">管理员(项目主管)</span>
</div>
<div class="addhyright">
<input value="" style="width:18px;height:18px;" type="checkbox">
</div>
</li>
</ul>
</li>
<li>
<span><i class="fa fa-fw fa-briefcase"></i>开发部</span>
<ul class="addhy">
<li>
<div class="addhyleft">
<span style="font-size:12px;color:#888888">小明项目主管</span>
</div>
<div class="addhyright">
<input value="" style="width:18px;height:18px;" type="checkbox">
</div>
</li>
</ul>
</li>
<li>
<span><i class="fa fa-fw fa-briefcase"></i>财务部</span>
<ul class="addhy">
<li>
<div class="addhyleft">
<span style="font-size:12px;color:#888888">小红(项目主管)</span>
</div>
<div class="addhyright">
<input value="" style="width:18px;height:18px;" type="checkbox">
</div>
</li>
</ul>
</li>
<li>
<span><i class="fa fa-fw fa-briefcase"></i>行政人事部</span>
<ul class="addhy">
<li>
<div class="addhyleft">
<span style="font-size:12px;color:#888888">小小红(项目主管)</span>
</div>
<div class="addhyright">
<input value="" style="width:18px;height:18px;" type="checkbox">
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="search_con"></div>
<script type="text/javascript">
var search_val="";
$(document).ready(function(){
$("#search_this").click(function(){
if($("#s_input").val()!=search_val){
search_val=$("#s_input").val();
if(search_val==""){
alert("不能为空");
return false;
}
$("#search_con").html("");
var ishave = true;
for(i=0;i<=$(".addhyleft").length-1;i++){
if($(".addhyleft").eq(i).text().indexOf($("#s_input").val())>-1)
{
$("#search_con").append('<div class="adxstj"><div class="addhyleftt">'+$(".addhyleft").eq(i).text()+'</span></div><div class="addhyrightt"><input value="" style="width:18px;height:18px;" type="checkbox"></div></div> ');
ishave = false;
}
}
if(ishave){
$(".tree").show();
alert("没有找到相关项!")
}else{
$(".tree").hide();
}
}
else{
if($("#s_input").val()==""){
alert("不能为空");
}
else{
alert("请输入新的内容");
}
}
})
})
</script>

浙公网安备 33010602011771号