gnui 1.1.8 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/@types/gnui.d.ts +195 -154
  2. package/README.md +9 -3
  3. package/assets/NotoSansKR-Black.otf +0 -0
  4. package/assets/NotoSansKR-Black.woff +0 -0
  5. package/assets/NotoSansKR-Black.woff2 +0 -0
  6. package/assets/NotoSansKR-Bold.otf +0 -0
  7. package/assets/NotoSansKR-Bold.woff +0 -0
  8. package/assets/NotoSansKR-Bold.woff2 +0 -0
  9. package/assets/NotoSansKR-DemiLight.otf +0 -0
  10. package/assets/NotoSansKR-DemiLight.woff +0 -0
  11. package/assets/NotoSansKR-DemiLight.woff2 +0 -0
  12. package/assets/NotoSansKR-Light.otf +0 -0
  13. package/assets/NotoSansKR-Light.woff +0 -0
  14. package/assets/NotoSansKR-Light.woff2 +0 -0
  15. package/assets/NotoSansKR-Medium.otf +0 -0
  16. package/assets/NotoSansKR-Medium.woff +0 -0
  17. package/assets/NotoSansKR-Medium.woff2 +0 -0
  18. package/assets/NotoSansKR-Regular.otf +0 -0
  19. package/assets/NotoSansKR-Regular.woff +0 -0
  20. package/assets/NotoSansKR-Regular.woff2 +0 -0
  21. package/assets/NotoSansKR-Thin.otf +0 -0
  22. package/assets/NotoSansKR-Thin.woff +0 -0
  23. package/assets/NotoSansKR-Thin.woff2 +0 -0
  24. package/assets/{LICENSE_OFL.txt → OFL.txt} +93 -92
  25. package/assets/images/flags.png +0 -0
  26. package/dist/js/gnui.esm.js +19752 -17631
  27. package/dist/js/gnui.js +19757 -17927
  28. package/dist/js/gnui.min.js +23 -1
  29. package/dist/styles/default.css +1 -3
  30. package/dist/styles/gpi.css +1 -3
  31. package/dist/styles/green24.css +1 -0
  32. package/dist/styles/insights.css +1 -3
  33. package/dist/styles/nac.css +1 -3
  34. package/dist/styles/ztnac.css +1 -0
  35. package/package.json +39 -30
  36. package/styleguide/assets/components.js +1031 -579
  37. package/styleguide/assets/guide.js +28 -26
  38. package/styleguide/assets/okadia.css +115 -117
  39. package/styleguide/assets/theme.css +140 -82
  40. package/styleguide/category/COLOR/index.html +75 -77
  41. package/styleguide/category/COMPONENT/Alert(js)/index.html +89 -92
  42. package/styleguide/category/COMPONENT/Bignumber/index.html +78 -82
  43. package/styleguide/category/COMPONENT/Breadcrumb/index.html +78 -82
  44. package/styleguide/category/COMPONENT/Calendar(js)/index.html +89 -92
  45. package/styleguide/category/COMPONENT/Card/index.html +78 -82
  46. package/styleguide/category/COMPONENT/Chart(js)/index.html +89 -92
  47. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +354 -206
  48. package/styleguide/category/COMPONENT/Datalist(js)/index.html +471 -0
  49. package/styleguide/category/COMPONENT/Growl(js)/index.html +89 -92
  50. package/styleguide/category/COMPONENT/JsonView(js)/index.html +544 -246
  51. package/styleguide/category/{CONTROLS → COMPONENT}/MenuButton(js)/index.html +116 -92
  52. package/styleguide/category/COMPONENT/Message(js)/index.html +219 -95
  53. package/styleguide/category/COMPONENT/Modal(js)/index.html +128 -94
  54. package/styleguide/category/COMPONENT/Pagination/index.html +78 -82
  55. package/styleguide/category/COMPONENT/Panel/index.html +78 -82
  56. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +89 -92
  57. package/styleguide/category/COMPONENT/Tab(js)/index.html +122 -93
  58. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +88 -89
  59. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +175 -92
  60. package/styleguide/category/COMPONENT/Tree(js)/index.html +95 -92
  61. package/styleguide/category/CONTROLS/Button(js)/index.html +110 -95
  62. package/styleguide/category/CONTROLS/Checkbox/index.html +82 -86
  63. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +147 -93
  64. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +124 -92
  65. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +161 -132
  66. package/styleguide/category/CONTROLS/File/index.html +78 -82
  67. package/styleguide/category/CONTROLS/Form/Control/index.html +78 -82
  68. package/styleguide/category/CONTROLS/Form/Field/index.html +78 -82
  69. package/styleguide/category/CONTROLS/Form/Plain/index.html +78 -82
  70. package/styleguide/category/CONTROLS/Input/index.html +80 -84
  71. package/styleguide/category/CONTROLS/MultiText(js)/index.html +105 -92
  72. package/styleguide/category/CONTROLS/Picklist(js)/index.html +165 -141
  73. package/styleguide/category/CONTROLS/Radio/index.html +78 -82
  74. package/styleguide/category/CONTROLS/Select/index.html +80 -84
  75. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +147 -92
  76. package/styleguide/category/CONTROLS/Slider/index.html +78 -82
  77. package/styleguide/category/CONTROLS/Switch(js)/index.html +105 -93
  78. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +89 -92
  79. package/styleguide/category/CONTROLS/Textarea/index.html +78 -82
  80. package/styleguide/category/{COMPONENT → CONTROLS}/Time(js)/index.html +111 -92
  81. package/styleguide/category/ELEMENTS/Box/index.html +78 -82
  82. package/styleguide/category/ELEMENTS/Icon/index.html +122 -82
  83. package/styleguide/category/ELEMENTS/Image/index.html +78 -82
  84. package/styleguide/category/ELEMENTS/List/index.html +78 -82
  85. package/styleguide/category/ELEMENTS/Table/index.html +78 -82
  86. package/styleguide/category/ELEMENTS/Tag/index.html +78 -82
  87. package/styleguide/category/ELEMENTS/Title/index.html +78 -82
  88. package/styleguide/category/LAYOUT/Container/index.html +78 -82
  89. package/styleguide/category/LAYOUT/Grid/index.html +78 -82
  90. package/styleguide/category/LAYOUT/Splitter(js)/index.html +89 -92
  91. package/styleguide/category/UTILITY/index.html +80 -82
  92. package/styleguide/category/Utils/index.html +97 -71
  93. package/styleguide/color.html +66 -65
  94. package/styleguide/index.html +66 -65
  95. package/styleguide/tag/javascript/index.html +1984 -1011
  96. package/styleguide/tag/v.0.1.0/index.html +2730 -1568
  97. package/assets/NotoSansCJKkr-Black.otf +0 -0
  98. package/assets/NotoSansCJKkr-Bold.otf +0 -0
  99. package/assets/NotoSansCJKkr-DemiLight.otf +0 -0
  100. package/assets/NotoSansCJKkr-Light.otf +0 -0
  101. package/assets/NotoSansCJKkr-Medium.otf +0 -0
  102. package/assets/NotoSansCJKkr-Regular.otf +0 -0
  103. package/assets/NotoSansCJKkr-Thin.otf +0 -0
  104. package/assets/NotoSansMonoCJKkr-Bold.otf +0 -0
  105. package/assets/NotoSansMonoCJKkr-Regular.otf +0 -0
  106. package/assets/README +0 -11
  107. package/dist/styles/zt-nac.css +0 -3
