728x90
반응형
728x90
반응형
728x90
반응형

* git URL : 클릭

 

1. 필요파일 : jquery.minicolors.css, jquery.minicolors.js, jquery.minicolors.min.js, jquery.minicolors.png

 

2. import

1
2
<link rel="stylesheet" href="/plugins/jquery-minicolors/jquery.minicolors.css">
<script src="/plugins/jquery-minicolors/jquery.minicolors.js"></script>
 cs

 

3. minicolors를 위한 태그 추가

1
<input type="text" name="color1" class="form-control minicolors" data-control="hue" value="#ff6161" />
 cs

(1) data-control 속성은 control 타입 사용시 어떤 스타일을 쓸 것인지 설정하는 것으로 hue, saturation, brightness, wheel 중 한가지 사용가능

(2) class에서 form-control은 bootstrap을 적용하고자 하는 경우 필요하므로 넣어주면 테마 적용에 용이

 

4. 세팅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.minicolors').each( function() {
    $(this).minicolors({
        control: $(this).attr('data-control') || 'hue',
        defaultValue: $(this).attr('data-defaultValue') || '',
        format: $(this).attr('data-format') || 'hex',
        keywords: $(this).attr('data-keywords') || '',
        inline: $(this).attr('data-inline') === 'true',
        letterCase: $(this).attr('data-letterCase') || 'lowercase',
        opacity: $(this).attr('data-opacity'),
        position: $(this).attr('data-position') || 'bottom',
        swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
                change: function(value, opacity) {
                    if( !value ) return;
                    if( opacity ) value += ', ' + opacity;
                    if( typeof console === 'object' ) {
                        console.log(value);
                    }
                },
        theme: 'bootstrap'
    });
});
 cs

(1) class의 minicolors에 해당되는 input 태그에 minicolors plugin을 적용

(2) 컬러 변경시 console log가 거슬리면 16번 라인 주석처리

(3) bootstrap을 사용하지 않는 경우 19번 라인에 theme : 'default' 로 변경

 

5. jquery 코드로 색상 변경

1
$(selecter).minicolors('value', hexValue);
 cs

(1) hexValue 는 #ffffff 와 같은 형태

 

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[Oracle Cloud] ubuntu server setting  (3) 2021.08.17
[javascript] object cleanner  (0) 2021.07.10
[spring, jpa] DuplicateMappingException, entities share the same JPA entity name  (0) 2021.06.29
[spring, schedulede] No thread-bound request found: Are you referring to request attributes outside of an actual web request, or processing a request outside of the originally receiving thread?  (0) 2021.06.23
[tomcat] war 배포하기, 가상 디렉토리  (0) 2021.06.14
728x90
반응형

먼저 zTree 사용에 대한 기존 포스트가 있다.

해당 내용에 추가되는 내용이므로 zTree 사용방법을 모른다면 기존 포스트를 확인하기 바란다.

* [jquery] zTree plugin (tree view) : https://deonggi.tistory.com/110

 

# tree에 checkbox 추가를 위한 설정

1
2
3
4
5
6
7
8
9
10
11
12
var setting = {
    check : {
        enable: true,               // 체크박스 사용시
        chkDisabledInherit: true    // 체크박스 disabled 사용시
    },
    callback : {
        onClick: function(srcEvent, treeId, node, clickFlag) {
            // 클릭시 check toggle 처리
            zTreeObj.checkNode(node, null, false, $("#callbackTrigger").attr("checked"));                    
        },
    }
};
 cs

 

개인적인 필요로 인해 2가지를 적용했다.

 

1. 코드로 check, uncheck 적용

내 경우 node 클릭 시 toggle로 checkbox 컨트롤이 필요해서 callback.onClick에 코드(위 소스의 9번 라인)가 추가 되었다.

 

* 참고 checkNode의 매개변수 설명

1
2
3
4
zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag)
// checked : check여부, toggle 시 null
// checkTypeFlag : 하위 댑스가 있을때 하위 댑스도 check여부
// callbackFlag : $("#callbackTrigger").attr("checked") 
 cs

 

