fit : 테이블 스크롤 기능 추가

dev
Leeyh1121 5 months ago
parent 4f5df74a45
commit da87b03e71

@ -98,49 +98,51 @@
</div> </div>
</form> </form>
<form id="productList--${pageName}" name="productList"> <form id="productList--${pageName}" name="productList">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--productList" aria-describedby="DataTables_Table_0_info"> <div class="table-responsive ox-scroll oy-scroll h-px-300" id="table-responsive-1--${pageName}">
<thead class="sticky-thead"> <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--productList" aria-describedby="DataTables_Table_0_info">
<tr id="theadTr--productList" <thead class="sticky-thead">
data-by="by--productList" data-by-output="byOutput--productList" data-main-option="mainOption--productList" data-sub-option="subOption--productList"> <tr id="theadTr--productList"
<th style="width: 15.828px;text-align:center;" tabindex="0">No</th> data-by="by--productList" data-by-output="byOutput--productList" data-main-option="mainOption--productList" data-sub-option="subOption--productList">
<th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">제품명</th> <th style="width: 15.828px;text-align:center;" tabindex="0">No</th>
<th class="sorting" style="width: 146.156px;">제품코드</th> <th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">제품명</th>
<th class="sorting" style="width: 160.141px;">제품번호</th> <th class="sorting" style="width: 146.156px;">제품코드</th>
<th class="sorting" style="width: 160.141px;">제조 번호</th> <th class="sorting" style="width: 160.141px;">제품번호</th>
<th class="sorting" style="width: 160.141px;">제조 일련 번호</th> <th class="sorting" style="width: 160.141px;">제조 번호</th>
<th class="sorting" style="width: 230.469px;">유효기간</th> <th class="sorting" style="width: 160.141px;">제조 일련 번호</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위 수량</th> <th class="sorting" style="width: 230.469px;">유효기간</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위</th> <th class="sorting" style="width: 230.469px;">최소 유통단위 수량</th>
<th class="sorting" style="width: 230.469px;">낱개 단위 수량</th> <th class="sorting" style="width: 230.469px;">최소 유통단위</th>
<th class="sorting" style="width: 230.469px;">낱개 단위</th> <th class="sorting" style="width: 230.469px;">낱개 단위 수량</th>
<th class="sorting" style="width: 230.469px;">폐기 수량</th> <th class="sorting" style="width: 230.469px;">낱개 단위</th>
<th class="sorting" style="width: 230.469px;">이미지</th> <th class="sorting" style="width: 230.469px;">폐기 수량</th>
</tr> <th class="sorting" style="width: 230.469px;">이미지</th>
</thead> </tr>
<tbody id="tbody--productList"> </thead>
</tbody> <tbody id="tbody--productList">
<template id="productListRow--productList"> </tbody>
<tr data-key="{prductCd}"> <template id="productListRow--productList">
<td style="text-align:center;"><input value="prductCd" onchange="userControl.select('{prductCd}', this.checked);" type="checkbox" class="form-check-input"></td> <tr data-key="{prductCd}">
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductCd}</td> <td style="text-align:center;"><input value="prductCd" onchange="userControl.select('{prductCd}', this.checked);" type="checkbox" class="form-check-input"></td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductNm}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{prductCd}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfNo}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{prductNm}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfSeq}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfNo}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prdValidDe}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfSeq}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbQy}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{prdValidDe}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbUnit}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceQy}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceUnit}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{pceQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{dsuseQy}</td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{pceUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}=""></td> <td class="cmn text-center" {onclick}="" {ondblclick}="">{dsuseQy}</td>
</tr> <td class="cmn text-center" {onclick}="" {ondblclick}=""></td>
</template> </tr>
<template id="productListNotFound--productList"> </template>
<tr class="odd"> <template id="productListNotFound--productList">
<td valign="top" colspan="13" class="dataTables_empty text-center">제품 정보를 찾지 못했습니다.</td> <tr class="odd">
</tr> <td valign="top" colspan="13" class="dataTables_empty text-center">제품 정보를 찾지 못했습니다.</td>
</template> </tr>
</table> </template>
</table>
</div>
</form> </form>
</div> <!-- <div class="card"> --> </div> <!-- <div class="card"> -->
<!-- 업무 버튼 표시 --> <!-- 업무 버튼 표시 -->
@ -309,7 +311,7 @@
let trs = empty ? [document.getElementById("$productListNotFound--productList").content.outerHTML] let trs = empty ? [document.getElementById("$productListNotFound--productList").content.outerHTML]
: $P.productList.inStrings(foundTr.outerHTML, replacer); : $P.productList.inStrings(foundTr.outerHTML, replacer);
$("#table-responsive--${pageName}")[0].changeContent(trs.join(), true, true); $("#table-responsive--${pageName}")[0].changeContent(trs.join(), initScroll, noMore);
} }
/************************************************************************** /**************************************************************************
@ -319,6 +321,13 @@
/************************************************************************** /**************************************************************************
* 사용자 함수(function) * 사용자 함수(function)
**************************************************************************/ **************************************************************************/
// 검색 자료 재조회
$P.fnRefreshList = () => {
$P.control.untilPageNum = $P.control.query.pageNum;
$P.control.query.fetchSize = $P.control.defaultFetchSize * $P.control.query.pageNum;
$P.control.load(1);
}
// 업무구분에 따른 URL 설정 // 업무구분에 따른 URL 설정
$P.fnSetURL = (taskSeCd) => { $P.fnSetURL = (taskSeCd) => {
// $P.control.urls.create = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/create.do"); // 등록 // $P.control.urls.create = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/create.do"); // 등록
@ -394,6 +403,7 @@
// 초기 화면 설정 // 초기 화면 설정
$P.initForm = () => { $P.initForm = () => {
fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
// Dialog 마우스로 드래그 할 수 있도록 설정. // Dialog 마우스로 드래그 할 수 있도록 설정.
//fnMakeDraggableDialog(document.getElementById($P.control.prefix + "Dialog")); //fnMakeDraggableDialog(document.getElementById($P.control.prefix + "Dialog"));
} }

Loading…
Cancel
Save