Deque를 직접 구현해보기

IT 지식/자료구조|2018. 6. 2. 09:34

큐는 삽입과 삭제가 리스트의 한쪽 방향에서만 이루어지지만 deque는 리스트의 양쪽 끝 모두에서 이루어질 수 있다.


따라서 양쪽 방향 모두 삽입과 삭제가 이루어질 수 있으므로 기존의 큐나 스택으로 사용할 수 있어 유연하게 사용할 수 있다.


사진출처 : https://dh00023.github.io/algorithm/ds/2018/04/25/algorithm-10/





이런 Deque를 직접 구현해 보자.





우선 Deque의 기능을 정리한 인터페이스이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package practice3;
 
public interface Deque<T> {
    public void addFirst(T item);
 
    public void addLast(T item);
 
    public T removeFirst();
 
    public T removeLast();
 
    public T peekFirst();
 
    public T peekLast();
 
    public boolean isEmpty();
 
    public int size();
 
    public String toString();
 
}
 
cs





그리고 인터페이스를 가지고 구현된 Deque

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
package practice3;
 
import java.util.ArrayList;
import java.util.List;
 
public class LinkedDeque<T> implements Deque<T>{
    private static class Node<T> {
        private T item;
        private Node<T> next;
        private Node<T> prev;
 
        private Node() {
            next = null;
            prev = null;
        }
 
        private Node(T item) {
            this.item = item;
            next = null;
            prev = null;
        }
    }
 
    private Node<T> front;
    private Node<T> rear;
    private int size;
 
    public LinkedDeque() {
        front = null;
        rear = null;
        size = 0;
    }
 
    @Override
    public void addLast(T item) {
        Node<T> node = new Node<>(item);
        
        if (front == null && rear == null) {
            addFirstItem(node);
        } else {
            rear.next = node;
            node.prev = rear;
            rear = node;
            size++;
        }
    }
 
    @Override
    public void addFirst(T item) {
        Node<T> node = new Node<>(item);
        
        if (front == null && rear == null) {
            addFirstItem(node);
        } else {
            front.prev = node;
            node.next = front;
            front = node;
            size++;
        }
    }
    
    private void addFirstItem(Node<T> item) {
        front = item;
        rear = item;
        size = 1;
    }
 
    @Override
    public boolean isEmpty() {
        return size == 0;
    }
 
    @Override
    public T removeFirst() {
        T item = null;
        if (size == 0) {
            throw new java.util.NoSuchElementException("peek(): deque empty");
        } else if (size == 1) {
            item = front.item;
            front = null;
            rear = null;
            size = 0;
        } else {
            item = front.item;
            front = front.next;
            front.prev = null;
            size--;
        }
        
        return item;
    }
 
    @Override
    public T removeLast() {
        T item = null;
 
        if (size == 0) {
            throw new java.util.NoSuchElementException("peek(): deque empty");
        } else if (size == 1) {
            item = rear.item;
            front = null;
            rear = null;
            size = 0;
        } else {
            item = rear.item;
            rear = rear.prev;
            rear.next = null;
            size--;
        }
        
        return item;
    }
 
    @Override
    public T peekFirst() {
        if (size == 0)
            throw new java.util.NoSuchElementException("peek(): deque empty");
        return front.item;
    }
 
    @Override
    public T peekLast() {
        if (size == 0)
            throw new java.util.NoSuchElementException("peek(): deque empty");
        return rear.item;
    }
 
    @Override
    public int size() { return size; }
 
    @Override
    public String toString() {
        if (0 == size) {
            return "";
        } else {
            List<String> result = new ArrayList<>();
            Node<T> current;
            current = front;
            if (1 == size) {
                return current.item.toString();
            } else {
                while (current != null) {
                    result.add(current.item.toString());
                    current = current.next;
                }
                
                return String.join(",", result);
            }
            
        }
    }
 
