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>

转载于:https://www.cnblogs.com/sdsd123/p/6535173.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值