ajax 回调 + tp +<ul> + jquery + js搜索
2016-03-26 01:07
639 查看
<!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> 观测系统评估</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> 跟踪应用评估</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> 数据质量评估</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> 一键所有</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> 导出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> 录入</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例
- jQuery常用的一些技巧汇总
- 利用jquery制作滚动到指定位置触发动画
- jquery中validate与form插件提交的方式小结
- jquery cycle 插件停止/启用轮播
- day18 jQuery 加强
- jquery的节选
- jQuery组件开发
- 页面滚动条 刷新后 保持在原来的位置
- jQuery on的用法
- jquery remove() empty()
- jquery之attr()和removeAttr() prop的使用场所
- jquery插件——检测DOM元素是否在浏览器可视范围之内
- 巧用 jQuery 筛选器，避免重复代码
- JQuery倒计时
- 记录--关于Jquery uploadify 不能动态传值的问题（java）
- 1、input hidden change事件失效2、html通过js追加的元素jquery事件失效
- jquery禁用动画
- 二维码篇【一】【JS】使用jquery.qrcode生成二维码
- 3月25日问题解决<jQuery>