ajax 回调 + tp +<ul> + jquery + js搜索-CSDN博客

本文链接：https://blog.csdn.net/ptspzy/article/details/50984968
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="PLUG/bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
    .tableTemp{font-size: 16px;}
    .list li{list-style-type:none;font-size: 14px;cursor:pointer;line-height:25px;}
    .list {margin-left: -50px;margin-top: -10px;}
    .list3 li{list-style-type:none;font-size: 14px;cursor:pointer;line-height:25px;}
    .list3 {margin-left: -50px;margin-top: -10px;}
    .cur{ background-color:#eaeaea;width: 185px}
    </style>
    <script src="JS/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#sub-list").change(function() {
            var sub_list = $("#sub-list option:selected").html();
            if (sub_list != "请选择学科") {
                returnStations(sub_list);
            }
        });

    });
    //ajax返回某台站测点信息
    function returnPoints(sn){
        $.ajax({
            type: "POST",
            url: "{:U('Home/Index/ajax_return_point')}",
            datatype: "json",
            data: {"sn":sn},
            success: function (data) {
               var json = eval('(' + data + ')');
               var htmlStr = "<ul class='list3'>";
               for (var i = 0; i < json.length; i++) {
                var VALUE=json[i].ITEMID.trim()+json[i].POINTID.trim()+"--"+json[i].ITEMNAME.trim();
                htmlStr += "<li class='tableTemp' point='"+VALUE+"'>"+ VALUE+"</li>";
            }
            htmlStr +="</ul>"
            $("#select-left-3-body").html(htmlStr);
            $(".list3 li").click(function(){
                $(this).addClass("cur").siblings().removeClass("cur");
            })
        }
    });
    }
    //ajax返回某台站测点信息
    function setPointsSession(pn){
        $.ajax({
            type: "POST",
            url: "{:U('Home/Index/set_point_session')}",
            datatype: "json",
            data: {"pn":pn},
            success: function (data) {
            }
        });
    }
    //ajax返回台站信息
    function returnStations(sub){
        $.ajax({
            type: "POST",
            url: "{:U('Home/Index/ajax_return_stations')}",
            datatype: "json",
            data: {"sn":sub},
            success: function (data) {
               var json = eval('(' + data + ')');
               var htmlStr = "<ul class='list'>";
               for (var i = 0; i < json.length; i++) {
                var VALUE=json[i].STATIONID.trim()+"--"+json[i].STATIONNAME.trim();
                htmlStr += "<li class='tableTemp' value='"+json[i].STATIONID.trim()+"' station='"+VALUE+"'>"+VALUE +"</li>";
            }
            htmlStr +="</ul>"
            $("#select-left-2-body").html(htmlStr);
            $(".list li").click(function(){
                $(this).addClass("cur").siblings().removeClass("cur");
                returnPoints($(this).val());
            })
        }
    });
    }

    </script>
    <style>
    .qhbg{
        background-color: rgb(213, 133, 18);
    }
    </style>
</head>

<body>
    <!--  <div class="container-fluid"> -->
    <div class="row">
        <div id="select-left" class="col-md-2" style="box-shadow:1px 1px 4px #444;" >
            <div>
                <div id="select-left-1" class="col-md-12" style="padding-top:7px;margin-bottom: -10px">
                    <div class="form-group" >
                        <select class="form-control" id="sub-list">
                            <option>请选择学科</option>
                            <option>形变学科</option>
                            <option>地磁学科</option>
                            <option>流体学科</option>
                            <option>地电阻率</option>
                            <option>地电场学科</option>
                        </select>
                    </div>
                </div>
                <div id="select-left-2" class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading" style="padding:7px 15px">
                            <i class="fa fa-comments fa-fw"></i> 台站信息
                        </div>
                        <!-- /.panel-heading -->
                        <div id="select-left-2-body" class="panel-body" style="overflow-y:scroll">
                       <!--   <ul id="taizhan" class="taizhan"> 

                   </ul> -->

               </div>
               <!-- /.panel-body -->
               <div class="panel-footer" style="padding: 5px 15px">
                <div class="input-group">
                    <input id="btn-input" type="text" class="form-control input-sm" placeholder="请输入..." onchange="searchstation()" />
                    <span class="input-group-btn">
                        <button class="btn btn-warning btn-sm" id="btn-chat">
                            搜索
                        </button>
                    </span>
                </div>
            </div>
            <!-- /.panel-footer -->
        </div>
    </div>
    <div id="select-left-3" class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading" style="padding:8px 15px;margin-top: -8px">
                <i class="fa fa-comments fa-fw"></i> 测点信息
            </div>
            <!-- /.panel-heading -->
            <div id="select-left-3-body" class="panel-body" style="overflow-y:scroll">
            </div>
            <!-- /.panel-body -->
            <div class="panel-footer">
                <div class="input-group">
                    <input id="btn-input1" type="text" class="form-control input-sm" placeholder="请输入..." onchange="searchpoint()" />
                    <span class="input-group-btn">
                        <button class="btn btn-warning btn-sm" id="btn-chat">
                            搜索
                        </button>
                    </span>
                </div>
            </div>
            <!-- /.panel-footer -->
        </div>
    </div>