2. disabled 적용

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
/**
* zTree node ~ 하위node의 chkDisabled을 수정하기 위한 재귀함수
 * @param node
 * @param key
 * @returns
 */
function updateChkDisabled(node, key){
    
    if (typeof key != 'undefined' && key == 'reset') {        
        if (node.useYn == 'N') node.chkDisabled = true;    
        else delete node.chkDisabled; 
    } else {
        node.chkDisabled = true;        
    }
    
    zTreeObj.updateNode(node);
    $.each(node.children, function(index, subNode){
        updateChkDisabled(subNode, key);
    });
}
 
// chkDisabled all reset
$.each(zTreeObj.getNodes(), function(i, node){
    updateChkDisabled(node, 'reset');
});
 
/**
 * 타입에 따라 트리 disabled 처리
 * @param tp
 * @returns
 */
function changeChkDisabled(tp){    
    
    if(typeof tp != 'undefined') {
        if (tp != 'SUPER') {
            $.each(zTreeObj.getNodes(), function(i, node){
                if(node.tp == 'SUPER') updateChkDisabled(node, tp);
            });
        }      
    } 
}
 cs

포인트는 node.chkDisabled = true로 처리하면 된다. 필요가 없다면 delete.

또한 해당 기능은 disabled 시 하위 node까지 동일 해야 한다.

1) 10번 라인은 내가 필요해 의해 넣은 내용으로 리셋시 useYn가 N이라면 disabled 처리

2) 23~25번 라인은 전체 리셋시 실행

3) 32~41번 라인은 tp가 'SUPER'가 아닌 경우, node.tp가 SUPER 이외의 것을 가진 node ~ 하위node 모두를 disabled 처리

4) 해당 소스는 23~25번을 먼저 호출하고, 상황에 따라(tp) 37번 라인 실행

 

다시 내 중심적으로 적은 내용이니, 다른 분들께서 사용하신다면 상황에 맞게 수정하여 사용하시면 되시겠다.

 

 

 

* 관련글

[jquery] zTree plugin (tree view): https://deonggi.tistory.com/110

[jQuery] zTree node children, updateNode() : https://deonggi.tistory.com/113

 

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[spring, jpa] Use @Param for query method parameters, or when on Java 8+ use the javac flag -parameters.  (0) 2021.05.30
[javascript, jquery] 동적 tag 추가시 이벤트  (0) 2021.05.30
[mysql] Error Code: 1215. Cannot add foreign key constraint  (0) 2021.05.20
[spring, jpa] Cannot add or update a child row: a foreign key constraint fails  (0) 2021.05.14
[spring] org.thymeleaf.exceptions.TemplateInputException  (0) 2021.05.13
728x90
반응형

1. zTree 최하위 여부 체크 방법

1
2
3
4
5
6
7
8
9
// zTree를 초기화
var zTreeObj = $.fn.zTree.init($("#treeView"), setting);
 
var checkNodes = zTreeObj.getCheckedNodes(true);
$.each(checkNodes, function(index, node){
    if (typeof node.children == 'undefined') {
        // 최하위 일때 프로세스
    }
});
 cs

 

 

2. zTree 하위까지 update 하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.each(zTreeObj.getNodes(), function(index, node){
    updateChkDisabled(node);
});
 
function updateChkDisabled(node){
    // node 정보 변경 및 update
    node.chkDisabled = true;
    zTreeObj.updateNode(node);
 
    // 재귀함수로 하위 node 정보 변경 및 update
    $.each(node.children, function(index, sNode){
        updateChkDisabled(sNode);
    });
}
 cs

 

 

 

* 관련글
[jquery] zTree plugin (tree view) : https://deonggi.tistory.com/110

[jquery, zTree] zTree의 checkbox 사용 : https://deonggi.tistory.com/118

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[spring, jpa] Cannot add or update a child row: a foreign key constraint fails  (0) 2021.05.14
[spring] org.thymeleaf.exceptions.TemplateInputException  (0) 2021.05.13
[java, spring] org.springframework.dao.InvalidDataAccessApiUsageException: No EntityManager with actual transaction available for current thread  (0) 2021.05.11
[java, spring] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory'  (0) 2021.05.11
[jquery] zTree plugin (tree view)  (0) 2021.04.29
728x90
반응형

