Trouble-Shooting

Tabulator ๋“œ๋กญ๋‹ค์šด์ด ์ด์ƒํ•œ ์œ„์น˜์— ์ƒ์„ฑ๋˜๋Š” ํ˜„์ƒ

์ฑ”๐Ÿป 2024. 1. 24. 19:55

์ž‘์„ฑ์ผ์ž: 2023๋…„ 7์›” 27์ผ

โœ”๊ฒฐ๋ก 

tabulator ๊ธฐ๋ณธ CSS๋ฅผ import ํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž

/* Tabulator CSS */
@import url('https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css');

๐Ÿ‘€๋ฌธ์ œ ์ •์˜

Tabulator์—์„œ editor select๋กœ ๋“œ๋กญ๋‹ค์šด์„ ๊ตฌํ˜„ํ•˜๋ ค ํ•˜์˜€์œผ๋‚˜ ์ด์ƒํ•œ ์œ„์น˜์— ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•จ

{
    title: "ํƒ๋ฐ”์‚ฌ", field: "dlvCom", editor: "select", editorParams: {
        values: ["ํƒ๋ฐฐ์‚ฌ1", "ํƒ๋ฐฐ์‚ฌ2", "ํƒ๋ฐฐ์‚ฌ3", "ํƒ๋ฐฐ์‚ฌ4"]
    }
},

โ“์›์ธ ์ถ”๋ก  & ํ•ด๊ฒฐ์ฑ… ์‹œ๋„

  1. โŒย ๋‹ค๋ฅธ CSS, JS๋ž‘ ์ถฉ๋Œ์ด ๋‚˜๋‚˜ ์‹ถ์–ด์„œ ๊ณตํ†ต JSP์— ๋‘์—ˆ๋˜ Tabulator ๊ด€๋ จ ํŒŒ์ผ๋“ค์„ grid๋ฅผ ์‚ฌ์šฉํ•˜๋Š” JSP์— importํ•ด์„œ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ œ์ผ ๋†’์—ฌ๋ด„

    โ†’ ์—ฌ์ „ํžˆ ์•ˆ ๋œ๋‹ค

  1. ๐Ÿ”บ๋‚ด๊ฐ€ ์ถ”๊ฐ€ํ•œ bootstrap ํ…Œ๋งˆ๊ฐ€ ๋ฌธ์ œ์ธ๊ฐ€ ์‹ถ์–ด์„œ ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ ํ…Œ๋งˆ๋Š” ์ฃผ์„์ฒ˜๋ฆฌํ•˜๊ณ  ๊ธฐ๋ณธ ํ…Œ๋งˆ๋กœ ์ ์šฉํ•ด๋ณด์•˜๋‹ค.

    โ†’ ์ผ๋‹จ ์›์ธ์ด tabulator_bootstrap ํ…Œ๋งˆ์ธ ๊ฑด ์ฐพ์Œ

    /* Tabulator์˜ Bootstrap ํ…Œ๋งˆ CSS ์ถ”๊ฐ€ */
