프리랜서 웹개발자 RELATION

RELATION 로고

홈페이지 소스

[소스] array생성(push), 순차정렬 #3

2022.05.09
array생성 (push), 순차정렬

리스트 데이터를 DB로 관리하면 좋지만 프로젝트 성격상 DB 사용이 어려운 경우 array에 리스트 값을 정의해 놓고 또 다른 array를 사용하여 리스트 우선 순위를 달리하는 스크립트.

테스트 
http://relation.co.kr/images_board/board_system_publishing/286/index.html?gbn=A
http://relation.co.kr/images_board/board_system_publishing/286/index.html?gbn=C
http://relation.co.kr/images_board/board_system_publishing/286/index.html?gbn=D

파라미터 gbn 값이 A,B,C 변경에 따라 리스트 sort가 변경됨 
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION_NO_286</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(document).ready( function(){
				creat_array();
		});
		
		function getParameterByName(name)
		{
				name = name.replace(/[[]/, "[").replace(/[]]/, "]");
				var regex = new RegExp("[?&]" + name + "=([^&#]*)"),
						results = regex.exec(location.search);
				return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " "));
		}		
		
		function creat_array()
		{
				var array_ls = [];
				array_ls.push({ no:"0", tit:"title0", txt:"text0"});
				array_ls.push({ no:"1", tit:"title1", txt:"text1"});
				array_ls.push({ no:"2", tit:"title2", txt:"text2"});
			
				var cate_gbn = getParameterByName('gbn');
				//console.log( cate_gbn );
				
				if(cate_gbn == "A" )
				{
						array_cate_ls = [0,1,2];
				}
				else if( cate_gbn == "B")
				{
						array_cate_ls = [1,2,0];
				}
				else if( cate_gbn == "C")
				{
						array_cate_ls = [2,0,1];
				}
				else
				{
						array_cate_ls = [0,2,1];
				}
				
			  var total_array = array_cate_ls.length;
				//console.log( total_array );
			
				for(var i=0; i<total_array; i++ )
				{
						var add_ls = "";
						add_ls += "<div class='ls'>";
						add_ls += array_ls[array_cate_ls[i]]['tit']+"-"+array_ls[array_cate_ls[i]]['txt'] ;
						add_ls += "</div>";
					
						document.write( add_ls );
				}
		}
	</script>
	<style>
		* { margin:0; padding:0; }
		.ls {	display:inline-block; width:100%; font-size:14px; color:#666; }
	</style>	
</head>

<body>
</body>
</html>




파라미터 전송 없이, 새로고침없이 LS생성 변경 
http://relation.co.kr/images_board/board_system_publishing/286/index2.html
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION_NO_286_02</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(document).ready( function()
		{
				creat_array('0');
			
				$(".button_area .btn").click( function(){
						console.log( $(".button_area .btn").index(this) );
						creat_array( $(".button_area .btn").index(this) );
				});
		});
		
		function creat_array(gbn)
		{
				$(".ls_area").empty(); //초기화
			
				var array_ls = [];  //LS 데이터 값
				array_ls.push({ no:"0", tit:"title0", txt:"text0"});
				array_ls.push({ no:"1", tit:"title1", txt:"text1"});
				array_ls.push({ no:"2", tit:"title2", txt:"text2"});
				
				if(gbn == "0" )
				{
						array_cate_ls = [0,1,2];
				}
				else if( gbn == "1")
				{
						array_cate_ls = [1,2,0];
				}
				else if( gbn == "2")
				{
						array_cate_ls = [2,0,1];
				}
				else
				{
						array_cate_ls = [0,2,1];
				}
				
			  var total_array = array_cate_ls.length;
				//console.log( total_array );
				for(var i=0; i<total_array; i++ )
				{
						var add_ls = "";
						add_ls += "<div class='ls'>";
						add_ls += array_ls[array_cate_ls[i]]['tit']+"-"+array_ls[array_cate_ls[i]]['txt'] ;
						add_ls += "</div>";
					
						$(".ls_area").append( add_ls );
				}
		}
	</script>
	<style>
		* { margin:0; padding:0; }
		.ls {	display:inline-block; width:100%; font-size:14px; color:#666; }
		.button_area li { display:inline-block; }
	</style>	
</head>

<body>
	
	<div class="button_area">
		<ul>
			<li><button type="button" class="btn">리스트A</button></li>
			<li><button type="button" class="btn">리스트B</button></li>
			<li><button type="button" class="btn">리스트C</button></li>
		</ul>	
	</div>	
	
	<div class="ls_area">
	</div>	
	
	
</body>
</html>
 

이 포스트 공유하기

글수정  글삭제 전체목록