[javascript] 단어(구분자) 단위 반응형 줄바꿈

 

얼마전 개발자 오픈채팅방에서

가변적인 너비의 div안에 DB에서 가져온 텍스트들을 넣는데

div의 너비가 바뀔때마다 자동으로 줄바꿈이 되어야 하는걸 만들어야 하는데

잘 모르겠다 라는 질문이 있었다.

간단하게 css로 줄바꾸면 되는거 아닌가 했는데

콤마(,) 로 구분되어진 단어들이고 단어안에 띄어쓰기도 들어가 있다고 한다.

즉 콤마로 구분되어진 단어들이 너비에 따라 자동으로 줄바꿈이 되어야 하며

단어들은 띄어쓰기가 포함되어 있고 폰트의 크기도 가변적으로 변할 수 있다고 한다.

 

재밌어 보여서 대충 구현을 해 보았다.

jsbin으로 구현해 보았으니

 

https://jsbin.com/tomojibaku/1/edit?js,output 

 

JS Bin

Sample of the bin:

jsbin.com

 

이 링크에 가서 확인을 하면 된다.

 

코드는

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="textContatiner" class="txt-container">
    
  </div>
</body>
</html>
 cs

 

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var data = "일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈,육번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈";
setTxt();
 
// 너비가 바뀔때마다 셋팅을 해준다.
$( window ).resize(function() {  
setTxt();
});
 
 
 
function setTxt(){
    // 너비가 변할때마다 div컨테이너를 비워주고 다시 셋팅
  var container = $("#textContatiner");
  container.empty();
 
  var conW = container.width();
  var dataArr = data.split(",");
 
  // 폰트크기도 가변적으로 바뀔수 있기 때문에 1글자의 너비를 구한다.
  container.append($("<span id='test'>한</span>"));
  var oneW = $("#test").width()*2;
  $("#test").remove();
  
  var lineData = "";
  var subData = "";
  var lineNo = 0;
  var spId ="sp"+ lineNo;
  var sp = $("<span id='"+spId+"'></span>");
  container.append(sp);
  
 
  for (var i = 0; i <dataArr.length; i++) {
     subData = lineData;
     lineData = lineData+","+dataArr[i];
    sp.text(lineData);
    var spW = sp.width();
    if(spW > conW - oneW){
      sp.text(subData);
      sp.css("display","block");
      lineNo++;
      i--;
      spId ="sp"+ lineNo;
      sp = $("<span id='"+spId+"'></span>");
      container.append(sp);
      lineData = "";
    }
    console.log(spW);
  };
  
  
  
}
 cs

 

폰트가 바뀔수도 있으니 div안에 한글자를 넣어서 너비를 확인하고 클리어 시킨다음

콤마로 구분된것들을 하나씩 추가 하다가 일정 너비 이상이 되면

이전텍스트로 복원을 하고 새로운 span을 생성해 넣는 식이다.

더 깔끔하게 구현하려면 css도 좀 손봐야 하고

첫번째 문장에 들어가는 콤마 지우고 하면 쓸만할 것 같다.

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07

자동차 경주 만들기 웹버전


심심해서 만들어본


자동차 경주 웹버전


자바스크립트 제이쿼리를 이용해서 만들었다


https://jsbin.com/diqiwiroho/1/edit?output


1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <h1>자동차 경주</h1>
  <h4>경주할 자동차 대수를 입력 후 경주 시작을 누르시면 됩니다.</h4>
  <h4>이름적용 체크 박스 체크 후엔 자동차의 이름을 지정 할 수 있습니다.</h4>
  <h4>자동차 최대 입력 대수는 30대 입니다.</h4>
  <h4>트랙 최대 길이는 100 입니다.</h4>
  <h4>속도제한은 없습니다. 1000당 1초 입니다.</h4>
  <h4>만든 사람은 잘생긴 야매 개발자 In★ 입니다. 경주 할때마다 감사함을 느끼세요.</h4>
   <label for="nameCheck">이름적용</label><input id="nameCheck" type='checkbox' onchange="countCar();" />
  <br>
  <label for="nameCheck">트랙길이</label><input id="trackLength" type='number' onchange="countCar();" value="10"/>
  <br>
  <label for="nameCheck">속도(ms)</label><input id="raceSpeed" type='number' value="400"/>
  
  
  
  <br>
  <br>
  <label>경주할 자동차 대수</label>
  <input type="number" id="inputCarCnt" onchange="countCar();"/>
  
  <button onclick="startRace();">경주시작</button>
  <button onclick="countCar();">리셋</button>
  
  <div id="carNameContainer">
    
  
  </div>
  
  <div id="trackContainer" class="track-container">
  </div>
  
  <div id="finshBox">
  </div>
  
