오픈소스/AXBoot프로그래밍

Axboot 멀티 테이블 수정/저장 예제 (1/2)

dasdes

20 8월 2025 — 6 min read

[제품 가격 History]

두개 이상의 테이블을 컨트롤하는 예제를 처리하기 위해 기존 예제에 적합한

제품 가격이 변경될 때마다 그 내역을 관리할 수 있는 화면을 만들어 보기로 한다.

1. 작성순서

1) 먼저 제품 가격 History를 저장할 수 있는 테이블을 생성하고 조회할 수 있는 화면을 만든다.

(이 부분은 화면생성부분을 참고하기 바랍니다. 여기서는 대략적으로 설명할 예정입니다.)

-Axboot 신규화면 만들기 1~3 참고

Axboot 신규화면 만들기 1 - DB생성 및 서버단 소스생성

Axboot 신규화면 만들기 2 - 화면 소스 만들기

Axboot 신규화면 만들기 3 - 정상적인 CRUD를 위한 JAVA소스 수정

2) 이전 단계에서 만든 제품정보의 판매가격 변경 시 제품 가격 History테이블에 저장하는 로직을 추가한다.

2. 구현

1) 제품 History테이블 생성

CREATE TABLE `prdt_price_hist` (
`id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`prdt_cd` VARCHAR(20) NOT NULL COMMENT '제품코드',
`ch_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '변경일시',
`sales_price` INT(10) NOT NULL DEFAULT '0' COMMENT '판매가격',
`CREATED_AT` DATETIME(6) NULL DEFAULT NULL,
`CREATED_BY` VARCHAR(255) NULL DEFAULT NULL,
`UPDATED_AT` DATETIME(6) NULL DEFAULT NULL,
`UPDATED_BY` VARCHAR(255) NULL DEFAULT NULL,
PRIMARY KEY (`id`)
)
COMMENT='제품가격History'
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=4

2) JAVA 코드 생성

: https://localhost:8080/modelExtractor/db 접속 후 위에서 만들어진 테이블 클릭 후 기본 JAVA코드를 생성하자.
(위 Axboot 신규화면 만들기 1 참조 - 코드생성 시 Package Name : prdt , Class Name : PrdtPriceHist 로 입력)

3) 제품 가격 History 화면소스 만들기

: 간단히 기존에 만들었던 제품 정보 화면 소스를 복사해서 PrdtPriceHist.jsp와 PrdtPriceHist.js 로

이름을 변경한 후 일부만 수정하면 된다.

(추가적으로 위 링크의 화면소스만들기 2를 참고하여 webapp하위의 axboot.config.js 에 js에서 호출할

약식이름과 full명의 mapping설정한다. - "prdtPriceHist":"/api/v1/prdtPriceHist")

- PrdtPriceHist.jsp 수정

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="ax" tagdir="/WEB-INF/tags" %>

<ax:set key="system-common-code-version" value="1.0.0"/>

<ax:set key="title" value="${pageName}"/>

<ax:set key="page_desc" value="${pageRemark}"/>

<ax:set key="page_auto_height" value="true"/>

<ax:layout name="base">

    <jsp:attribute name="script">

        <ax:script-lang key="ax.script" var="LANG" />

        <ax:script-lang key="ax.admin" var="COL" />

        <script type="text/javascript" src="<c:url value='/assets/js/view/shopmng/prdtPriceHist.js' />"></script>

    </jsp:attribute>

    <jsp:body>

        <ax:page-buttons></ax:page-buttons>

        <div role="page-header">

            <ax:form name="searchView0">

                <ax:tbl clazz="ax-search-tbl" minWidth="500px">

                    <ax:tr>

                        <ax:td label='ax.admin.search' width="300px">

                            <ax:input type="text" name="filter" id="filter" clazz="form-control" placeholder="ax.admin.input.search"/>

                        </ax:td>

                    </ax:tr>

                </ax:tbl>

            </ax:form>

            <div class="H10"></div> 

        </div>

        <ax:split-layout name="ax1" orientation="horizontal">

            <ax:split-panel width="*" style="">

                <!-- 목록 -->

                <div class="ax-button-group" data-fit-height-aside="grid-view-01">

                    <div class="left">

                        <h2>

                            <i class="cqc-list"></i>

                            <!--<ax:lang id="ax.admin.commoncode.title"/>-->

                             제품 가격 변경 내역

                        </h2>

                    </div>

                    <div class="right">

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="add"><i class="cqc-circle-with-plus"></i> <ax:lang id="ax.admin.add"/></button>

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="delete"><i class="cqc-circle-with-minus"></i> <ax:lang id="ax.admin.delete"/></button>

                    </div>

                </div>

                <div data-ax5grid="grid-view-01" data-fit-height-content="grid-view-01" style="height: 300px;"></div>

            </ax:split-panel>

        </ax:split-layout>

    </jsp:body>

