▼웹 개발자로 살기

열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기


HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="guideBox">
  <p>검색조건<span class="textbtn">[열기]</span></p>
  <div style="display:none">
 
    <div>
      <dl>
        <dd>
          <select id="a" name="a">
            <option value="a1">A1</option>
            <option value="a2">A2</option>
            <option value="a3">A3</option>
          </select>
        </dd>
      </dl>
    </div>
 
  </div>
</div>
cs


Script
1
2
3
4
5
6
7
8
9
$(document).on("click",".guideBox > p",function(){
      if($(this).next().css("display")=="none"){
        $(this).next().show();
        $(this).children("span").text("[닫기]");
      }else{
        $(this).next().hide();
        $(this).children("span").text("[열기]");
      }
});
cs


'3.자바스크립트 > JavaScript' 카테고리의 다른 글

테이블 tr, td 등 선택하기  (0) 2017.03.03
커서치면 아래에 뜨게 하기  (0) 2016.08.12
인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생  (1) 2016.07.12
자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까?  (0) 2016.07.07
Ajax  (0) 2016.05.12

테이블 tr, td 등 선택하기



<원본테이블>


▼위 원본 테이블 그리는 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
<table summary="연립다세대 실거래가조회 결과입니다." id="rh_table" style="display: none;">                                         
    <caption>연립다세대 실거래가조회 목록 안내</caption>                                                                                                  
    <colgroup>                                                                                                                             
        <col width='*'>                                                                                                                    
        <col width='15%'>                                                                                                                  
        <col width='10%'>                                                                                                                  
        <col width='12%'>                                                                                                                  
        <col width='12%'>                                                                                                                  
        <col width='10%'>                                                                                                                  
        <col width='15%'>                                                                                                                  
        <col width='5%'>                                                                                                                   
        <col width='8%'>                                                                                                                   
    </colgroup>                                                                                                                            
    <thead>                                                                                                                                
        <tr>                                                                                                                               
            <th scope='col' rowspan='2'>단지</th>                                                                                            
            <th scope='col' rowspan='2'>법정동</th>                                                                                           
            <th scope='col' rowspan='2'>지번</th>                                                                                            
            <th scope='col' rowspan='2'>전용<br/>면적(㎡)</th>                                                                                  
            <th scope='col' rowspan='2'>대지권<br/>면적(㎡)</th>                                                                                 
            <th scope='col' colspan='3'><span class="searchYearMonth"><fmt:formatDate value="${dateTime}" pattern="yyyy년 M월"/></span></th> 
            <th scope='col' rowspan='2'>건축<br/>년도</th>                                                                                     
        </tr>                                                                                                                              
        <tr>                                                                                                                               
            <th scope='col'>계약일</th>                                                                                                       
            <th scope='col'>거래금액(만원)</th>                                                                                                  
            <th scope='col'>층</th>                                                                                                         
        </tr>                                                                                                                              
    </thead>                                                                                                                               
    <tbody>                                                                                                                                
        <tr>                                                                                                                               
            <td colspan='9'>검색결과가 없습니다.</td>                                                                                               
        </tr>                                                                                                                              
    </tbody>                                                                                                                               
</table>                                                                                                                                   
cs



그런데 표 자체는 그대로 두면서 

thead-tr-th 안의 글자를 바꾼다던가

thead-tr-th 추가 또는 삭제를 해서 테이블을 가공하고 싶을 때.



<가공된 테이블>


▼ 위 가공된 테이블처럼 원본테이블을 조작하려면

1
2
3
4
5
if ("대지권면적(㎡)" == $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) {   
    $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("보증금<br/>월세");       
                                                                                         
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").remove();                 
}                                                                                        
cs

thead 가 2줄인데 첫번째 tr에서 다섯번째 th 텍스트가 대지권면적인지?

맞다면 테이블 가공해야하므로 if문 안의 내용을 실행.

아니라면 테이블이 이미 가공된 상태이므로 if문 패스.


if문 안의 내용은

thead에서 두번째 tr을 찾아서 그 tr의 2번째 th를 찾아 거래금액(만원)을 보증금월세로 바꾸고.

대지권면적 th를 제거.



가공된 테이블을 다시 원본테이블로 바꾸려면?