</div>
</div>
<div class="col-md-10" >
    <div class="panel">
        <div class="panel-heading" style="padding: 5px 15px">
            <i class="fa fa-comments fa-fw"></i>
            <!-- 测点信息 -->
            <div class="btn-group btn-group-justified" style="margin-left: -15px">
                <a href="javascript:void(0)" onclick="window.iframeRight.location.href='{:U('Home/QualityEvaluation/Obtable')}'" class="btn btn-lg btn-default " style="border-width: 1px 1px 6px 2px"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;观测系统评估</a>
                <a href="javascript:void(0)" onclick="window.iframeRight.location.href='{:U('Home/TrackEvalut/JC_Station_management')}'" class="btn btn-lg btn-default" style="border-width: 1px 1px 6px 1px"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>&nbsp;跟踪应用评估</a>
                <a href="javascript:void(0)" onclick="window.iframeRight.location.href='{:U('Home/QualityEvaluation/index')}'" class="btn btn-lg btn-default" style="border-width: 1px 1px 6px 1px"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;数据质量评估</a>
                <a href="javascript:void(0)" class="btn btn-lg btn-default" style="border-width: 1px 1px 6px 1px"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>&nbsp;一键所有</a>
                <a href="javascript:void(0)" class="btn btn-lg btn-default" style="border-width: 1px 1px 6px 1px"><span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;导出Excel</a>
                <a href="javascript:void(0)" class="btn btn-lg btn-default" style="border-width: 1px 1px 6px 1px"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;录入</a>
            </div>

        </div>

        <!--    <hr/> -->
        <iframe id="iframeRight" name="iframeRight" style="min-height:600px;min-width:500px;width:97%;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()" src="__URL__/frameTableShow"></iframe>
    </div>
</div>
</div>
<!--    </div> -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="PLUG/bootstrap/js/bootstrap.min.js"></script>
    <script>
    var totalHeight = parent.document.body.clientHeight;
    var rightHeight = totalHeight-68-document.getElementById("select-left-1").offsetHeight;
    document.getElementById("select-left-2").style.height=0.51*rightHeight+"px";
    document.getElementById("select-left-3").style.height=0.49*rightHeight+"px";
    document.getElementById("select-left-2-body").style.height=0.34*rightHeight+"px";
    document.getElementById("select-left-3-body").style.height=0.34*rightHeight+"px";
    $(function() {

    })
    //搜索台站信息
    function searchstation(){ {
        var searchstationname = $("#btn-input").val();   

        $("ul li").each(  function() {

            var station = $(this).attr("station");            
            if (station.indexOf(searchstationname) != -1) {
              $(this).show();

          } else {

              $(this).hide();
              // $('#select-left-2-body').find('br').remove();
          }
      });

    }
    $('#btn-input').bind('请输入...', function() {
        searchstation();
    })};

    //搜索测点信息
    function searchpoint(){ {
      var searchpointname =  $("#btn-input1").val();  
      $("#select-left-3-body ul li").each(  function() {             
        var point = $(this).attr("point");            
        if (point.indexOf(searchpointname) != -1) {
          $(this).show();
      } else {
          $(this).hide();
      }
  });

  }
  $('#btn-input1').bind('请输入...', function() {
    searchpoint();
})};
  </script>
</body>

</html>