package/styleguide/category/COMPONENT/Datagrid(js)/index.html CHANGED
@@ -1,65 +1,71 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile">
7
- <link href="../../../assets/okadia.css" rel="stylesheet">
8
- <link href="../../../assets/theme.css" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
10
- <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
7
+ <link href="../../../assets/okadia.css" rel="stylesheet" />
8
+ <link href="../../../assets/theme.css" rel="stylesheet" />
9
+ <link
10
+ rel="stylesheet"
11
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12
+ integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13
+ crossorigin="anonymous"
14
+ />
15
+ <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
11
16
  <script src="../../../assets/components.js"></script>
12
17
  <script src="../../../../dist/js/gnui.js"></script>
13
18
  </head>
14
- <body>
15
- <div class="aigis-container">
16
- <header class="aigis-header gn-gcolor is-primary">
17
- <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
18
- <span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
19
- <div class="gn-select is-medium">
20
- <select id="ThemeSelector">
21
-
19
+ <body>
20
+ <div class="aigis-container">
21
+ <header class="aigis-header gn-gcolor is-primary">
22
+ <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
23
+ <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
24
+ <div class="gn-select is-medium">
25
+ <select id="ThemeSelector">
26
+
22
27
  <option value="default">default</option>
23
-
28
+
24
29
  <option value="nac">nac</option>