1
2
3
4
5
6
7
8
9
if ("대지권면적(㎡)" != $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) {        
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(1)").html("법정동");                   
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(2)").html("지번");                    
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(3)").html("전용<br/>면적(㎡)");          
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(4)").html("대지권<br/>면적(㎡)");         
    $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("거래금액(만원)");              
                                                                                              
    $("#rh_table > thead > tr:nth-child(1)").prepend("<th schope='col' rowspan='2'>단지</th>"); 
}                                                                                             
cs

thead > 첫번째 tr> 다섯번째 th 의 텍스트가 대지권면적이 아니면 if문 안의 내용을 실행.

append()는 뒤에 붙이는거고, prepend()는 앞에 붙이는건데 prepend() 이걸 쓰는 이유는

rowspan 이 없으면 th 위치를 지정할 수 있을 것 같은데

rowspan 대문에 th 위치 지정해서 th 추가하기가 쉽지 않아서..

th 텍스트를 바꿔주고 제일 앞에 th를 추가해주는 식으로 함.


'3.자바스크립트 > JavaScript' 카테고리의 다른 글

열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기  (0) 2017.03.08
커서치면 아래에 뜨게 하기  (0) 2016.08.12
인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생  (1) 2016.07.12
자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까?  (0) 2016.07.07
Ajax  (0) 2016.05.12

java xml 파일을 json 으로 변환하기


깃허브

https://github.com/stleary/JSON-java


메이븐 추가

http://mvnrepository.com/artifact/org.json/json/20140107


참고 : 

http://blog.naver.com/yandul83/220432077444

http://stackoverflow.com/questions/1823264/quickest-way-to-convert-xml-to-json-in-java



pom.xml 추가

1
2
3
4
5
6
7
        <!-- To convert XML File in to JSON -->
        <!-- https://mvnrepository.com/artifact/org.json/json -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20140107</version>
        </dependency>
cs



Controller (java) 작성

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
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.json.XML;
 
@RestController
public class ActualDealController {
 
    @Value("${test.dataGoKrKey}")
    private String dataGoKrKey;
 
    //아파트매매 실거래자료
    private static final String dataGoActualDeaAptTradeUrl = "http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade";//?_wadl&type=xml
 
    /**
     * api 통해 실거래가 가져오기
     * @param paramMap
     * @return
     * @throws Exception
     */
    @RequestMapping("/deal/getDealPrice.do")
    public Map<String, Object> getActualDealPrice(@RequestParam Map<String, Object> paramMap) throws Exception {
        System.out.println("### getActualDealPrice paramMap=>"+paramMap);
        Map<String, Object> resultMap = new HashMap<>();
 
        try {
 
            StringBuilder urlBuilder = new StringBuilder(dataGoActualDeaAptTradeUrl);
            urlBuilder.append("?"+URLEncoder.encode("ServiceKey", "UTF-8")+"="+dataGoKrKey);
            urlBuilder.append("&"+URLEncoder.encode("DEAL_YMD", "UTF-8")+"="+URLEncoder.encode(paramMap.get("DEAL_YMD").toString(), "UTF-8"));
            urlBuilder.append("&"+URLEncoder.encode("LAWD_CD", "UTF-8")+"="+URLEncoder.encode(paramMap.get("LAWD_CD").toString(), "UTF-8"));
 
            URL url = new URL(urlBuilder.toString());
 
            System.out.println("###url=>"+url);
 
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setRequestMethod("GET");
            conn.setRequestProperty("Content-Type", "application/json");
            System.out.println("Response Code:"+conn.getResponseCode());
 
 
            BufferedReader rd;
            if (conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
                rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
            } else {
                rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
            }
 
            StringBuilder sb = new StringBuilder();
            String line;
            while ((line=rd.readLine()) != null) {
                sb.append(line);
            }
            rd.close();
            conn.disconnect();
 
            org.json.JSONObject xmlJSONObj = XML.toJSONObject(sb.toString());
            String xmlJSONObjString = xmlJSONObj.toString();
            System.out.println("### xmlJSONObjString=>"+xmlJSONObjString);
 
            ObjectMapper objectMapper = new ObjectMapper();
            Map<String, Object> map = new HashMap<>();
            map = objectMapper.readValue(xmlJSONObjString, new TypeReference<Map<String, Object>>(){});
            Map<String, Object> dataResponse = (Map<String, Object>) map.get("response");
            Map<String, Object> body = (Map<String, Object>) dataResponse.get("body");
            Map<String, Object> items = null;
            List<Map<String, Object>> itemList = null;
 
            items = (Map<String, Object>) body.get("items");
            itemList = (List<Map<String, Object>>) items.get("item");
 
            System.out.println("### map="+map);
            System.out.println("### dataResponse="+dataResponse);
            System.out.println("### body="+body);
            System.out.println("### items="+items);
            System.out.println("### itemList="+itemList);
 
            resultMap.put("Result", "0000");
            resultMap.put("numOfRows", body.get("numOfRows"));
            resultMap.put("pageNo", body.get("pageNo"));
            resultMap.put("totalCount", body.get("totalCount"));
            resultMap.put("data", itemList);
 
        } catch (Exception e) {
            e.printStackTrace();
            resultMap.clear();
            resultMap.put("Result", "0001");
        }
 
        return resultMap;
    }
}
 