    public String reverse() { // 역순으로 출력
        if (0 == size) {
            return "";
        } else {
            List<String> result = new ArrayList<>();
            Node<T> current;
            current = rear;
            if (1 == size) {
                return current.item.toString();
            } else {
                while (current != null) {
                    result.add(current.item.toString());
                    current = current.prev;
                }
                
                return String.join(",", result);
            }
            
        }
    }
 
}
 
cs




그리고 이 deque를 가지고 테스트를 진행할 Main클래스


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
package practice3;
 
import java.util.Scanner;
 
public class Main {
    public static void main(String[] args) {
        System.out.println("Enter a command: af(addFirst), al(addLast),\n"
                + "rf(removeFirst), rl(removeLast), pf(peekFirst), pl(peekLast),\n" + "p(rint), r(verse), or q(uit)");
        System.out.print("> ");
 
        Scanner input = new Scanner(System.in);
        String command = input.next();
        LinkedDeque<Integer> deque = new LinkedDeque<Integer>();
        int item;
 
        while (!command.equals("q")) {
            if (command.equals("af")) {
                item = input.nextInt();
                deque.addFirst(item);
            } else if (command.equals("al")) {
                item = input.nextInt();
                deque.addLast(item);
            } else if (command.equals("rf"))
                deque.removeFirst();
            else if (command.equals("rl"))
                deque.removeLast();
            else if (command.equals("s"))
                System.out.println("size: " + deque.size());
            else if (command.equals("pf"))
                System.out.println("Front of the deque: " + deque.peekFirst());
            else if (command.equals("pl"))
                System.out.println("Rear of the deque: " + deque.peekLast());
            else if (command.equals("r"))
                System.out.println(deque.reverse());
            else if (command.equals("p"))
                System.out.println(deque);
            System.out.print("> ");
            command = input.next();
        }
        System.out.println("Commands Terminated.");
        input.close();
    }
}
 
cs





출력결과


Enter a command: af(addFirst), al(addLast),

rf(removeFirst), rl(removeLast), pf(peekFirst), pl(peekLast),

p(rint), r(verse), or q(uit)

> af 20

> af 30

> af 10

> p

10,30,20

> rf

> p

30,20

> rl

> p

30

> al 33

> al 22

> p

30,33,22

> r

22,33,30

> p

30,33,22

> af 44

> al 88

> p

44,30,33,22,88

> rl

> rf

> p

30,33,22

> rf

> p

33,22

> rl

> p

33

> q

Commands Terminated.




다음 시간에는 이것을 이용해 버켓 정렬을 구현해보자.

댓글()

Stack을 이용한 문장 완성도 판별 프로그램

IT 지식/자료구조|2018. 5. 27. 21:05

개발을 진행하다보면 기본에 대해 잊어갈때가 있다.

잊지 않기위해 오늘 부터 매주 하나씩 자료구조를 이용한 문제를 풀어봐야겠다.

오늘은 Stack 첫번째 시간으로 문장의 완성도를 확인하는 프로그램을 작성하여 보자.