</body>
</html>
cs




2. css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.track-container{
  width:100%;
  display:inline-block;
  
}
.track{
  width:100%;
  float: left;
}
.car-label{
  float:left;
  display:inline-block;
  
}
.cell{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
}
.move{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
  background:black;
}
h4{
 margin:0px;
  margin-bottom:5px;
 font-size:15px;
  
}
cs



3. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var carArr = [];
var finshNum = 0;
//var carNameArr = [];
 
function countCar(){
  carNameArr = [];
  carArr = [];
  finshNum = 0;
  var carCnt = $("#inputCarCnt").val();
  
  if(carCnt > 30){
    alert("최대 자동차 입력 개수는 30대 입니다.");
    return false;
  }
  
  
  var trackLen =  $("#trackLength").val();
  
  
  if(trackLen > 100){
    alert("최대 트랙 길이는 100 입니다.");
    return false;
  }else if(trackLen == 0 || trackLen ==""){
    alert("트랙길에 공백 혹은 0은 실행 할 수 없습니다.");
    return false;
  }
 
  
  var trackCon = $("#trackContainer");
  
  trackCon.empty();
   $("#finshBox").empty();
  $("#carNameContainer").empty();
  for(trackCnt=0; trackCnt < carCnt; trackCnt++){
    var track = $("<div class='track'></div>");
    track.append($("<div id='name"+trackCnt+"' class='car-label'>"+(trackCnt+1)+"번 차 : </div>"));
    
    for(cellCnt = 0; cellCnt < trackLen; cellCnt++){
      track.append($("<div class='cell'></div>"));
    }
    
    trackCon.append(track);
    
    if($("#nameCheck").prop("checked")){
        $("#carNameContainer").append($("<div><label>차이름 : </label><input class='car-nm-input' type='text' onkeyup='applyCarName();'/></div>"));
    }
    var carObj = {};
    carObj.num = trackCnt+1;
    carObj.name ="";
    carObj.move = 0;
    carObj.track = track;
    carObj.finshNum =0;
    carArr.push(carObj);
  }
}
 
 
function applyCarName(){
  var carNames = $(".car-nm-input");
  $.each(carArr, function(index, item) {
     item.name = carNames.eq(index).val();
    
    if(item.name != ""){
      $("#name"+index).text(item.name+" : ");
    }
    
  });
  
  
}
 
function startRace(){
  console.log("start");
  var startNmCheck = true;
  if($("#nameCheck").prop("checked")){
    $.each(carArr, function(index, item) {
      if(item.name == ""){
        startNmCheck = false;
      }
    });
   }
  
  var raceSpd =  $("#raceSpeed").val();
  
  if(raceSpd==""){
    alert("속도에 값을 입력 하여 주십시오");
    return false;
  }
  
  if(!startNmCheck){
    alert("경주할 차 이름을 모두 입력하여 주십시오.");
     return false;
  }
  
  
  
  
  moveAction();
}
 
 
function moveAction(){
  var finsh = true;
  
      $.each(carArr, function(index, item) {
      var moveVal = Math.round( Math.random()*10 );
      if(moveVal > 4){
        item.move++;
         var trackCell = item.track.find(".cell");
        trackCell.eq(0).attr("class","move");
      }
      
      
      if(item.finshNum==0){
        var trackLen =  $("#trackLength").val();
        if(item.move==trackLen){
          finshNum++;
          item.finshNum = finshNum;
          if($("#nameCheck").prop("checked")){
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.name+"</div>"));
          }else{
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.num+"번차</div>"));
          }
          
       
        }
        finsh = false;
      }
      
      
    });
  
  
  if(!finsh){
    setTimeout(function() {
       moveAction();
    }, $("#raceSpeed").val());
  }else{
   
  }
  
}
cs



이렇게 하면


트랙길이, 경주할자동차 대수, 시간 설정이 가능한 자동차 경주 만들수 있음


차이름에 메뉴이름 같은거 적어놓고 사다리 타기 대용으로도 할수 있음.