25
-
30
+
26
31
  <option value="insights">insights</option>
27
-
32
+
28
33
  <option value="gpi">gpi</option>
29
-
30
- <option value="zt-nac">zt-nac</option>
31
-
32
- </select>
33
- </div>
34
- <div>
35
- <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
36
- <span class="gn-icon is-small">
37
- <i class="fas fa-tools"></i>
38
- </span>
39
- Gn.util
40
- </a>
41
- </div>
42
- </header>
43
- <div class="aigis-sidemenu">
44
- <nav class="gn-tree is-borderless is-large left-menu">
45
- </nav>
34
+
35
+ <option value="ztnac">ztnac</option>
36
+
37
+ <option value="green24">green24</option>
38
+
39
+ </select>
40
+ </div>
41
+ <div>
42
+ <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
43
+ <span class="gn-icon is-small">
44
+ <i class="fas fa-tools"></i>
45
+ </span>
46
+ Gn.util
47
+ </a>
48
+ </div>
49
+ </header>
50
+ <div class="aigis-sidemenu">
51
+ <nav class="gn-tree is-borderless is-large left-menu"></nav>
46
52
  </div>
47
53
 
48
54
  <script>
49
55
  window.Gn = window.gnui;
50
56
 
51
- Gn.ready(function(){
52
- var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
57
+ Gn.ready(function () {
58
+ var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
53
59
  var jsComps = ''.split(',');
54
60
  delete leftMenu.Utils;
55
61
  Gn.util.append('.left-menu', renderTree(leftMenu));
56
62
  Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
57
63
 
58
- function renderTree(menus){
64
+ function renderTree(menus) {
59
65
  var $depths = Gn.util.$('<ul></ul>');
60
- Gn.util.each(menus, function (child, menu){
61
- if(Gn.util.isString(child)){
62
- Gn.util.append($depths, renderMenu(menu, '../../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
66
+ Gn.util.each(menus, function (child, menu) {
67
+ if (Gn.util.isString(child)) {
68
+ Gn.util.append($depths, renderMenu(menu, '../../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
63
69
  } else {
64
70
  var $_depth = renderMenu(menu, '');
65
71
  Gn.util.append($_depth, renderTree(child));
@@ -69,35 +75,35 @@
69
75
  return $depths;
70
76
  }
71
77
 
72
- function renderMenu(name, link, isActive){
78
+ function renderMenu(name, link, isActive) {
73
79
  var $_menu;
74
- if (link === ''){
80
+ if (link === '') {
75
81
  $_menu = Gn.util.$('<li>' + name + '</li>');
76
82
  } else {
77
- var menuClass = isActive ? ' is-active' :''
78
- $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
83
+ var menuClass = isActive ? ' is-active' : '';
84
+ $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
79
85
  }
80
- if(name.indexOf('(js)') > 0){
86
+ if (name.indexOf('(js)') > 0) {
81
87
  Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
82
88
  }
83
89
  return $_menu;
84
90
  }
85
91
 
86
- function setTree(categorys){
92
+ function setTree(categorys) {
87
93
  var menus = {};
88
94
 
89
- categorys.forEach(function(category){
95
+ categorys.forEach(function (category) {
90
96
  parseTree(menus, category.split('/'), category);
91
97
  });
92
98
  return menus;
93
99
  }
94
100
 
95
- function parseTree(parents, child, catgry){
101
+ function parseTree(parents, child, catgry) {
96
102
  var _depth = child.shift();
97
103
  if (parents[_depth] === undefined) {
98
- parents[_depth] = {}
104
+ parents[_depth] = {};
99
105
  }
100
- if(child.length === 1){
106
+ if (child.length === 1) {
101
107
  parents[_depth][child] = catgry;
102
108
  } else if (child.length > 1) {
103
109
  parseTree(parents[_depth], child, catgry);
@@ -108,174 +114,277 @@
108
114
  });
109
115
  </script>
110
116
 
111
- <div class="aigis-contents">
112
- <div class="aigis-contents__body">
113
-
114
-
115
- <div>
116
- <div class="aigis-module Datagrid">
117
- <h2 class="aigis-module__heading" id="Datagrid">
118
- Datagrid
119
- </h2>
120
- <div class="aigis-module__filepath">
121
- /scss/components/datagrid.scss
122
- </div>
123
- <div class="aigis-tags">
124
-
125
-
126
- <span class="gn-tag">v.0.1.0</span>
127
-
128
-
129
-
130
- <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
131
-
117
+ <div class="aigis-contents">
118
+ <div class="aigis-contents__body">
119
+
120
+ <div>
121
+
122
+ <div class="aigis-module Datagrid">
123
+ <h2 class="aigis-module__heading" id="Datagrid">Datagrid</h2>
124
+ <div class="aigis-module__filepath">/scss/components/datagrid.scss</div>
125
+ <div class="aigis-tags">
126
+
127
+ <span class="gn-tag">v.0.1.0</span>
132
128
 
133
- </div>
134
-
135
- <!-- <div id="ComponentTab">
136
- <ul>
137
- <li><a href="#styleguide">Style</a></li>
138
- <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
139
- </ul>
140
- </div> -->
141
-
142
- <h3 id="-">기본 사용</h3>
129
+ <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
130
+
131
+ </div>
132
+ <!-- <div id="ComponentTab">
133
+ <ul>
134
+ <li><a href="#styleguide">Style</a></li>
135
+ <li>
136
+ <a href="#scriptguide"
137
+ >Script <span class="gn-icon"><i class="fas fa-code"></i></span
138
+ ></a>
139
+ </li>
140
+ </ul>
141
+ </div> -->
142
+ <h3 id="-">기본 사용</h3>
143
143
  <ul>
144
144
  <li>데이터 테이블</li>
145
145
  </ul>
146
146
  <div class="aigis-preview">
147
147
 
148
- <div class="new-grid is-border"></div>
148
+ <div class="new-grid"></div>
149
149
 
150
150
  <div style="width: 100%; height: 150px; overflow-x: auto">
151
- <div class="new-grid2 is-border"></div>
151
+ <div class="new-grid2"></div>
152
152
  </div>
153
153
  </div>
154
154
 
155
- <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
155
+ <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
156
156
 
157
157
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >150</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto</span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
158
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2 is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
158
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
159
159
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
160
160
  </code></pre>
161
161
  <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
162
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
163
- headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
164
- label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
165
- key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
166
- onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span>{
167
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span>
168
- }<span class="token punctuation" >,</span>
169
- template<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
170
- return <span class="token string" >'&lt;span>'</span><span class="token operator" >+</span>d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span><span class="token operator" >+</span><span class="token string" >'&lt;/span>'</span>
171
- }<span class="token punctuation" >,</span>
172
- sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
173
- sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
174
- }<span class="token punctuation" >,</span> {
175
- label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
176
- key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
177
- style<span class="token punctuation" >:</span> {
178
- width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
179
- }<span class="token punctuation" >,</span>
180
- className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
181
- bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
182
- sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
183
- }<span class="token punctuation" >,</span> {
184
- label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
185
- key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
186
- style<span class="token punctuation" >:</span> {
187
- width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
188
- }<span class="token punctuation" >,</span>
189
- className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
190
- bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
191
- }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
192
- data<span class="token punctuation" >:</span><span class="token punctuation" >[</span>{
193
- number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
194
- title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
195
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
196
- desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
197
- child <span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
162
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
163
+ headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
164
+ {
165
+ label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
166
+ key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
167
+ onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
168
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span>
169
+ }<span class="token punctuation" >,</span>
170
+ template<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
171
+ return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span>
172
+ }<span class="token punctuation" >,</span>
173
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
174
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
175
+ sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
176
+ }<span class="token punctuation" >,</span>
177
+ {
178
+ label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
179
+ key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
180
+ style<span class="token punctuation" >:</span> {
181
+ width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
182
+ }<span class="token punctuation" >,</span>
183
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-right'</span><span class="token punctuation" >,</span>
184
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
185
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
186
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
187
+ }<span class="token punctuation" >,</span>
188
+ {
189
+ label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
190
+ key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
191
+ style<span class="token punctuation" >:</span> {
192
+ width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
193
+ }<span class="token punctuation" >,</span>
194
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
195
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span>
196
+ }
197
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
198
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
199
+ {
200
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
201
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
202
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
203
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
204
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
205
+ {
198
206
  number<span class="token punctuation" >:</span> <span class="token string" >'1-1'</span><span class="token punctuation" >,</span>
199
207
  title<span class="token punctuation" >:</span> <span class="token string" >'1-하나'</span><span class="token punctuation" >,</span>
200
208
  date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
201
- }<span class="token punctuation" >,</span> {
209
+ }<span class="token punctuation" >,</span>
210
+ {
202
211
  number<span class="token punctuation" >:</span> <span class="token string" >'1-2'</span><span class="token punctuation" >,</span>
203
212
  title<span class="token punctuation" >:</span> <span class="token string" >'1-둘'</span><span class="token punctuation" >,</span>
204
213
  date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
205
214
  desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
206
- child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
207
- number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
208
- title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
209
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
210
- desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
211
- child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
212
- number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
213
- title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
215
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
216
+ {
217
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
218
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
219
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
214
220
  desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
215
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
216
- }<span class="token punctuation" >]</span>
217
- }<span class="token punctuation" >]</span>
218
- }<span class="token punctuation" >]</span>
219
- }<span class="token punctuation" >,</span> {
220
- number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
221
- title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
222
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
223
- desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
224
- }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
225
- onSort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span>{
226
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span>column<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
227
- }<span class="token punctuation" >,</span>
228
- onCheckAll<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>ggg<span class="token punctuation" >)</span>{
229
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'ggg'</span><span class="token punctuation" >,</span>ggg<span class="token punctuation" >)</span>
230
- }<span class="token punctuation" >,</span>
231
- hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
232
- }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
233
- Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
234
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
235
- headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
236
- label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
237
- key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
238
- style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span>}<span class="token punctuation" >,</span>
239
- sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
240
- }<span class="token punctuation" >,</span> {
241
- label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
242
- key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
243
- sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
244
- }<span class="token punctuation" >,</span> {
245
- label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
246
- key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
247
- style<span class="token punctuation" >:</span> {
248
- width<span class="token punctuation" >:</span> <span class="token string" >'100px'</span>
249
- }<span class="token punctuation" >,</span>
250
- tipField<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
251
- }<span class="token punctuation" >,</span> {
252
- label<span class="token punctuation" >:</span> <span class="token string" >'헤더명도길어집니다'</span><span class="token punctuation" >,</span>
253
- key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span><span class="token punctuation" >,</span>
254
- style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }
255
- }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
256
- data<span class="token punctuation" >:</span><span class="token punctuation" >[</span>
257
- {
258
- number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
259
- title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
260
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
261
- }<span class="token punctuation" >,</span> {
262
- number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
263
- title<span class="token punctuation" >:</span> <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
264
- date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
265
- desc<span class="token punctuation" >:</span> <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
221
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
222
+ {
223
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
224
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
225
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
226
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
227
+ }
228
+ <span class="token punctuation" >]</span>
229
+ }
230
+ <span class="token punctuation" >]</span>
266
231
  }
267
- <span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>
268
- <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
269
- sort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span>{
270
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span>column<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
271
- }<span class="token punctuation" >,</span>
272
- onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>{
273
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'row'</span><span class="token punctuation" >,</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>
232
+ <span class="token punctuation" >]</span>
233
+ }<span class="token punctuation" >,</span>
234
+ {
235
+ number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
236
+ title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
237
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
238
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
239
+ }
240
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
241
+ onSort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span> {
242
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span> column<span class="token punctuation" >)</span>
243
+ }<span class="token punctuation" >,</span>
244
+ onDragEnd<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>col<span class="token punctuation" >,</span> position<span class="token punctuation" >)</span> {
245
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>col<span class="token punctuation" >,</span> position<span class="token punctuation" >)</span>
246
+ }<span class="token punctuation" >,</span>
247
+ onToggle<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>type<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> n<span class="token punctuation" >)</span> {
248
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>type<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> n<span class="token punctuation" >)</span>
249
+ <span class="token operator" >/</span><span class="token operator" >/</span> 이렇게 하면 펼쳐질때마다 해당 로우에 <span class="token number" >2</span>개의 자식을 바인딩한다<span class="token punctuation" >.</span>
250
+ <span class="token operator" >/</span><span class="token operator" >/</span> type <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token string" >'expanded'</span> <span class="token operator" >&amp;</span><span class="token operator" >&amp;</span> this<span class="token punctuation" >.</span><span class="token function" >addChild</span><span class="token punctuation" >(</span>n<span class="token punctuation" >,</span> <span class="token punctuation" >[</span>{
251
+ <span class="token operator" >/</span><span class="token operator" >/</span> number<span class="token punctuation" >:</span> <span class="token string" >'000'</span><span class="token punctuation" >,</span>
252
+ <span class="token operator" >/</span><span class="token operator" >/</span> title<span class="token punctuation" >:</span> <span class="token string" >'추가된 자식1'</span><span class="token punctuation" >,</span>
253
+ <span class="token operator" >/</span><span class="token operator" >/</span> date<span class="token punctuation" >:</span> <span class="token string" >'2020-02-02'</span>
254
+ <span class="token operator" >/</span><span class="token operator" >/</span> }<span class="token punctuation" >,</span>{
255
+ <span class="token operator" >/</span><span class="token operator" >/</span> number<span class="token punctuation" >:</span> <span class="token string" >'001'</span><span class="token punctuation" >,</span>
256
+ <span class="token operator" >/</span><span class="token operator" >/</span> title<span class="token punctuation" >:</span> <span class="token string" >'추가된 자식2'</span><span class="token punctuation" >,</span>
257
+ <span class="token operator" >/</span><span class="token operator" >/</span> date<span class="token punctuation" >:</span> <span class="token string" >'2020-02-02'</span>
258
+ <span class="token operator" >/</span><span class="token operator" >/</span> }<span class="token punctuation" >]</span><span class="token punctuation" >)</span>
259
+ }<span class="token punctuation" >,</span>
260
+ onCheckAll<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>ggg<span class="token punctuation" >)</span> {
261
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'ggg'</span><span class="token punctuation" >,</span> ggg<span class="token punctuation" >)</span>
262
+ }<span class="token punctuation" >,</span>
263
+ onDoubleClick<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> {
264
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'dbclick'</span><span class="token punctuation" >,</span> e<span class="token punctuation" >)</span>
265
+ }<span class="token punctuation" >,</span>
266
+ hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
267
+ hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
268
+ }<span class="token punctuation" >)</span>
269
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
270
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
271
+ headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
272
+ {
273
+ label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
274
+ key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
275
+ style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }<span class="token punctuation" >,</span>
276
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
277
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
278
+ }<span class="token punctuation" >,</span>
279
+ {
280
+ label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
281
+ key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
282
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
283
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
284
+ }<span class="token punctuation" >,</span>
285
+ {
286
+ label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
287
+ key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
288
+ style<span class="token punctuation" >:</span> {
289
+ width<span class="token punctuation" >:</span> <span class="token string" >'100px'</span>
274
290
  }<span class="token punctuation" >,</span>
275
- isEllipsis<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
276
- hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
277
- fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
278
- }<span class="token punctuation" >)</span>
291
+ tipField<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
292
+ }<span class="token punctuation" >,</span>
293
+ {
294
+ label<span class="token punctuation" >:</span> <span class="token string" >'헤더명도길어집니다'</span><span class="token punctuation" >,</span>
295
+ key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span><span class="token punctuation" >,</span>
296
+ style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }
297
+ }
298
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
299
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
300
+ {
301
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
302
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
303
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
304
+ }<span class="token punctuation" >,</span>
305
+ {
306
+ number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
307
+ title<span class="token punctuation" >:</span>
308
+ <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
309
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
310
+ desc<span class="token punctuation" >:</span>
311
+ <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
312
+ }<span class="token punctuation" >,</span>
313
+ {
314
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
315
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
316
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
317
+ }<span class="token punctuation" >,</span>
318
+ {
319
+ number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
320
+ title<span class="token punctuation" >:</span>
321
+ <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
322
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
323
+ desc<span class="token punctuation" >:</span>
324
+ <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
325
+ }<span class="token punctuation" >,</span>
326
+ {
327
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
328
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
329
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
330
+ }<span class="token punctuation" >,</span>
331
+ {
332
+ number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
333
+ title<span class="token punctuation" >:</span>
334
+ <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
335
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
336
+ desc<span class="token punctuation" >:</span>
337
+ <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
338
+ }<span class="token punctuation" >,</span>
339
+ {
340
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
341
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
342
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
343
+ }<span class="token punctuation" >,</span>
344
+ {
345
+ number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
346
+ title<span class="token punctuation" >:</span>
347
+ <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
348
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
349
+ desc<span class="token punctuation" >:</span>
350
+ <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
351
+ }<span class="token punctuation" >,</span>
352
+ {
353
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
354
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
355
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
356
+ }<span class="token punctuation" >,</span>
357
+ {
358
+ number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
359
+ title<span class="token punctuation" >:</span>
360
+ <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
361
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
362
+ desc<span class="token punctuation" >:</span>
363
+ <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
364
+ }
365
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
366
+ sort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span> {
367
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span> column<span class="token punctuation" >)</span>
368
+ }<span class="token punctuation" >,</span>
369
+ onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> {
370
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'row'</span><span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>
371
+ }<span class="token punctuation" >,</span>
372
+ onDoubleClick<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> {
373
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'dbclick'</span><span class="token punctuation" >,</span> e<span class="token punctuation" >)</span>
374
+ }<span class="token punctuation" >,</span>
375
+ isEllipsis<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
376
+ hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
377
+ hasOrder<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
378
+ textSets<span class="token punctuation" >:</span> {
379
+ orderLabel<span class="token punctuation" >:</span> <span class="token string" >'이동'</span>
380
+ }<span class="token punctuation" >,</span>
381
+ hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
382
+ fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
383
+ onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
384
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
385
+ }
386
+ }<span class="token punctuation" >)</span>
387
+
279
388
  </code></pre><table class="gn-table is-full is-border">