</ax:layout>

- PrdtPriceHist.js 수정

var fnObj = {};

var ACTIONS = axboot.actionExtend(fnObj, {

    PAGE_SEARCH: function (caller, act, data) {

        axboot.ajax({

            type: "GET",

            url: ["prdtPriceHist"],

            data: caller.searchView.getData(),

            callback: function (res) {

                caller.gridView01.setData(res);

            }

        });

        return false;

    },

    PAGE_SAVE: function (caller, act, data) {

        var saveList = [].concat(caller.gridView01.getData("modified"));

        saveList = saveList.concat(caller.gridView01.getData("deleted"));

        axboot.ajax({

            type: "PUT",

            url: ["prdtPriceHist"],

            data: JSON.stringify(saveList),

            callback: function (res) {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

                axToast.push(LANG("onsave"));

            }

        });

    },

    ITEM_ADD: function (caller, act, data) {

        caller.gridView01.addRow();

    },

    ITEM_DEL: function (caller, act, data) {

        caller.gridView01.delRow("selected");

    }

});

//기존 제품정보 복사 시 이 부분을 초기 셋팅으로만 변경해준다.

fnObj.pageStart = function () {

    this.pageButtonView.initView();

    this.searchView.initView();

    this.gridView01.initView();

    ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

};

fnObj.pageResize = function () {};

fnObj.pageButtonView = axboot.viewExtend({

    initView: function () {

        axboot.buttonClick(this, "data-page-btn", {

            "search": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

            },

            "save": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SAVE);

            }

        });

    }

});

//== view 시작

/**

 * searchView

 */

fnObj.searchView = axboot.viewExtend(axboot.searchView, {

    initView: function () {

        this.target = $(document["searchView0"]);

        this.target.attr("onsubmit", "return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);");

        this.filter = $("#filter");

    },

    getData: function () {

        return {

            pageNumber: this.pageNumber,

            pageSize: this.pageSize,

            filter: this.filter.val()

        }

    }

});

/**

 * gridView

 */

fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {

    initView: function () {

        var _this = this;

        this.target = axboot.gridBuilder({

            showRowSelector: true,

            frozenColumnIndex: 0,

            sortable: true,

            multipleSelect: true,

            target: $('[data-ax5grid="grid-view-01"]'),

            columns: [
                {
                    key: "id",
                    label: "id",
                    display: false
                },
                {
                    key: "prdtCd",
                    label: "제품코드",
                    width: 100,
                    align: "center",
                    editor: "text"
                },

                //내부적으로 update 일자를 관리하고 있지만, 그냥 넣어봤음.

                {
                    key: "chDate",
                    label: "변경일시",
                    width: 150,
                    align: "right",
                    editor: "date"
                },
                {
                    key: "salesPrice",
                    label: "판매가격",
                    width: 150,
                    align: "right",
                    editor: "number"
                }

            ],

            body: {

                onClick: function () {

                    this.self.select(this.dindex, {
                        selectedClear: true
                    });

                }

            }

        });

        axboot.buttonClick(this, "data-grid-view-01-btn", {

            "add": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_ADD);

            },

            "delete": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_DEL);

            }

        });

    },

    getData: function (_type) {

        var list = [];

        var _list = this.target.getList(_type);

        if (_type == "modified" || _type == "deleted") {

            list = ax5.util.filter(_list, function () {

                return this.prdtCd;

            });

        } else {

            list = _list;

        }

        return list;

    },

    addRow: function () {

        this.target.addRow({
            __created__: true
        }, "last");

    }

});

그 다음은 서버를 실행하여 프로그램 및 매뉴관리 화면에서 제품가격History를 추가해준다.

나머지 조회 및 Update(제품정보의 판매가격 수정시 호출)을 위한 JAVA소스 수정은 다음에 게시하고,

오늘은 여기까지만 하도록 하겠습니다.

#제품가격 #멀티테이블 #Axboot