cs


StringBuilder sb 출력하면 아래와 같이 xml 파일 형식이다.




이대로 java 에서 사용할 수 없기에...


org.json.JSONObject xmlJSONObj = XML.toJSONObject(sb.toString());

String xmlJSONObjString = xmlJSONObj.toString();

xml 파일 내용을 json 으로 파싱, string 으로 찍어보면 아래와 같다.




response 안에 header, body 가 있고

body 안에 items, numOfRows, pageNo, totalCount 가 있다.

items 안에 내가 얻고자 하는 "조회결과 목록=item들"이 있다.


여기서 item 들만 추출해 List<Map<String, Object>> 형식으로 담기 위해 위해 아래와 같이 작성한 것이다.


            ObjectMapper objectMapper = new ObjectMapper();
            Map<String, Object> map = new HashMap<>();
            map = objectMapper.readValue(xmlJSONObjString, new TypeReference<Map<String, Object>>(){});
            Map<String, Object> dataResponse = (Map<String, Object>) map.get("response");
            Map<String, Object> body = (Map<String, Object>) dataResponse.get("body");
            Map<String, Object> items = null;
            List<Map<String, Object>> itemList = null;
 
            items = (Map<String, Object>) body.get("items");
            itemList = (List<Map<String, Object>>) items.get("item");



저 깃허브는 찾았어도

pom.xml에 메이븐 dependency 추가하는거 찾는다고 오래걸렸다 ㅠ


JSTL 날짜형식 포맷팅 관련

JSTL API : http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html 

 


<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


- JSP 상단에 추가해야 하는 태그 라이브러리


 


fmt:parseDate : String 형을 받아서 워하는 포멧으로 자료형을 Date 형태로 변경 시켜 준다.


fmt:formatDate : Date 형을 받아서 원하는 포멧으로 날짜 형태를 변경시켜 준다.


 


ex)


<fmt:parseDate value="${applDt}" var="dateFmt" pattern="yyyyMMdd"/>

<fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd"/>


 


20081113 이라는 String 형태의 날짜 데이터가 존재한다고 가정하고


이 String 형태의 날짜를 2008-11-13 으로 변경하고 싶을 경우 위의 예 처럼 사용하면 된다.


그 외에도 2008. 11. 13 이런 식으로도 변경도 가능하다. (자신의 입맛에 맛게 변경하여 사용하도록 하자.)


 


<fmt:parseDate value="${applDt}" var="dateFmt" pattern="yyyyMMdd"/>


 


formatDate 는 Date 형태의 자료형만을 받아 변경시키도록 되어 있다. 즉 String 형태의 자료를 Date 형태로


변환시켜 줘야 할 필요가 있는데 이때 사용하는 태그가 fmt:parseDate 이다.


 


1. value 속성에는 넘어오는 파라메터(변환하고자 하는 String)의 이름을 적고


2. var 에는 fmt:formatDate 에서 사용될 변수 이름을 적어주도록 하자.


3. pattern 에는 value 속성에 들어가는 String 형태의 자료가 어떤 형태로 포멧되어 있는것인지를 지정해야 한다.


   즉, 넘어온 String 형태의 자료가 20081113 과 같이 포멧되어 있는 상태라면 yyyyMMdd 와 같이 적어준다.


   2008-11-13 과 같이 포멧되어 있는 상태라면 yyyy-MM-dd 와 같이 적어주면 된다.


 


<fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd"/>


 


1. value 에는 parseDate 에서 var 속성뒤 적은 변수명을 적어주도록 한다.


2. pattern 에는 자신이 원하는 포멧 형식을 적어주면 된다. (yyyy년 MM월 dd일 과 같이도 사용이 가능하다.)


 


[출처] JSTL 날짜 형식 바꾸기 (fmt:parseDate & fmt:formatDate)|작성자 lbiryu

http://lbiryu.blog.me/30037958388




<참고 추가>

https://www.tutorialspoint.com/jsp/jsp_standard_tag_library.htm

https://www.tutorialspoint.com/jsp/jstl_format_formatdate_tag.htm

https://www.tutorialspoint.com/jsp/jstl_format_parsedate_tag.htm

SQL 조건절 IN 안에 조건 여러개 넣기

마이바티스로

IN 조건절 안에 조건 여러개 넣는 방법



<application-properties.xml>

1
2
3
<!-- 영업팀 ID -->
<entry key="salesTeam">M0020,M0022,M0033</entry>
 
cs



<Controller.java>

1
2
3
4
5
6
7
8
9
/* 영업팀 ID 정보 */
@Value("#{config[salesTeam]}")
private String salesTeam;
 
~~중간생략~~
 
/* 영업팀 토큰 정보 가져오기 */
String[] salesTeamArray = salesTeam.split(",");
 
List<HashMap<String, String>> salesTeamTokenInfo = pushService.getSalesTeamTokenInfo(salesTeamArray);
cs



<Service.java>

1
2
3
public List<HashMap<String, String>> getSalesTeamTokenInfo(String[] salesTeamArray) {
    return pushMapper.getSalesTeamTokenInfo(salesTeamArray);
}
cs



<Mapper.xml>

1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="getSalesTeamTokenInfo" parameterType="list" resultType="HashMap">
    SELECT A.TOKEN,
           B.DEVICE
      FROM 테이블에이 A,
           테이블비 B
     WHERE 조인조건
       AND A.MEM_IDX IN
       <foreach collection="array" item="memIdx" index="index" open="(" separator="," close=")">
       #{memIdx}
       </foreach>    
</select>
cs


'7.데이터프레임워크 > myBatis' 카테고리의 다른 글

myBatis mssql insert 후 바로 시퀀스값 select 하기  (0) 2016.08.24

MultipartHttpServletRequest, MultipartFile, transferTo() 사용하여 파일쓰기



<jsp>

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
    <label for="imgFile" class="col-sm-2 control-label">이미지파일첨부</label>
    <div class="col-sm-10">
        <div class="col-sm-12 ">
            <input type="file" id="imgFile" name="imgFile" onchange="uploadImage()" title="첨부파일 찾기">
            <h6>※JPG 20kbyte 이하</h6>
            <input type="text" id="imgUrl" name="imgUrl" placeholder="이미지 URL" class="col-xs-10 col-sm-10" readonly>
        </div>
    </div>
</div>
cs




<javascript>

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
//서버 이미지 등록 /home/dev/imageRoot/mms.jpg
function uploadImage(){
    
    //확장자 체크
    var arr = $("#imgFile").val().split(".");
    var arrSize = arr.length;
    if (arr[arrSize-1].toUpperCase()!="JPG")
    {
        $("#imgUrl").val('');
        alert("지원하지 않는 파일 확장자입니다.");
        return false;
    }
    
    //파일크기 체크
    var fileSize = $("input[name='imgFile']")[0].files[0].size;
    console.log("### fileSize="+fileSize);
    if (fileSize > 20480) {//20480 = 20Kb
        $("#imgUrl").val('');
        $("#imgFile").val('');
        alert("JPG 이미지는 20kbyte 이하여야 합니다.");
        $("#imgFile").focus();
        return false;
    }
    //파일이 있어야만 함
 
    //서버 이미지 등록
    var formData = new FormData();
    formData.append("file",$("input[name='imgFile']")[0].files[0]);
        $.ajax({
            type: 'POST',
            url : '${rc.contextPath}/mmsImageUpload.do',
            processData: false,
            contentType: false,
            data: formData,
            success: function(result){
                $("#imgUrl").val( result );
            },
            error: function(e){
                alert("이미지등록 처리중 오류가 발생하였습니다.");
            }
        });
}
cs



