MapViewList.jsp 10.4 KB
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/systeminfo/init_wev8.jsp"%>
<jsp:useBean id="rs" class="weaver.conn.RecordSet" scope="page" />

<HTML>
	<HEAD>
		<title>知识地图</title>
	    <link rel="stylesheet" type="text/css" href="/wui/theme/ecology8/page/perfect-scrollbar/perfect-scrollbar_wev8.css" />
	    <script type="text/javascript" src="/wui/theme/ecology8/page/perfect-scrollbar/perfect-scrollbar_wev8.js"></script>
		<script type="text/javascript" src="/wui/theme/ecology8/page/perfect-scrollbar/jquery.mousewheel_wev8.js"></script>
		<script type="text/javascript" src="/js/ecology8/jNice/jNice/jquery.jNice_wev8.js"></script>
	    <link rel="stylesheet" href="/knowledgeMap/css/view.css?v=1.8" />
		<style type="text/css">
			.btn {
			    float: right;
			    background: #386a87;
			    color: #fff;
			    margin-top: 2px;
			    margin-right: 10px;
			    padding: 2px 0;
			    margin-left: 10px;
			}
			.backdiv {
			    top: 97px;
			    right: 0;
			    left: 0;
			    text-align: left;
			    padding-left: 10px;
			    line-height: 28px;
			    height: 28px;
			}
			.col_div:hover {
			    -webkit-box-shadow: none;
			    box-shadow: none;
			}
			.col_div {
			    float: left;
			    position: relative;
			    min-height: 1px;
			    margin-right: 15px;
			    margin-left: 15px;
			    width: 230px;
			    margin-bottom: 20px;
			    margin-top: 7px;
			    background-color: #fff;
			    -webkit-transition: transform 0.15s ease;
			    -moz-transition: transform 0.15s ease;
			    -ms-transition: transform 0.15s ease;
			    transition: transform 0.15s ease;
			    border-radius: 5px;
			    overflow: hidden;
			    height: 225px;
			    background-image: url('/knowledgeMap/images/view.png');
			    padding: 10px;
			    border-radius: 0px;
			    padding-left: 0;
			    padding-top: 0;
			    background-size: 240px 225px;
			    background-repeat: no-repeat;
			}
			.home_listimg {
			    height: 163px;
			    border-top-left-radius: 10px;
			    border-top-right-radius: 10px;
			}
			.home_listimg img {
		        height: 265px;
			 	margin-top: -15px;
			}
			.boxPD {
		       	width: 100%;
			    min-height: 1px;
			    overflow: hidden;
			    background: #eeeeee;
			    border-bottom-left-radius: 8px;
			    border-bottom-right-radius: 8px;
			    height: 55px;
			    margin-top: -3px;
			}
			.rows:after {
			    clear: both;
			    content: ' ';
			    display: block;
			}
			.ul1 li{
				width: 6em;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
			#hiddentypeul li{
				width: 6em;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
		</style>
	</head>
	<BODY id="body" style="overflow: hidden;">
		<div class="topSelect">
			<div class="conmenu">
				<div>
					<ul class="menuul">
					   <li lid="" class="active">知识地图</li>
					</ul>
					<div class="rightDiv">
					    <input type="hidden" id="pageNum" value="1"/>
					    <input type="hidden" id="totalpage"/>
					    <input type="text" class="intext" id="keyword" placeholder="请输入搜索关键字"/>
					    <div class="selectBtn" title="查询知识地图">查询</div>
					</div>
				</div>
			</div>
			<div class="selectcont">
			    <div>
				    <div class="stitle">分类</div>
				    <ul class="ul1">
					   <li lid="" class="active a_typeid">全部</li>
					   <%
					        String sql = "SELECT id,name FROM KT_MapType ORDER BY dsporder";
						    rs.executeSql(sql);
						    int count = 0;
						    int counttotal = rs.getCounts();
						    while(rs.next()){
						    	if(count<12){%>
								<li lid="<%=Util.null2String(rs.getString("id")) %>" class="a_typeid" title="<%=Util.null2String(rs.getString("name")) %>"><%=Util.null2String(rs.getString("name")) %></li>
						        <%count++;
						        }
						    }
						    if(counttotal>12){%>
						    	    <li class="moretype"><img src="/knowledgeMap/images/more.png" title="展开更多" class="moreimg"/></li>
						   <% }%>
					</ul>
					<% if(counttotal>12){
						 rs.beforFirst();%>
					    <div class="typeshow showmode">
					       <ul id="hiddentypeul">
					           <%count = 0;
					           while(rs.next()){
					        	   if(count>11){%>
					        	      <li lid="<%=Util.null2String(rs.getString("id")) %>" class="a_typehidden"><%=Util.null2String(rs.getString("name")) %></li>
					        	   <%}
					        	   count++;  
					           } %>
					       </ul>
					    </div>
					<% }%>
				</div>
			</div>
		</div>
		<div class="content">
		    <div class="rows" id="rows">
		    </div>
		</div>
		<script type="text/javascript">
		    var isScrollExec = 1;
			$(document).ready(function(){
				var bodyh = $("#body").height();
			   $(".menuul li").click(function(){
			       $(".menuul li").removeClass("active");
			       $(this).addClass("active");
			       var _lid = $(this).attr("lid");
			       if(_lid>=10000){
			          $(".selectcont").hide();
			          $(".rightDiv").hide();
			          $('.content').hide();
			          var _src = $(this).attr("_src");
			       }else{
			    	   if(_lid == 3){
			    		   $(".content").height(bodyh-$(".selectcont").height());
			    		   	$(".selectcont").hide();
			    	   }else{
			    		   $(".selectcont").show();
			    		   $(".content").height(bodyh-$(".topSelect").height());
			    	   }
			          	$(".rightDiv").show();
			          	$('.content').show();
			          if(_lid!=""){
			             $(".ul2 li").removeClass("active");
					     $(".ul2 li[lid='']").addClass("active");
					     $(".ul1 li").removeClass("active");
					     $(".ul1 li[lid='']").addClass("active");
			          }
					   $(".content").perfectScrollbar("update");
			          execSelect();
			       }
			   });
			   $(".ul1 li.a_typeid").click(function(){
			       $(".ul1 li").removeClass("active");
			       $(".ul2 li").removeClass("active");
			       $(".ul2 li[lid='']").addClass("active");
			       var _lid = $(this).attr("lid");
			       if(_lid!=""){
			          $(".menuul li").removeClass("active");
			          $(".menuul li[lid='']").addClass("active");
			       }
			       $(this).addClass("active");
			       $("#keyword").val("");
			       execSelect();
			   });
			   //分类更多
			   $(".moretype").click(function(){
			       if($(".typeshow").is(":hidden")){
			          var _top = $(this).offset().top+36;
			          var _left= $(this).parent().find("li").eq(1).offset().left;
			          $(this).find("img").attr({"src":"/knowledgeMap/images/more2.png","title":"收起更多"});
			          $(".typeshow").css({"top":_top,"left":_left,"width":(($(".ul1 li").eq(1).outerWidth()+10)*($(".ul1 li").length-1))}).show();
			       }else{
			          $(".typeshow").hide();
			          $(this).find("img").attr({"src":"/knowledgeMap/images/more.png","title":"展开更多"});
			       }
			   });
			   $("#hiddentypeul li").click(function(){
			      var _lid1 = $(this).attr("lid");
			      var _lval1 = $(this).html();
			      var _lid2 = $(".ul1 li").eq(1).attr("lid");
			      var _lval2 = $(".ul1 li").eq(1).html();
			      $(".ul1 li").removeClass("active");
			      $(".ul1 li").eq(1).attr("lid",_lid1).html(_lval1).addClass("active");
			      $(this).attr("lid",_lid2).html(_lval2);
			      $(".ul2 li").removeClass("active");
			      $(".ul2 li[lid='']").addClass("active");
			      $(".menuul li").removeClass("active");
			      $(".menuul li[lid='']").addClass("active");
			      $(".typeshow").hide();
			      execSelect();
			   });
			   
			   $(".selectBtn").click(function(){
			      execSelect();
			   });
			   $(".content").height($("#body").height()-$(".topSelect").height());
			   $(".content").perfectScrollbar();
			   $(".content").scroll(function() {
				 	var totalheight = $(".rows").height(); 
					if ($(".content").scrollTop() >= totalheight - $(".content").height() - 250) {  // 说明滚动条已达底部
						if(Number($("#pageNum").val())<=Number($("#totalpage").val()) && isScrollExec==1){
						   getMoreList();
						}
					}
			   });
			   getMoreList();
			   $("#keyword").keyup(function(event){
					var keyCode = event.keyCode;
					if(keyCode == 13){
					   execSelect();
					}
			   });
			   
			});
			function execSelect(){
			    $(".typeshow").hide();
			    $(".moretype").find("img").attr({"src":"/knowledgeMap/images/more.png","title":"展开更多"});
			    isScrollExec = 0;
			    $("#pageNum").val("1");
			    $('#rows').empty();
			    getMoreList();
			}
			function getMoreList(){
			    var keyword = $("#keyword").val();
			    var pageNum = $("#pageNum").val();
			    var typeval = $(".ul1 li.active").attr("lid");
			    $.ajax({
					url:"/knowledgeMap/data/Operation.jsp",
					data:{"pageNum":pageNum,"keyword":keyword,"typeval":typeval},
					type:"post",
					dataType:"json",
					beforeSend:function(){
					    isScrollExec = 0;
					},
					success:function(data){
					  if(data.msg==0){
					     if(data.list!=null){
					        var htresult ="";
					        var totalpage = data.totalpage;
					        var $d = data.list;
					        $.each($d,function(i,n){
					           htresult +="<div class=\"col_div\">";
					           htresult += "<div class=\"home_listimg\" title='查看知识地图'>";
							   htresult += "<a href=\"javaScript:openFullWindowHaveBar('/knowledgeMap/data/MainInfo.jsp?mapId="+n.id+"');\">";
							   if(n.bjtp!=null && n.bjtp!="" && n.bjtp!="null" && n.bjtp!="0"){
							      htresult += "<img src=\"/weaver/weaver.file.FileDownload?fileid="+n.bjtp+"\">";
							   }else{
							      htresult += "<img src='/knowledgeMap/images/temp.png'>";
							   }
							   htresult += "</a>";
							   htresult += "</div>";
							   htresult += "<div class=\"boxPD\"><div class=\"home_listdateBOX1\" title=\""+n.name+"\">"+n.name+"</div>";
							   htresult +="</div></div>";
					        });
					        
							$('#pageNum').val(parseInt(pageNum)+1);
							$('#totalpage').val(totalpage);
							$('#rows').append(htresult);
							
							$(".content").perfectScrollbar("update");
					     }
					  }else{
					     $('#rows').empty();
					     var htresult = "<div class='taskTips'>"+data.msg+"</div>";
					     $('#rows').append(htresult);
					  }
					},
					complete:function(data){
					    isScrollExec = 1; 
					}
			  });
			}
			function filter(str){
				str = str.replace(/\+/g,"%2B");
		   	 	str = str.replace(/\&/g,"%26");
				return str;	
			}
		</script>
	</BODY>
</HTML>