저작자표시

'Yame Daily Life' 카테고리의 다른 글

나의 부채 이야기  (0) 2019.10.25
[합죽선] 전주 미선공예사, 부채박물관 방문기  (0) 2019.10.11
[달빛조각사] 달조 개꿀팁 및 노하우 모음  (0) 2019.10.10
[리니지2 M] 리니지2 M 공식 영상 및 플레이 영상 모음  (0) 2019.09.06
[리니지2 M] 리니지2 모바일 사전 예약및 사전예약 방법  (2) 2019.09.06

[제이쿼리] 동적으로 DOM추가 append 함수


예전에 동적으로 셀렉트 박스 내용 바꿔주기 할때 사용했던 append인데


프로젝트 중간중간 자주 사용하는 부분이라 복사용으로 포스팅 합니다.


이전엔 for문을 썻는데 each가 훨씬 간략하고 편하다 따로 길이를 구해주지 않아도 되기 떄문에


아주 편하게 사용 할 수 있다.


each에서 key 부분은 배열을 넣었을땐 index 숫자값이 들어오고

object(map) 형태의 데이터가 들어갔을떈 키값을 반환해 준다.


value는 당연히 해당 키값이나 인덱스의 값이 들어감.


아래 예제로 써놓은 코드는 dataList라는 배열에 각각 a,b,c,d,e 라는 맵형태의


데이터가 들어가있는 경우를 산정하고 작성한 것.




1
2
3
4
5
6
7
8
9
10
var dataList = [a,b,c,d,e];
//안에 있는 자식 노드 비우기    
$("#failListUl").empty();
// 반복
    $.each(dataList , function(key, value) { 
        // 안에 넣을 dom 생성 
        var addContent = $("<li>"+value.tag_ID+"</li>");
        // dom에 생성한 dom 추가
        $("#failListUl").append(addContent);
    });
cs


저작자표시 비영리

'Yame Daily Life' 카테고리의 다른 글

[리뷰] 스노우 울프 엠팽 베이비 후기  (0) 2019.06.10
[합죽선] 부채를 좋아하는 사람 (전통을 손에 쥐기까지)  (3) 2019.05.20
[라그M] 니플헤임 안개숲 초월 퀘스트 NPC 위치!  (0) 2018.11.12
[라그M] 프리 비숍 룬판 정보(5.0 추가)  (2) 2018.10.10
[MSSQL] 날짜,시간 데이터 생성하기  (0) 2018.07.10

[제이쿼리] form의 내용을 한번에 오브젝트로 만들기



form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때


하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.


이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자



일단 제이쿼리 플러그인을 사용해야 한다



제이쿼리 시리얼라이즈 링크




사용 방법은


두가지가 있다


하나는 배열로 만들기 하나는 오브젝트로 만드는 방법






1. html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="yameaForm">
    <input name="input1">
    <input name="input2">
    <input name="input3">
    <input name="input4">
    <input name="input5">
    <input name="input6">
  </form> 
</body>
</html>
cs



2. js


1
2
3
4
5
6
7
8
9
function makeObject(){
var param = $("#yameForm").serializeObject();
console.log(param);
}
 
function makeArray(){
var param = $("#yameForm").serializeArray();
console.log(param);
}
cs



위와 같은 방법으로 만들면 된다


짱편함


개편함


짱짱맨임


저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26

react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )



nodejs사용 babel, webpack 사용하는 사람들에게 적용 가능 한 방법입니다.


다른건 모르겠네요 어차피 여긴 야매 가이드니까 신경 ㄴㄴ



이제 튜토리얼 하고 있는데 세상에 바닐라JS는 나에겐 너무 높은 벽이었고


3년전 처음 배울때나 바닐라 JS 사용했지 실무투입하고 난 이후부턴


제이쿼리만 주구장창 썻는데 getelementById 라니 이건 나에게 너무나 가혹한것 같아


제이쿼리를 어떻게 쓸수 있을까 하고 또 구글링을 시작 했습니다.


역시 인터넷엔 없는게 없었고


1
import $ from "jquery";
cs


이렇게 js에 추가해 주면 사용 할수 있다고 스택오버플로우 형들이 알려주길래


그대로 적용 시켰더니



왜 죽은 동태눈알 색깔을 하고 있는걸까..