뎁스가 있는 데이터를 관리할 화면이 필요했고, 인지하기 쉽게 윈도우 폴더 트리구조의 jquery 플러그인이 필요했다.

여러가지 적용해보고 쉽게 적용할 수 있는 플러그인을 찾아서 기록해 둔다.

 

# zTree 다운로드 링크, 데모와 document 링크

# 사용한 버전 :  v3.5.46

 

1. json 데이터로 간단한 트리 만들기

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
var zNodes =[
    { 
      id: 1, // unique ID
      pId: 0, // parent ID
      name: "Name", 
      t: "Description", 
      open: true // open this node on page load
    },
    { 
      id: 11, 
      pId: 1, 
      name: "Node 1-1", 
      t: "This is Node 1-1"
    },
    { 
        id: 12, 
        pId: 1, 
        name: "Node 1-2", 
        t: "This is Node 1-2"
    },
];
   
var setting = {
        data: {
          key: {
            title:"t"
          },
          simpleData: {
            enable: true
          }
        },
        // more settings here
    };
 
zTreeObj = $.fn.zTree.init($("#treeView"), setting, zNodes);
 cs

 

2. ajax으로 받은 데이터로 트리 만들기

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
$(document).ready(function() {
    var setting = {
            data: {
                key: {
                    title:"t"
                },
                simpleData: {                    
                    enable: true
                }
            },
            async: {
                enable: true,
                type: "GET",
                url: AJAX_CALL_URL,
//                autoParam:["id", "name=n", "level=lv"],
//                otherParam:{"otherParam":"zTreeAsyncTest"},
               dataFilter: filter,
            },
            callback : {
                beforeClick : function(treeId, treeNode){                    
                },
                beforeAsync: function(treeId, treeNode){
                },
                onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                },
                onAsyncSuccess: function(event, treeId, treeNode, msg){
                },
                onNodeCreated: function(event, treeId, treeNode){                    
                },
                onClick: function(srcEvent, treeId, node, clickFlag){
                },
            }
    };
    zTreeObj = $.fn.zTree.init($("#treeView"), setting);
 
});
 
function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    }
    return childNodes;
}
 cs

주의사항

1) 1의 zNodes와 같은 형태의 값을 리턴해 줄 것

2) AJAX_CALL_URL은 ajax url 값

3) dataFilter: filter 는 ajax 응답 후 필요한 데이터 처리가 있는 경우의 셈플

4) 전체 갱신이 필요한 경우 아래와 같이 사용

1
zTreeObj.reAsyncChildNodes(false, 'refresh', null, null);
 cs

5) 일부 갱신이 필요한 경우(트리최상위 node중 첫번째 node 아래로 전체 리플래시 됨) 

1
2
3
4
var nodes = zTreeObj.getNodes();
if (nodes.length>0) {
    zTreeObj.reAsyncChildNodes(nodes[0], "refresh", null, null);
}
 cs

6) 트리에서 선택한 항목의 데이터 얻기

1
var node = zTreeObj.getSelectedNodes();
 cs

 

 

주석 처리된 부분은 데모에 있는 내용이었지만 아직 사용해 보지 않았기에 주석처리 했다.

 

 

* 관련글

[jQuery] zTree node children, updateNode() : https://deonggi.tistory.com/113

[jquery, zTree] zTree의 checkbox 사용 : https://deonggi.tistory.com/118

 

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[java, spring] org.springframework.dao.InvalidDataAccessApiUsageException: No EntityManager with actual transaction available for current thread  (0) 2021.05.11
[java, spring] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory'  (0) 2021.05.11
[java, spring] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'objectMapper'  (0) 2021.04.29
[jQuery] simple pagination  (0) 2021.04.17
[spring, mybatis] mybatis unread  (0) 2021.04.10

+ Recent posts

티스토리툴바