{"id":14010,"date":"2023-08-28T04:15:24","date_gmt":"2023-08-27T19:15:24","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14010"},"modified":"2023-08-28T04:15:44","modified_gmt":"2023-08-27T19:15:44","slug":"gwc-ui-library-grid-custom-draw","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14010","title":{"rendered":"#GWC UI Library : Grid (Custom Draw)"},"content":{"rendered":"

\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Grid \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc140 \ub0b4\uc6a9\uc744 \uc0ac\uc6a9\uc790\uc815\uc758 \ud615\ud0dc\ub85c \ud45c\ud604\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n

\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n
\r\n    <\/gwc-grid>\r\n<\/div>\r\n<\/pre>\n
\uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n
\r\n.center {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 1em;\r\n}\r\n\r\n#grid {\r\n    width: 500px;\r\n    height: 250px;\r\n}\r\n<\/pre>\n
js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nwindow.onload = () => {\r\n    grid.columns = [\r\n        { name: \"NO\", width: \"20px\" },\r\n        { name: \"\uc0c9\uc0c1\" },\r\n        { name: \"\ubc94\uc704\" },\r\n    ];\r\n\r\n    const columnIndex = 1\r\n    grid.setCustomDrawMethod(columnIndex, (item, parentDom) => {\r\n        const dom = document.createElement(\"div\")\r\n        dom.style.width = \"100%\"\r\n        dom.style.height = \"10px\"\r\n        dom.style.backgroundColor = item\r\n\r\n        parentDom.style.width = \"90px\"\r\n\r\n        return dom\r\n    })\r\n\r\n    grid.data = [\r\n        { values: [\"1\", \"#ff0000\", \"100-200\"] },\r\n        { values: [\"2\", \"#ffff00\", \"200-300\"] },\r\n        { values: [\"3\", \"#ff00ff\", \"300-400\"] },\r\n        { values: [\"4\", \"#00ffff\", \"400-500\"] },\r\n        { values: [\"5\", \"#9f9f9f\", \"500-600\"] },\r\n        { values: [\"6\", \"#ff0000\", \"600-700\"] },\r\n        { values: [\"7\", \"#ffff00\", \"800-900\"] },\r\n        { values: [\"8\", \"#ff00ff\", \"1000-1100\"] },\r\n        { values: [\"9\", \"#00ffff\", \"1100-1200\"] },\r\n        { values: [\"10\", \"#9f9f9f\", \"1300-1400\"] },\r\n    ];\r\n\r\n    \/\/ grid\uc758 data\ub97c \uba3c\uc800 \uc9c0\uc815\ud558\uace0 setCustomDrawMethod\ub97c \uadf8 \ub2e4\uc74c\uc5d0 \ud638\ucd9c\ud560 \uacbd\uc6b0 \uc544\ub798\uc758 \ucf54\ub4dc\uac00 \ud544\uc694\ud568\r\n    \/\/grid.update() \r\n\r\n    grid.fixFirstColumn = true;\r\n\r\n    grid.addEventListener(\"columnclick\", (event) => {\r\n        const v = grid.getColumn(event.detail.index).name;\r\n        gwcMessage(`\uceec\ub7fc\uba85: ${v}`);\r\n    });\r\n\r\n    grid.addEventListener(\"dataclick\", (event) => {\r\n        const v = grid.getData(event.detail.row, event.detail.column);\r\n        gwcMessage(`\ub370\uc774\ud130: ${v}`);\r\n    });\r\n};\r\n<\/pre>\n
\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Grid \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc140 \ub0b4\uc6a9\uc744 \uc0ac\uc6a9\uc790\uc815\uc758 \ud615\ud0dc\ub85c \ud45c\ud604\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694. .center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; gap: 1em; } #grid { width: 500px; height: 250px; } js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. window.onload = () => { … <\/p>\n
\ub354 \ubcf4\uae30 “#GWC UI Library : Grid (Custom Draw)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140],"tags":[],"class_list":["post-14010","post","type-post","status-publish","format-standard","hentry","category-gwc"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14010"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14010\/revisions"}],"predecessor-version":[{"id":14015,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14010\/revisions\/14015"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14010"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}