280
389
  <thead>
281
390
  <th colspan="2">name</th>
@@ -372,20 +481,33 @@
372
481
  <tr>
373
482
  <td colspan="2">data</td>
374
483
  <td>array</td>
375
- <td></td>
484
+ <td>[]</td>
376
485
  <td>key: value로 이루어진 그리드 데이터 <br>
377
486
  <b>isOpened:true</b> =&gt; 열린상태로 표시<br>
378
487
  <b>isSelectedRow: true</b> =&gt; 활성화 된 상태로 표시<br>
379
488
  <b>noCheck: true</b> =&gt; 체크박스 표시안함<br>
380
- <b>isChecked: true</b> =&gt; 체크박스 체크된 상태로 표시</td>
489
+ <b>isChecked: true</b> =&gt; 체크박스 체크된 상태로 표시<br>
490
+ <b>color:is-warning-light</b> =&gt; 행의 색 변경</td>
381
491
  </tr>
382
492
  <tr>
383
- <td>textSets</td>
493
+ <td rowspan="3">textSets</td>
384
494
  <td>noData</td>
385
495
  <td>string</td>
386
496
  <td>No records available.</td>
387
497
  <td>데이터가 없을 경우 출력 메시지</td>
388
498
  </tr>
499
+ <tr>
500
+ <td>orderLabel</td>
501
+ <td>string</td>
502
+ <td></td>
503
+ <td>이동버튼 헤더표시문구</td>
504
+ </tr>
505
+ <tr>
506
+ <td>deleteLabel</td>
507
+ <td>string</td>
508
+ <td></td>
509
+ <td>삭제버튼 헤더표시문구</td>
510
+ </tr>
389
511
  <tr>