unused import $ from jquery 라는 메세지와


메세지창을 확장시키면


checks that javascript or typescript import binding ... 어쩌구 저쩌구


라고 나오면 실행되지 않는다.


아!


npm에서 제이쿼리를 다운받지 않아서 그런건가? 


그렇지 제이쿼리가 없으면 못쓰는거겟지 라는 생각으로


npm install jquery --save


명령어를 입력후 제이쿼리를 설치 했으나


역시 죽은동태눈깔은 돌아오지 않았다.



조금더 구글링을 해보니


1
2
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
cs


이렇게 하면 된다고 한다


오오 신기하다 된다된다


이제 리액트에서 제이쿼리를 사용할수 있겟구나 하고


테스트해보니 


제이쿼리 정상작동 하는 것을 확인 할 수 있었다.




저작자표시 비영리

'Yame Programmer > react.js' 카테고리의 다른 글

[react.js] react-router v4 browserHistory.push 오류 해결 방법  (0) 2017.04.19
[react.js] 함수형 컴포넌트  (0) 2017.02.27
[react.js] react Component Life Cycle API  (0) 2017.02.27
[react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()  (0) 2017.02.27
[react.js] module not found error cannot resolve 'babel' in 해결 방법  (0) 2017.02.22

자바스크립트로 YYYYMMDD 형식의 이번년도 달 일 구하는 방법



진짜 쉽지만 만들대마다 귀찮은 코드.


날짜형식은 20160227 이나 2016-02-17 같은 텍스트로 만드는 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
/*날짜 구하기*/
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1
    var day = date.getDate();
    if(month < 10){
        month = "0"+month;
    }
    if(day < 10){
        day = "0"+day;
    }
 
    var today = year+""+month+""+day;
cs


큰따옴표 안에 '-' 라든지 '/' 같은걸 넣어도 된다.


getMonth안에 +1을 하는 것은 데이트로 월정보를 가져오면


월이 0부터 시작하기 때문이다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15

개발할때마다 가장 귀찮았던 것 중 하나는 천단위마다 콤마를 찍어주는 것이었다.


처음엔 문자열로 변환하고 글자 개수를 세고 3개를 기준으로 앞뒤를 잘라서 분리하고


그사이에 콤마를 집어넣는 아주아주 귀찮은 방법을 사용했다가


정규식을 사용하여 아주아주 간편하게 천단위마다 콤마를 찍어줄수 있다는걸 알게 되었다.


로직은 굉장히 간단하다.


1
2
3
4
function numbeComma(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
 
cs


이게 끝이다.


그동안의 천단위 콤마찍는 귀찮음에서 한번에 해방되는 느낌이다.


예전에 인터넷 돌아다니다 발견했던건데


이거 만든 사람 상줘야 한다.


정규식이라는 개념을 만들어낸 사람도 참 대단하다. 스크립트에서도 그렇고 SQL에서도 그렇고


요즘 정규식이라는걸 참 유용히 잘 사용하고 있다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.


append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌


특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을


알아 보도록 하자.



예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄


사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.


혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.



1
2
3
4
5
6
7
8
<select id="select1" onchange="itemChange()">
<option>키보드</option>
<option>마우스</option>
<option></option>
</select>
 
<select id="select2">
</select>
cs


먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때


1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function itemChange(){
 
var keyboard = ["갈축","청축","적축"];
var mouse = ["광마우스","유선마우스","비싼마우스","미키마우스"];
var monitor = ["17인치","22인치","24인치","26인치"];
 
var selectItem = $("#select1").val();
 
var changeItem;
 
if(selectItem == "키보드"){
changeItem = keyboard;
}
else if(selectItem == "마우스"){
changeItem = mouse;
}
else if(selectItem == "모니터"){
changeItem =  monitor;
}
 
$('#select2').empty();
 
for(var count = 0; count < changeItem.size(); count++){                
                var option = $("<option>"+changeItem[count]+"</option>");
                $('#select2').append(option);
            }
 
}

cs

   


여기서 주목할 것은


empty()와 append 이다



기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고


append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.


이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.







저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01

켄도 그리드를 생성시에 들어가는 값이 null 일때 '--' 라든가 '값없음' 이라던가 하는 내용을 넣어야 할 때가 있다.


물론 DB에서 쿼리로 뽑아올때 조건을 주어 null 일 경우 대체문자를 사용 할 수 있지만 


뽑아온 데이터 리스트끼리 사칙연산을 해야 하는 경우 중간에 들어가있는 string 문자열이 문제가 될 수도 있다.


혹은 쿼리에 손을 대지 못하는 경우도 있을 수 있다.



방법은 간단하다. 이런 기능이 있는줄 모르기 때문에 못쓰는 거지 있는줄 안다면 쉽게 사용이 가능하다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 

var nullTypeString = '--';

 $("#grid").kendoGrid({
       dataSource: {
           type: "odata",
           transport: {
               read: "데이터 가져올곳"
           },
           pageSize: 20
       },
       height: 550,
       groupable: true,
       sortable: true,
       pageable: {
           refresh: true,
           pageSizes: true,
           buttonCount: 5
       },
       columns: [{
           field: "record_DATE",
           title: msgData.data('elecdata'), //날짜
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       },{
           field: "tag_NAME",
           title: msgData.data('tagname'), //태그명
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       }, {
           field: "sum_VAL",
           title: "Sum",
           locked: true,
           format:"{0:n2}",
           template:kendo.template("#if (sum_VAL != null) {# #=sum_VAL# #} else {# #="+nullTypeString+"# #}#"),
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }, {
           field: "avg_VAL",
           title: "Avg",
           format:"{0:n2}",
           template:kendo.template("#if (avg_VAL != null) {# #=avg_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       },{
           field: "min_VAL",
           title:"Min",
           format:"{0:n2}",
           locked: true,
           width: 120,
           template:kendo.template("#if (min_VAL != null) {# #=min_VAL# #} else {# #="+nullTypeString+"# #}#"),
           attributes: {
               style: "text-align: right;"
             }
       },  {
           field: "max_VAL",
           title: "Max",
           format:"{0:n2}",
           template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }]
   });
cs




위와 같이 코딩하면 된다. 중요한건


columns 의


template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#")


이 부분이다.



해당 컬럼의 들어오는 필드의 값이 null이 아닐경우 값을 나타내고 그것이 아니라면 nulltypeString 변수값을 넣는다는 설정이다.

저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기  (0) 2016.06.21
[kendo ui] 켄도 ui 차트 색상 지정하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[켄도ui] 차트 배경 없애는 방법, 배경 투명으로 만들기  (0) 2015.07.13
[CSS 퍼블리싱] ul li 간격 없애기  (2) 2015.06.19

제이쿼리에서 foreach문 사용하는 방법


1. 배열 사용


$.each() 함수를 사용하여 배열을 반복문 형태로 사용할 수가 있다.


ex)1


1
2
3
4
5
6
7
8
9
10
11
// 예제1
$.each([0,8,4,10], function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
 
//예제2
var arr = [0,8,4,10];
 
$.each(arr, function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
cs



예제 1번과 2번을 실행하면


콘솔창엔 다음과 같은 결과가 동일하게  나온다


1
2
3
4
0:값 = 0
1:값 = 8
2:값 = 4
3:값 = 10
cs





2. 맵 사용


맵형식을 가지고 있는 데이터를 사용할땐 key와 value의 쌍으로 사용한다.


ex)2


1
2
3
4
5
6
7
8
9
10
11
var map = { 
  'name': 'yamea', 
  'age': '99' 
}; 
$.each(map, function(key, value) { 
  console.log(key + ': ' + value); 
});
 
// 결과
name: yamea
age: 99
cs




3. json 형식 데이터 사용


조금 더 나아가서 우리가 흔하게 사용하는 여러개의 오브젝트들이 담긴 배열을 사용할땐 조금만 응용을 하면 된다.


ex)3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var map1 = { 
          'name': 'yamea', 
          'age': '10' 
        };
var map2 = { 
          'name': 'yamea2', 
          'age': '20' 
        };
var map3 = { 
          'name': 'yamea3', 
          'age': '30' 
        };
var arr = [map1, map2, map3];
 
        $.each(map, function(key, value) { 
          console.log("이름 = "+ value.name); 
        });
        
        // 결과값
        
        이름 = yamea
        이름 = yamea2
        이름 = yamea3
cs


위와 같은 방식으로 사용을 할 수 있다.


아주 간단한 방법으로 긴 for문을 사용하지 않고도 간단하게 사용할 수 있는 방법이다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23

+ Recent posts

티스토리툴바