<%--@import url(${cssUrlBos}/common/tabulator_bootstrap4.min.css);--%>

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
  1. โŒย ๊นƒํ—ˆ๋ธŒ์—์„œ ์ € ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ฌ ๋•Œ ํŒŒ์ผ์„ ํ†ต์งธ๋กœ ๋‹ค์šด๋ฐ›์ง€ ์•Š๊ณ  ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•ด์„œ ๊ฐ€์ ธ์™”์—ˆ์–ด์„œ ๊ทธ ๊ณผ์ •์—์„œ ๋ญ”๊ฐ€ ๋ˆ„๋ฝ๋˜์—ˆ๋‚˜ ์‹ถ์–ด ์ด๋ฒˆ์—๋Š” ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ๋ฅผ ํ†ตํ•ด css ํŒŒ์ผ์„ ๋‹ค์‹œ ๊ฐ€์ ธ์™€๋ณด์•˜๋‹ค.

    โ†’ ๋˜‘๊ฐ™์ด ์•ˆ๋จ ใ…œ

    https://github.com/olifolkerd/tabulator/blob/master/dist/css/tabulator_bootstrap4.min.css
  1. ๊ธฐ์กด์— ์ž‘์—…ํ•˜๋˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹Œ ์•„๋ฌด๊ฒƒ๋„ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์—์„œ Tabulator grid๋ฅผ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค.(๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํ…Œ๋งˆ ์ ์šฉํ•ด์„œ)
    • ์ฝ”๋“œ
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabulator Select Example</title>

    <!-- Tabulator CSS -->
    <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
    <style>
        /* ์•ˆ ์ด์œ ํ…Œ๋งˆ */
        @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'); 
        /* ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํ…Œ๋งˆ */
        @import url(tabulator_bootstrap4.min.css);
    </style>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- Tabulator JS -->
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
</head>
<body>
    <div id="example-table"></div>

    <script>
        // Define data for the table
        var tableData = [
            {id:1, name:"Oli Bob", age:"12", gender:"male", col:"red", dob:""},
            {id:2, name:"Mary May", age:"1", gender:"female", col:"blue", dob:"14/05/1982"},
            {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
            {id:4, name:"Brendon Philips", age:"125", gender:"male", col:"orange", dob:"01/08/1980"},
            {id:5, name:"Margret Marmajuke", age:"16", gender:"female", col:"yellow", dob:"31/01/1999"},
        ];

        // Define the table
        var table = new Tabulator("#example-table", {
            height: "311px",
            data: tableData,
            columns:[
                {title:"Name", field:"name", width:200},
                {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
                {title:"Gender", field:"gender", width:130, editor:"select", editorParams:{values:["male", "female"]}},
                {title:"Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
            ],
        });
    </script>
</body>
</html>

    ๊ฒฐ๊ณผ๋Š” ๋„ˆ๋ฌด ์ž˜ ๋‚˜์˜จ๋‹ค ใ…Žใ…Žโ€ฆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ์—ˆ์Œ ใ… ใ… 

  1. ๊ทธ๋Ÿผ ๊ธฐ์กด์— ์žˆ๋˜ ๋‚ด ์ฝ”๋“œ๋ž‘ ์ถฉ๋Œ์ด ๋‚˜์„œ ์•ˆ ๋‚˜์˜จ๋‹ค๋Š” ์†Œ๋ฆฐ๋ฐ,, ์ž‘๋™ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๊ธฐ์กด์˜ ์ฝ”๋“œ์— ์ถ”๊ฐ€ํ•ด๋ณด์•˜๋‹ค.
    • ์ฝ”๋“œ
      <%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabulator Select Example</title>

    <!-- Tabulator CSS -->
    <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
    <style>
        /* ์•ˆ ์ด์œ ํ…Œ๋งˆ */
        @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
        /* ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํ…Œ๋งˆ */
        @import url(${cssUrlBos}/common/tabulator_bootstrap4.min.css);
    </style>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- Tabulator JS -->
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>

<script>
    // Define data for the table
    var tableData = [
        {id:1, name:"Oli Bob", age:"12", gender:"male", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", gender:"female", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", col:"yellow", dob:"31/01/1999"},
    ];

    // Define the table
    var table = new Tabulator("#example-table", {
        height: "311px",
        data: tableData,
        columns:[
            {title:"Name", field:"name", width:200},
            {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
            {title:"Gender", field:"gender", width:130, editor:"select", editorParams:{values:["male", "female"]}},
            {title:"Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
        ],
    });
</script>
</body>
</html>

    ์ž˜ ๋‚˜์˜ด;; ๊ทธ๋Ÿผ ๊ณตํ†ต์ชฝ์— ์žˆ๋Š” css๋ž‘ script ๋ฌธ์ œ๋Š” ์•„๋‹˜

  1. ๊ฐœ๋ณ„ jsp์—์„œ importํ•˜๋Š” javascript๊ฐ€ ๋ฌธ์ œ์ธ๊ฐ€,,? ์ž‘๋™ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๊ธฐ์กด ์ฝ”๋“œ์—๋‹ค๊ฐ€ ์ถ”๊ฐ€ํ•ด์„œ ๋ดค๋Š”๋ฐ

    ๋“œ๋กญ๋‹ค์šด ์•ˆ ๋œ๋‹ค,,

  1. ๊ทธ๋ž˜์„œ ๊ธฐ์กด html, javascript import ์ฝ”๋“œ ๋‹ค ์ง€์šฐ๋ฉด ๋  ์ค„ ์•Œ์•˜๋Š”๋ฐ ์•ˆ๋œ๋‹ค??
    • ์ฝ”๋“œ
      <%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<head>
<%--    <script src="<c:url value="${jsUrlBos}/order/dispatchManage.js"/>"></script>--%>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // dispatchManage.initLoad();
            // dispatchManage.bindButtonEvent();
        });
    </script>
</head>


<div id="example-table"></div>

<script>
    // Define data for the table
    var tableData = [
        {id:1, name:"Oli Bob", age:"12", gender:"male", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", gender:"female", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", col:"yellow", dob:"31/01/1999"},
    ];

    // Define the table
    var table = new Tabulator("#example-table", {
        height: "311px",
        data: tableData,
        columns:[
            {title:"Name", field:"name", width:200},
            {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
            {title:"Gender", field:"gender", width:130, editor:"select", editorParams:{values:["male", "female"]}},
            {title:"Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
        ],
    });
</script>

<%--<div class="container-fluid px-4">--%>
<%--    <h1 class="mt-4">์ฃผ๋ฌธํ™•์ธ/๋ฐœ์†ก๊ด€๋ฆฌ</h1>--%>
<%--    <div class="status_button_area">--%>
<%--        <div id="btn_search_new_order" class="status_button">--%>
<%--            <a class="icon"></a>--%>
<%--            ์‹ ๊ทœ์ฃผ๋ฌธ(์ฃผ๋ฌธํ™•์ธ ์ „)--%>
<%--            <span>--%>
<%--                <strong id="newOrderCnt">0</strong>๊ฑด--%>
<%--            </span>--%>
<%--        </div>--%>
<%--        <div id="btn_search_order_confirm" class="status_button">--%>
<%--            <a class="icon"></a>--%>
<%--            ์‹ ๊ทœ์ฃผ๋ฌธ(์ฃผ๋ฌธํ™•์ธ ํ›„)--%>
<%--            <span>--%>
<%--                <strong id="orderConfirmCnt">0</strong>๊ฑด--%>
<%--            </span>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div class="search_form">--%>
<%--        <table>--%>
<%--            <tr>--%>
<%--                <th>๊ธฐ๊ฐ„</th>--%>
<%--                <td colspan="3" style="position:relative;">--%>
<%--                    <select id="date_type" class="form-select" style="width:115px;">--%>
<%--                        <option value="O.ORD_DTTM" selected="selected">์ฃผ๋ฌธ์ผ</option>--%>
<%--                        <option value="memo_date">๋ฉ”๋ชจ์ž‘์„ฑ์ผ</option>--%>
<%--                        <option value="pay_date">๊ฒฐ์ œ์ผ</option>--%>
<%--                        <option value="shipready_date">์†ก์žฅ๋ฒˆํ˜ธ์ž…๋ ฅ์ผ</option>--%>
<%--                        <option value="shipbegin_date">๋ฐฐ์†ก์‹œ์ž‘์ผ</option>--%>
<%--                        <option value="shipend_date">๋ฐฐ์†ก์™„๋ฃŒ์ผ</option>--%>
<%--                        <option value="purchaseconfirmation_date">๊ตฌ๋งคํ™•์ •์ผ</option>--%>
<%--                    </select>--%>

<%--                    <div class="date_range_container">--%>
<%--                        <button data-interval="0" class="btn btn-outline-dark date_range active">์˜ค๋Š˜</button>--%>
<%--                        <button data-interval="1" class="btn btn-outline-dark date_range">์–ด์ œ</button>--%>
<%--                        <button data-interval="3" class="btn btn-outline-dark date_range">3์ผ</button>--%>
<%--                        <button data-interval="7" class="btn btn-outline-dark date_range">7์ผ</button>--%>
<%--                        <button data-interval="15" class="btn btn-outline-dark date_range">15์ผ</button>--%>
<%--                        <button data-interval="30" class="btn btn-outline-dark date_range">1๊ฐœ์›”</button>--%>
<%--                        <button data-interval="90" class="btn btn-outline-dark date_range">3๊ฐœ์›”</button>--%>
<%--                        <button data-interval="180" class="btn btn-outline-dark date_range">6๊ฐœ์›”</button>--%>
<%--                    </div>--%>

<%--                    <div class="calendar">--%>
<%--                        <div class="input w-208">--%>
<%--                            <input type="text" name="start_date" id="start_date" readonly="readonly"--%>
<%--                                   class="inp datepicker hasDatepicker">--%>
<%--                        </div>--%>
<%--                        <span class="m">~</span>--%>
<%--                        <div class="input w-208">--%>
<%--                            <input type="text" name="end_date" id="end_date" readonly="readonly"--%>
<%--                                   class="inp datepicker hasDatepicker">--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <th>๊ฒ€์ƒ‰์–ด</th>--%>
<%--                <td>--%>
<%--                    <select id="search_type" class="form-select" style="width:150px;">--%>
<%--                        <option>-๊ฒ€์ƒ‰ํ•ญ๋ชฉ์„ ํƒ-</option>--%>
<%--                        <option value="ODA.RECIPIENT">์ˆ˜๋ น์ธ๋ช…</option>--%>
<%--                        <option value="M.NAME">๊ตฌ๋งค์ž๋ช…</option>--%>
<%--                        <option value="M.LGIN_ID">๊ตฌ๋งค์žID</option>--%>
<%--                        <option value="ODA.MP_NO">๊ตฌ๋งค์ž์—ฐ๋ฝ์ฒ˜</option>--%>
<%--                        <option value="O.ORD_NO">์ฃผ๋ฌธ๋ฒˆํ˜ธ</option>--%>
<%--                        <option value="OD.ORD_DTL_NO">์ฃผ๋ฌธ์ƒ์„ธ๋ฒˆํ˜ธ</option>--%>
<%--                        <option value="OD.PROD_ID">์ƒํ’ˆ๋ฒˆํ˜ธ</option>--%>
<%--                    </select>--%>
<%--                    <input type="text" id="search_keyword" class="form-control" style="width: 500px">--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <th>์ฃผ๋ฌธ์ƒํƒœ</th>--%>
<%--                <td colspan="3" id="orderStatusCheckbox">--%>
<%--                    <label><input type="checkbox" id="chk-all" name="chk" checked>์ „์ฒด</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="10" checked>๊ฒฐ์ œ์™„๋ฃŒ</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="20" checked>์ฃผ๋ฌธํ™•์ธ</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="30" checked>๋ฐœ์†ก์™„๋ฃŒ</label>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--        </table>--%>
<%--        <div class="button_area">--%>
<%--            <button id="btn_search" class="btn btn-dark">๊ฒ€์ƒ‰</button>--%>
<%--            <button class="btn btn-light">์ดˆ๊ธฐํ™”</button>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div class="grid-container">--%>
<%--        <div class="button_area">--%>
<%--            <button id="btn_order_confirm" class="btn btn-outline-dark date_range">์ฃผ๋ฌธํ™•์ธ</button>--%>
<%--            <button id="btn_order_dispatch" class="btn btn-outline-dark date_range">๋ฐœ์†ก์ฒ˜๋ฆฌ</button>--%>
<%--        </div>--%>
<%--        <div id="dispatchManageGrid"></div>--%>
<%--    </div>--%>
<%--</div>--%>
  1. head ์ฃผ์„์ฒ˜๋ฆฌ โ†’ X
  1. ๋ญ์ง€ ์™œ ์•ˆ๋˜์ง€โ€ฆโ€ฆ.???? tabulator ์ฝ”๋“œ ์ œ์™ธํ•˜๊ณ  ๋‹ค ์ฃผ์„์ฒ˜๋ฆฌ ํ–ˆ๋Š”๋ฐ ์•ˆ๋จ..
    • ์ฝ”๋“œ
      <%@ page contentType="text/html; charset=UTF-8" %>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
<%--<head>--%>
<%--    <script src="<c:url value="${jsUrlBos}/order/dispatchManage.js"/>"></script>--%>
<%--    <script>--%>
<%--        document.addEventListener("DOMContentLoaded", () => {--%>
<%--            // dispatchManage.initLoad();--%>
<%--            // dispatchManage.bindButtonEvent();--%>
<%--        });--%>
<%--    </script>--%>
<%--</head>--%>


<div id="example-table"></div>

<script>
    // Define data for the table
    var tableData = [
        {id:1, name:"Oli Bob", age:"12", gender:"male", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", gender:"female", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", col:"yellow", dob:"31/01/1999"},
    ];

    // Define the table
    var table = new Tabulator("#example-table", {
        height: "311px",
        data: tableData,
        columns:[
            {title:"Name", field:"name", width:200},
            {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
            {title:"Gender", field:"gender", width:130, editor:"select", editorParams:{values:["male", "female"]}},
            {title:"Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
        ],
    });
</script>

<%--<div class="container-fluid px-4">--%>
<%--    <h1 class="mt-4">์ฃผ๋ฌธํ™•์ธ/๋ฐœ์†ก๊ด€๋ฆฌ</h1>--%>
<%--    <div class="status_button_area">--%>
<%--        <div id="btn_search_new_order" class="status_button">--%>
<%--            <a class="icon"></a>--%>
<%--            ์‹ ๊ทœ์ฃผ๋ฌธ(์ฃผ๋ฌธํ™•์ธ ์ „)--%>
<%--            <span>--%>
<%--                <strong id="newOrderCnt">0</strong>๊ฑด--%>
<%--            </span>--%>
<%--        </div>--%>
<%--        <div id="btn_search_order_confirm" class="status_button">--%>
<%--            <a class="icon"></a>--%>
<%--            ์‹ ๊ทœ์ฃผ๋ฌธ(์ฃผ๋ฌธํ™•์ธ ํ›„)--%>
<%--            <span>--%>
<%--                <strong id="orderConfirmCnt">0</strong>๊ฑด--%>
<%--            </span>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div class="search_form">--%>
<%--        <table>--%>
<%--            <tr>--%>
<%--                <th>๊ธฐ๊ฐ„</th>--%>
<%--                <td colspan="3" style="position:relative;">--%>
<%--                    <select id="date_type" class="form-select" style="width:115px;">--%>
<%--                        <option value="O.ORD_DTTM" selected="selected">์ฃผ๋ฌธ์ผ</option>--%>
<%--                        <option value="memo_date">๋ฉ”๋ชจ์ž‘์„ฑ์ผ</option>--%>
<%--                        <option value="pay_date">๊ฒฐ์ œ์ผ</option>--%>
<%--                        <option value="shipready_date">์†ก์žฅ๋ฒˆํ˜ธ์ž…๋ ฅ์ผ</option>--%>
<%--                        <option value="shipbegin_date">๋ฐฐ์†ก์‹œ์ž‘์ผ</option>--%>
<%--                        <option value="shipend_date">๋ฐฐ์†ก์™„๋ฃŒ์ผ</option>--%>
<%--                        <option value="purchaseconfirmation_date">๊ตฌ๋งคํ™•์ •์ผ</option>--%>
<%--                    </select>--%>

<%--                    <div class="date_range_container">--%>
<%--                        <button data-interval="0" class="btn btn-outline-dark date_range active">์˜ค๋Š˜</button>--%>
<%--                        <button data-interval="1" class="btn btn-outline-dark date_range">์–ด์ œ</button>--%>
<%--                        <button data-interval="3" class="btn btn-outline-dark date_range">3์ผ</button>--%>
<%--                        <button data-interval="7" class="btn btn-outline-dark date_range">7์ผ</button>--%>
<%--                        <button data-interval="15" class="btn btn-outline-dark date_range">15์ผ</button>--%>
<%--                        <button data-interval="30" class="btn btn-outline-dark date_range">1๊ฐœ์›”</button>--%>
<%--                        <button data-interval="90" class="btn btn-outline-dark date_range">3๊ฐœ์›”</button>--%>
<%--                        <button data-interval="180" class="btn btn-outline-dark date_range">6๊ฐœ์›”</button>--%>
<%--                    </div>--%>

<%--                    <div class="calendar">--%>
<%--                        <div class="input w-208">--%>
<%--                            <input type="text" name="start_date" id="start_date" readonly="readonly"--%>
<%--                                   class="inp datepicker hasDatepicker">--%>
<%--                        </div>--%>
<%--                        <span class="m">~</span>--%>
<%--                        <div class="input w-208">--%>
<%--                            <input type="text" name="end_date" id="end_date" readonly="readonly"--%>
<%--                                   class="inp datepicker hasDatepicker">--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <th>๊ฒ€์ƒ‰์–ด</th>--%>
<%--                <td>--%>
<%--                    <select id="search_type" class="form-select" style="width:150px;">--%>
<%--                        <option>-๊ฒ€์ƒ‰ํ•ญ๋ชฉ์„ ํƒ-</option>--%>
<%--                        <option value="ODA.RECIPIENT">์ˆ˜๋ น์ธ๋ช…</option>--%>
<%--                        <option value="M.NAME">๊ตฌ๋งค์ž๋ช…</option>--%>
<%--                        <option value="M.LGIN_ID">๊ตฌ๋งค์žID</option>--%>
<%--                        <option value="ODA.MP_NO">๊ตฌ๋งค์ž์—ฐ๋ฝ์ฒ˜</option>--%>
<%--                        <option value="O.ORD_NO">์ฃผ๋ฌธ๋ฒˆํ˜ธ</option>--%>
<%--                        <option value="OD.ORD_DTL_NO">์ฃผ๋ฌธ์ƒ์„ธ๋ฒˆํ˜ธ</option>--%>
<%--                        <option value="OD.PROD_ID">์ƒํ’ˆ๋ฒˆํ˜ธ</option>--%>
<%--                    </select>--%>
<%--                    <input type="text" id="search_keyword" class="form-control" style="width: 500px">--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <th>์ฃผ๋ฌธ์ƒํƒœ</th>--%>
<%--                <td colspan="3" id="orderStatusCheckbox">--%>
<%--                    <label><input type="checkbox" id="chk-all" name="chk" checked>์ „์ฒด</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="10" checked>๊ฒฐ์ œ์™„๋ฃŒ</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="20" checked>์ฃผ๋ฌธํ™•์ธ</label>--%>
<%--                    <label><input type="checkbox" name="chk" class="chk-point" value="30" checked>๋ฐœ์†ก์™„๋ฃŒ</label>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--        </table>--%>
<%--        <div class="button_area">--%>
<%--            <button id="btn_search" class="btn btn-dark">๊ฒ€์ƒ‰</button>--%>
<%--            <button class="btn btn-light">์ดˆ๊ธฐํ™”</button>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div class="grid-container">--%>
<%--        <div class="button_area">--%>
<%--            <button id="btn_order_confirm" class="btn btn-outline-dark date_range">์ฃผ๋ฌธํ™•์ธ</button>--%>
<%--            <button id="btn_order_dispatch" class="btn btn-outline-dark date_range">๋ฐœ์†ก์ฒ˜๋ฆฌ</button>--%>
<%--        </div>--%>
<%--        <div id="dispatchManageGrid"></div>--%>
<%--    </div>--%>
<%--</div>--%>
  1. ๋‹ค์‹œ ์›๋ž˜ ๊ฐœ๋ณ„ ์›Œํฌ์ŠคํŽ˜์ด์Šค์—์„œ ์ž˜ ๋˜๋˜ ์ฝ”๋“œ๋กœ ๋Œ์•„๊ฐ€์„œ ํ™•์ธ์„ ํ•ด๋ณด๋‹ˆ๊นŒ

    Tabulator CSS ํŒŒ์ผ์ด ์—†์œผ๋ฉด ๋“œ๋กญ๋‹ค์šด์ด ์ œ๋Œ€๋กœ ๋ณด์ด์ง€ ์•Š์•˜๋‹ค

    <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">

โœ”์›์ธ

Tabulator ๊ธฐ๋ณธ CSS ํŒŒ์ผ์ด import๋˜์ง€ ์•Š์•„์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ์˜€๋‹ค.

๐Ÿ’กํ•ด๊ฒฐ๋ฐฉ๋ฒ•

Tabulator CSS ํŒŒ์ผ import ํ•ด์ฃผ๋‹ˆ๊นŒ ์ž˜ ๋œ๋‹ค ใ… ใ… ใ… ใ… ใ… 

<style>
    @import url(${cssUrlBos}/common/dashboard.css);

    /* font-awesome */
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    /* ๋ถ€ํŠธ์ŠคํŠธ๋žฉ css */
    @import url('https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css');
    /* Tabulator CSS */
    @import url('https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css');
    /* Tabulator์˜ Bootstrap ํ…Œ๋งˆ CSS ์ถ”๊ฐ€ */
    @import url(${cssUrlBos}/common/tabulator_bootstrap4.min.css);
    /* flatpickr ์บ˜๋ฆฐ๋” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ CSS */
    @import url('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
</style>

๋‚ด๊ฐ€ ์™œ tabulator.min.css ํŒŒ์ผ์„ import ์•ˆ ํ•˜๊ณ  ์žˆ์—ˆ๋Š”์ง€ ๊ธฐ์–ต๋„ ์•ˆ ๋‚œ๋‹คโ€ฆ ์ง€๊ธˆ๊นŒ์ง€๋Š” ๊ธฐ๋ณธ css ํŒŒ์ผ ์•ˆ ๊ฐ€์ง€๊ณ  ์žˆ์–ด๋„ ์ž˜๋งŒ ๋‚˜์™€์„œ ์ž˜ ๋˜๋Š” ์ค„ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๋“œ๋กญ๋‹ค์šด ๋•Œ ๋ฌธ์ œ๊ฐ€ ํ„ฐ์ง„๊ฑฐ์˜€๋‹ค.

์•„ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ๊นŒ ๊ทธ ํŽ˜์ด์ง• ๋ฐ” ์™ผ์ชฝ์œผ๋กœ ๊ฐ„ ๋‚ ๋ถ€ํ„ฐ ์•ˆ ๋‚˜์™”์—ˆ์—ˆ๋„ค

ํŽ˜์ด์ง•๋ฐ”๊ฐ€ ๊ฐ‘์ž๊ธฐ ์™œ ์™ผ์ชฝ์œผ๋กœ ์™”๋‚˜ ํ–ˆ๋”๋‹ˆ ๊ธฐ๋ณธ css ํŒŒ์ผ import ์•ˆ ํ•ด์„œ์˜€๊ตฌ๋‚˜ ์ง€๊ธˆ ๋ณด๋‹ˆ๊นŒ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ž˜ ๋‚˜์˜จ๋‹ค


Uploaded by N2T