390
512
  <td colspan="2">childField</td>
391
513
  <td>string</td>
@@ -398,6 +520,24 @@
398
520
  <td>false</td>
399
521
  <td>1열 체크박스 출력 여부</td>
400
522
  </tr>
523
+ <tr>
524
+ <td colspan="2">hasOrder</td>
525
+ <td>boolean</td>
526
+ <td>false</td>
527
+ <td>이동버튼 생성 여부</td>
528
+ </tr>
529
+ <tr>
530
+ <td colspan="2">hasDelete</td>
531
+ <td>boolean</td>
532
+ <td>false</td>
533
+ <td>삭제버튼 생성 여부</td>
534
+ </tr>
535
+ <tr>
536
+ <td colspan="2">readonly</td>
537
+ <td>boolean</td>
538
+ <td>false</td>
539
+ <td>읽기전용 여부 - 이동(hasOrder), 삭제(hasDelete) 버튼 미생성</td>
540
+ </tr>
401
541
  <tr>
402
542
  <td colspan="2">checkCapturing</td>
403
543
  <td>boolean</td>
@@ -458,6 +598,12 @@
458
598
  <td></td>
459
599
  <td>넓이조정 완료 시 발생이벤트</td>
460
600
  </tr>
601
+ <tr>
602
+ <td colspan="2">onChange</td>
603
+ <td>function(updatedData)</td>
604
+ <td></td>
605
+ <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
606
+ </tr>
461
607
  </tbody>
462
608
  </table>
463
609
 
@@ -515,6 +661,11 @@
515
661
  <td>void</td>
516
662
  <td>파라메터 배열에 전달된 key에 해당하는 컬럼만 보여준다</td>
517
663
  </tr>
664
+ <tr>
665
+ <td>showDetail(index: number, headerKeys?: string[])</td>
666
+ <td>void</td>
667
+ <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. headerKeys가 없는 경우 전체 항목 표시한다.</td>
668
+ </tr>
518
669
  <tr>
519
670
  <td>showAll()</td>
520
671
  <td>void</td>
@@ -528,18 +679,15 @@
528
679
  </tbody>
529
680
  </table>
530
681
 
531
- </div>
532
682
  </div>
533
683
 
534
-
535
-
536
- <footer class="aigis-footer">Last update at 2023/04/04 17:59</footer>
684
+ </div>
685
+
686
+
687
+ <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
688
+ </div>
537
689
  </div>
538
690
  </div>
539
- </div>
540
- <script src="../../../assets/guide.js"></script>
541
- </body>
691
+ <script src="../../../assets/guide.js"></script>
692
+ </body>
542
693
  </html>
543
-
544
-
545
-