<java>

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
/**
 * MMS 문자에 첨부할 이미지파일 업로드
 * 서버에 업로드 한다 (/home/dev/imageRoot/test.jpg)
 * mms.jpg 파일 하나에 덮어쓰기 한다
 * JPG 파일 용량은 20kbyte 이하여야 한다
 * @param request
 * @param response
 * @throws IOException
 */
@RequestMapping(value="/mmsImageUpload", method=RequestMethod.POST)
public void mmsImageUpload(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
    try {
        
        String filePath = null;
        
        Map<String, MultipartFile> fileMap = request.getFileMap();
        for (MultipartFile multipartFile : fileMap.values()) {
            
            //String originalFileName = multipartFile.getOriginalFilename();
            String originalFileName = "mms.jpg";
            
            filePath = "/home/dev/imageRoot/Sms/"+originalFileName;
            //filePath = "D:\\DEV\\ImageRoot\\Sms\\"+originalFileName;
            
            File file = new File(filePath);
            if(!file.exists()) {
                file.mkdirs();
            }
            multipartFile.transferTo(file);
        }
        
        response.setContentType("text;");
        response.getWriter().write(filePath);            
        
    } catch (Exception e) {
        e.printStackTrace();
    }
    
}
cs


인터넷 url 이미지를 불러와서 로컬 서버에 쓰기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
String url = (String) mmsForm.get("imgUrlOne");
String fileName = url.substring( url.lastIndexOf('/')+1, url.length() );
 
//url = https://www.test.co.kr/image01.jpg
//fileName = image01.jpg
 
//Read Image from URL
//url 이미지를 불러온다
BufferedImage img = ImageIO.read(new URL(url));
 
//Image Write
//로딩한 이미지를 서버에 
//File file = new File("/home/dev/imageRoot/"+fileName);
File file = new File("D:\\DEV\\ImageRoot\\"+fileName);
ImageIO.write(img, "jpg", file);
cs


'1.자바 > Java' 카테고리의 다른 글

transferTo()  (0) 2016.10.26
이미지 URL 바이트 쓰기  (0) 2016.10.26
Java 콤마를 구분하여 배열에 담기  (0) 2016.09.01
HttpClient, HttpPost, HttpResponse, HttpEntity 사용하기  (0) 2016.08.12
MultiValueMap, RestTemplate, HttpEntity 이용하기  (0) 2016.08.12

transferTo()

1
2
File f = new File("D:\\21.jpg");
mmsForm.getFile1().transferTo(f);
cs


multipartfile.transferTo()

'1.자바 > Java' 카테고리의 다른 글

인터넷 url 이미지를 불러와서 로컬 서버에 쓰기  (0) 2016.10.27
이미지 URL 바이트 쓰기  (0) 2016.10.26
Java 콤마를 구분하여 배열에 담기  (0) 2016.09.01
HttpClient, HttpPost, HttpResponse, HttpEntity 사용하기  (0) 2016.08.12
MultiValueMap, RestTemplate, HttpEntity 이용하기  (0) 2016.08.12

이미지 URL 바이트 쓰기

1
2
3
URL url = new URL("https://test.co.kr/75.jpg");
BufferedImage f = ImageIO.read(url);                    
logger.debug("### test="+((DataBufferByte) f.getRaster().getDataBuffer()).getData());
cs


'1.자바 > Java' 카테고리의 다른 글

인터넷 url 이미지를 불러와서 로컬 서버에 쓰기  (0) 2016.10.27
transferTo()  (0) 2016.10.26
Java 콤마를 구분하여 배열에 담기  (0) 2016.09.01
HttpClient, HttpPost, HttpResponse, HttpEntity 사용하기  (0) 2016.08.12
MultiValueMap, RestTemplate, HttpEntity 이용하기  (0) 2016.08.12

딥링크

갑자기 직방에서 '딥링크테스트'라는 푸시 알림이 와서...

딥링크에 대해 알아봐야겠다 ㅋ

+ Recent posts

티스토리툴바