[제약사항]
- {[(에 대한 괄호들이 정상적으로 닫혀있어야 한다.
- 주석 //, /* 안에 포함된 내용은 무시한다.
- "" double quote에 들어있는 내용을 무시한다.

간단한 프로그램이라 설명은 생략한다.



- Text를 읽고 판별을 진행하는 Main 클래스



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
package practice1;
 
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.channels.FileChannel;
import java.nio.charset.Charset;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Stack;
 
public class Main {
    
    public static void main(String[] args) {
        List<String> fileList = Arrays.asList("practice1_file/paren1.txt""practice1_file/paren2.txt""practice1_file/paren3.txt");
        List<String> readText = new ArrayList<>();
        
        for (String file : fileList) {
            readText(file, readText);
            System.out.println(file + " : " + checkSentence(readText));
            readText.clear();
        }
        
    }
    
    /**
     * @param readText
     * @return
     */
    public static boolean checkSentence(List<String> readText) {
        Stack<BracketType> brackets = new Stack<>();
        boolean isMultiComment = false;
        boolean isDoubleQuote = false;
        
        for (String str : readText) {
            int oneLineCommentIndex = str.indexOf("//");
            
            // line 주석 체크
            if (oneLineCommentIndex > 0) {
                str = str.substring(0, oneLineCommentIndex);
            } else if (oneLineCommentIndex == 0) {
                continue;
            }
            
            for (int i = 0; i < str.length(); i++) {
                char c = str.charAt(i);
                
                // 멀티 라인 주석일 경우
                if (isMultiComment) {
                    if ( c == '*' && i + 1 < str.length() && str.charAt(i + 1== '/' ) {
                        isMultiComment = false;
                        i += 1;
                    } else {
                        continue;
                    }
                }
                
                // " 시작인 경우
                if (isDoubleQuote) {
                    if ( c == '"' ) {
                        isDoubleQuote = false;
                        continue;
                    } else {
                        continue;
                    }
                }
                
                // ", /*
                if (c == '"') {
                    isDoubleQuote = true;
                    continue;
                } else if ( c == '/' && i + 1 < str.length() && str.charAt(i + 1== '*' ) {
                    isMultiComment = true;
                    continue;
                }
                 
                // 괄호 체크
                BracketType type = BracketType.getType(c);
                
                if (type != null) {
                    if (!brackets.isEmpty() && brackets.peek().checkBracket(type)) {
                        brackets.pop();
                    } else {
                        brackets.push(type);
                    }
                }
            }
        }
        
        return brackets.isEmpty();
    }
    
    /**
     * 텍스트 읽기
     * 
     * @param fileName
     * @param list
     * @throws IOException
     */
    public static void readText(String fileName, List<String> list) {
        try (FileChannel fileChannel = FileChannel.open(Paths.get(fileName), StandardOpenOption.READ)) {
            ByteBuffer buffer = ByteBuffer.allocate(1024);
            
            Charset charset = Charset.defaultCharset();
            int byteCount;
            
            while (true) {
                byteCount = fileChannel.read(buffer);
                
                if (byteCount == -1)
                    break;
                
                buffer.flip();
                String line = charset.decode(buffer).toString().trim();
                
                if (null == line || line.length() == 0) {
                    continue;
                }
                
                list.add(line);
                buffer.clear();
            }
            fileChannel.close();
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
        }
    }
    
}
cs





- 괄호에 대한 종류를 담고 있는 Enum 클래스
- 각 괄호를 나타내는 Enum 객체마다 괄호가 정상적으로 닫히는지 여부를 체크하는 메소드가 재정의 되어있음



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
package practice1;
 
/**
 * 문장의 괄호 종류와 체크로직
 * 
 * @author wedul
 *
 */
public enum BracketType implements CheckBracketI {
    BIG_RIGHT_BRACKET('}') {
        @Override
        public boolean checkBracket(BracketType type) {
            return false;
        }
    },
    SMALL_RIGHT_BRACKET(')') {
        @Override
        public boolean checkBracket(BracketType type) {
            return false;
        }
    },
    SMALL_LEFT_BRACKET('(') {
        @Override
        public boolean checkBracket(BracketType type) {
            return type.equals(SMALL_RIGHT_BRACKET);
        }
    },
    BIG_LEFT_BRACKET('{') {
        @Override
        public boolean checkBracket(BracketType type) {
            return type.equals(BIG_RIGHT_BRACKET);
        }
    },
    MIDDLE_LEFT_BRACKET('[') {
        @Override
        public boolean checkBracket(BracketType type) {
            return type.equals(MIDDLE_RIGHT_BRACKET);
        }
    },
    MIDDLE_RIGHT_BRACKET(']') {
        @Override
        public boolean checkBracket(BracketType type) {
            return false;
        }
    };;
    ;
    
    private char data;
    
    private BracketType(char data) {
        this.data = data;
    }
    
    public char getData() {
        return this.data;
    }
    
    /**
     * getType
     * 
     * @param input
     * @return
     */
    public static BracketType getType(char input) {
        for (BracketType type : values()) {
            if (type.getData() == input) {
                return type;
            }
        }
        
        return null;
    }
}
cs




- enum에서 사용된 인터페이스


1
2
3
4
5
6
7
8
9
10
11
12
13
package practice1;
 
/**
 * 괄호의 종류별로 체크하는 메소드를 포함한 인터페이스
 * 
 * @author wedul
 *
 */
public interface CheckBracketI {
    
    boolean checkBracket(BracketType type);
 
}
cs



결과




테스트 파일


paren1.txt

paren2.txt

paren3.txt



댓글()

Stack - 후위 표기법으로 된 식 계산

IT 지식/자료구조|2018. 5. 27. 21:01

1 3 + 4 * 와 같이 후위 표기되어있는 식을 계산하는 프로그램을 stack을 이용해서 만들어라

주의사항
- 피연산자가 너무 많으면 오류를 발생시켜라.
- 피연산자가 적어도 오류를 발생시켜라
- 연산자가 사칙연산 이외의 것이 나오면 예외를 발생시켜라
- 결과는 소수점 둘째까지 반올림해서 표현하라.
- 예외는 이 프로그램을 위한 예외를 새로 만들어라

구성
- 파일을 읽는 메서드가 담긴 util 클래스
- 동작이 진행되는 Main 클래스
- 이 프로그램의 예외 OperatorException 클래스



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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
package practice2;
 
import java.nio.ByteBuffer;
import java.nio.channels.FileChannel;
import java.nio.charset.Charset;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.util.Arrays;
import java.util.List;
 
/**
 * 유틸 클래
 * 
 * @author jeongcheol
 *
 */
public class UtilClass {
    
    /**
     * 텍스트 파일을 읽어서 List에 삽입 
     * 
     * @param fileName
     * @param list
     */
    public static void readText(String fileName, List<String> list) {
        try (FileChannel fileChannel = FileChannel.open(Paths.get(fileName), StandardOpenOption.READ)) {
            ByteBuffer buffer = ByteBuffer.allocate(1024);
            
            Charset charset = Charset.defaultCharset();
            int byteCount;
            
            while (true) {
                byteCount = fileChannel.read(buffer);
                
                if (byteCount == -1)
                    break;
                
                buffer.flip();
                String line = charset.decode(buffer).toString().trim();
                
                if (null == line || line.length() == 0) {
                    continue;
                }
                
                list.addAll(Arrays.asList(line.split("\n")));
                buffer.clear();
            }
            fileChannel.close();
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
        }
    }
 
}
 
 
package practice2;
 
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Stack;
 
import org.apache.commons.lang3.StringUtils;
 
public class Main {
 
    private static final List<String> fileList = Arrays.asList("file/practice1/postfix.txt"  , "file/practice1/postfix1.txt");
    private static final List<String> operator = Arrays.asList("+""-""/""*");
    private static final List<String> readText = new ArrayList<>();
    private static final Stack<String> operand = new Stack<>();
 
    public static void main(String args[]) {
        for (String file : fileList) {
            UtilClass.readText(file, readText);
            readText.stream().forEach(x -> {
                try {
                    process(x);
                } catch (OperatorException e) {
                    System.out.println(e.getMessage());
                }
            });
            readText.clear();
        }
    }
 
    /**
     * 서식 처리 
     * 
     * @param str
     * @throws OperatorException
     */
    private static void process(String str) throws OperatorException {
        // 초기
        operand.clear();
 
        // 빈 문자열 체크
        if (StringUtils.isBlank(str)) {
            return;
        }
 
        for (String ch : str.replaceAll("\\r\\n|\\r|\\n|\\n\\r""").split(" ")) {
            if (StringUtils.isNumeric(ch)) {
                operand.push(ch);
            } else if (operator.contains(ch)) {
                checkOperand();
                
                double operand2 = Double.valueOf(operand.pop());
                double operand1 = Double.valueOf(operand.pop());
                
                switch (ch) {
                case "+":
                    operand.push(String.valueOf(operand1 + operand2));
                    break;
 
                case "-":
                    operand.push(String.valueOf(operand1 - operand2));
                    break;
 
                case "*":
                    operand.push(String.valueOf(operand1 * operand2));
                    break;
 
                case "/":
                    operand.push(String.valueOf(operand1 / operand2));
                    break;
                    
                default:
                    throw new OperatorException("An unsupported operator.\n");
                }
            } else {
                throw new OperatorException(ch + " operator is unsupported operator.\n");
            }
        } 
        
        // 결과 확인
        checkResult();
        
        System.out.printf(" = %.2f\n" ,Double.valueOf(operand.peek()));
        System.out.println();
    }
    
    /**
     * 계산 전 피연산자 개수 체크 
     * 
     * @throws OperatorException
     */
    private static void checkOperand() throws OperatorException {
        if (operand.isEmpty() || operand.size() < 2) {
            throw new OperatorException("Not enough operand.\n");
        }
    }
    
    /**
     * 계산 후 피연산자 개수 체크 
     * 
     * @throws OperatorException
     */
    private static void checkResult() throws OperatorException {
        if (operand.size() != 1) {
            throw new OperatorException("Too many operand.\n");
        }
    }
    
 
}
 
 
package practice2;
 
/**
 * 연산 입센션 추가 
 * 
 * @author jeongcheol
 *
 */
public class OperatorException extends Exception {
 
    private static final long serialVersionUID = 1L;
    
    public OperatorException(String errMsg) {
        super(errMsg);
    }
 
}
cs



결과




postfix.txt

postfix1.txt




댓글()

dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개

web/jquery|2018. 5. 27. 00:55

기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다.

하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다.
그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다.

[필요 라이브러리]
gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다.






[예제 코드]
1. package.json
-> 필요라이브러리가 추가된 package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "gridstack_test",
  "version": "1.0.0",
  "description": "gridstack_test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wedul",
  "license": "ISC",
  "dependencies": {
    "gridstack": "^0.4.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash.js": "^1.0.1",
    "underscore": "^1.9.0"
  }
}
cs




2. html
-> libarary 로드 후 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
48
49
50
<link rel="stylesheet" href="lib/jquery-ui.css"></link>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.css"></link>
<style>
.grid-stack-item {
  border: 1px solid;
  background-color: #eee;
}
</style>
 
<button id="addBtn">항목 추가</button>
 
<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">기존항목1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">기존항목2</div>
    </div>
</div>
 
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore.js"/></script>
<script type="text/javascript" src="lib/jquery-ui.js"/></script>
<script type="text/javascript" src="node_modules/gridstack/dist/gridstack.all.js"/></script>
<script type="text/javascript">
$(document).ready(function () {
  var options = {
      cellHeight: 80,
      verticalMargin: 10
  };
  $('.grid-stack').gridstack(options);
 
  let a = 0;
  $('#addBtn').click(() => {
    let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
    a++;
  });
});
</script>
cs



[결과화면]
-> 자유롭게 위치 이동이 가능하고 사이즈 조절이 가능해진다.



[추가정보]
만약 기존에 element이외에 새로운 element에도 gridstack.js를 적용하고 싶은경우에는 다음과 같이 진행해야 한다.

위에 예제 소스에 있지만 필요한 소스는 다음과 같다.


1
2
3
4
5
6
7
8
let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
cs



gridstack 요소를 가져온 후  addWidget(el)메소드를 사용하여 추가한다.

[속성소개]
- 각 elemenet들이 가지고 있는 몇 가지 속성들이 있다. 모두 소개할 수는 없고 가로, 세로, 위치 좌표에 대한 정보만 소개하겠다. (나머지는 API문서 참고)





위에 소스에서 보면 다음과 같이 속성들을 가지고 있다.

data-gs-x="5"            위치 x좌표 
data-gs-y="0"            위치 y좌표
data-gs-width="4"    가로크기
data-gs-height="4"   세로크기

해당 데이터를 접근하기 위해서는 $('#id').data('gs-x')와 같은 방식으로 접근하면 된다.


[참고자료]
gridstack.js 사이트
http://gridstackjs.com/


github 사이트
https://github.com/gridstack/gridstack.js#api-documentation



댓글()