웹프로그램을 만들다보면 그리드 시스템이 필요할떄가 있습니다.
테이블태그를 이용한 코드 작성도 나쁘진 않지만 JQGRID를 사용해보고 개발의 편리성에 GRID라이브러리를 사용하게 되었습니다.
JQGRID를 사용해 보았으니 최신버전은 유료라이센스로 바뀌었고 4.0대 버전을 무료로 사용할수 있었습니다.
대체할 라이브러리를 검색을 하다 발견한 JSGRID를 사용을 해보게 되었습니다.
JQGRID라이브러리의 예제 소스는 아래에서 다운받거나 구경할수 있습니다.
Demos
js-grid.com
저는 JSGRID 라이브러리를 스프링에 적용하는 것을 정리합니다.
라이브러리 로드 파일에 라이브러리경로를 넣어줍니다.
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
<script src="../src/jsgrid.core.js"></script>
<script src="../src/jsgrid.load-indicator.js"></script>
<script src="../src/jsgrid.load-strategies.js"></script>
<script src="../src/jsgrid.sort-strategies.js"></script>
<script src="../src/jsgrid.validation.js"></script>
<script src="../src/jsgrid.field.js"></script>
<script src="../src/fields/jsgrid.field.text.js"></script>
<script src="../src/fields/jsgrid.field.number.js"></script>
<script src="../src/fields/jsgrid.field.select.js"></script>
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
<script src="../src/fields/jsgrid.field.control.js"></script>각자의 경로에 맞추어 넣어주면 됩니다.
jsgrid를 선언하는 부분은 이런식으로 나와 있습니다.
$("#jsGrid").jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
{ name: "Address", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name",
validate: { message: "Country should be specified", validator: function(value) { return value > 0; } } },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});나누어 보겠습니다.
위부분을 인수로 받아 생성하는 코드로 변경을 합니다.
//그리드 생성.
function initGrid(grid_id,in_fields,in_paging,in_pageSize,in_pageButtonCount,in_filtering,in_inserting,in_editing,in_sorting,in_autoload
,now_pager,now_table_custom,now_db
,onrowClass,inonItemInserting,inonItemUpdating)
{
jsGrid.locale("ko");
grid_id.jsGrid({
noDataContent: "데이터가 없습니다.",
deleteConfirm: "삭제합니다 정말입니까?",
pagerFormat: " {prev} {pages} {next}",
pagePrevText: "«",
pageNextText: "»",
pageFirstText: "처음",
pageLastText: "마지막",
loadMessage: "잠시 기다려주십시오 .",
invalidMessage: "입력 된 데이터가 잘못되었습니다.",
height: "auto",
width: "100%",
filtering: in_filtering,
editing: in_editing,
inserting: in_inserting,
sorting: in_sorting,
paging: in_paging,
pageLoading: true,
autoload: in_autoload,
pageSize: in_pageSize,
pageButtonCount: in_pageButtonCount,
controller: now_db,
fields: in_fields,
rowClass: onrowClass,
onItemInserting: inonItemInserting,
onItemUpdating: inonItemUpdating,
onItemInserted:function(){grid_id.jsGrid("loadData");},
});
now_table_custom.on("click", function() {
var $cb = $(this);
grid_id.jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
});
now_pager.on("change", function() {
var page = parseInt($(this).val(), 10);
grid_id.jsGrid("option", "pageSize", page);
grid_id.jsGrid("refresh");
});
}jsgrid로 한페이지에 다수의 그리드를 생성 관리할수 있게 되었습니다.
<div id="jsGrid"></div> //기본 예제 그리드 id입력되는 값들을 기본 디폴드 값으로 분리한 선언부를 만들어 놓습니다.
//조각 조각 입력해서 그리드 생성하기..
var sms_js_size = [];
sms_js_size["width"]="100%";
sms_js_size["height"]="auto";
var sms_basic_setting= [];
sms_basic_setting["autoload"]=true; //화면 로딩시 데이터를 불러옴.
sms_basic_setting["confirmDeleting"]=true; //삭제시 정말 지울건지 물어봄.
sms_basic_setting["pagerContainer"] = null; //페이지 이동 위치 ..
sms_basic_setting["pageIndex"] = 1; //시작페이지 위치.. 기본 1페이지..
sms_basic_setting["pageSize"] = 15; //화면에 나타날 기본 줄수... 15개를 기본으로한다.
sms_basic_setting["loadIndication"] = true; // 제어기 조작 실행 중로드 표시를 표시할지 여부를 지정하는 부울 값.
sms_basic_setting["loadIndicationDelay"]= 500; //로드 표시를 표시하기 전의 지연을 ms 단위로 지정하는 정수 값
sms_basic_setting["loadShading"] = true; //표시를로드하는 동안 격자 내용 위에 오버레이 (셰이더)를 표시할지 여부를 지정하는 부울 값?
sms_basic_setting["updateOnResize"] = true;//윈도우 크기 변경 이벤트에서 격자를 새로 고칠 지 여부를 지정하는 부울 값
var sms_in_ting = [];
sms_in_ting["heading"]= true; //격자 머리글 표시 여부를 지정합니다.
sms_in_ting["filtering"]= true; // 필터 행 표시 여부를 지정
sms_in_ting["inserting"]= true; // 행 삽입 여부를 지정합니다.
sms_in_ting["editing"]= true; //편집이 허용되는지 여부를 지정합니다.
sms_in_ting["selecting"]= true; //마우스를 올리면 표 행을 강조 표시할지 여부를 지정합니다.
sms_in_ting["sorting"]= true; // 정렬 허용 여부를 지정합니다.
sms_in_ting["paging"]= true; // 페이지별로 데이터를 표시할지 여부
sms_in_ting["pageLoading"]= true; //부울 값은 페이지별로 데이터를로드할지 여부를 지정
var sms_in_row_function = [];
sms_in_row_function["rowClass"]=function (item, itemIndex) {};
sms_in_row_function["rowClick"]=function ( args ) {};
sms_in_row_function["rowDoubleClick"]=function ( args ) {};
sms_in_row_function["invalidNotify"]=function ( args ) {};
var sms_in_callback = [];
sms_in_callback["onDataLoading"]=function ( args ) {};
sms_in_callback["onDataLoaded"]=function ( args ) {};
sms_in_callback["onError"]=function ( args ) {};
sms_in_callback["onInit"]=function ( args ) {};
sms_in_callback["onItemInserting"]=function ( args ) {};
sms_in_callback["onItemInserted"]=function ( args ) {};
sms_in_callback["onItemUpdating"]=function ( args ) {};
sms_in_callback["onItemUpdated"]=function ( args ) {};
sms_in_callback["onItemDeleting"]=function ( args ) {};
sms_in_callback["onItemDeleted"]=function ( args ) {};
sms_in_callback["onItemInvalid"]=function ( args ) {};
sms_in_callback["onOptionChanging"]=function ( args ) {};
sms_in_callback["onOptionChanged"]=function ( args ) {};
sms_in_callback["onPageChanged"]=function ( args ) {};
sms_in_callback["onRefreshing"]=function ( args ) {};
sms_in_callback["onRefreshed"]=function ( args ) {};function get_JsSize()
{
var return_obj = {};
//copyArray(return_obj,sms_js_size);
for (var key in sms_js_size )
{
return_obj[key]=sms_js_size[key];
}
return return_obj;
}
function get_JsBasic_setting()
{
var return_obj = {};
//copyArray(return_obj,sms_basic_setting);
for (var key in sms_basic_setting )
{
return_obj[key]=sms_basic_setting[key];
}
return return_obj;
}
function get_JsIn_tinge()
{
var return_obj = {};
//copyArray(return_obj,sms_in_ting);
for (var key in sms_in_ting )
{
return_obj[key]=sms_in_ting[key];
}
return return_obj;;
}
function get_JsIn_row_function()
{
var return_obj = {};
//copyArray(return_obj,sms_in_row_function);
for (var key in sms_in_row_function )
{
return_obj[key]=sms_in_row_function[key];
}
return return_obj;;
}
function get_JsIn_callback()
{
var return_obj = {};
//copyArray(return_obj,sms_in_callback);
for (var key in sms_in_callback )
{
return_obj[key]=sms_in_callback[key];
}
return return_obj;;
}분리됨 모듈라이브러리파일을 jsgrid가 사용되는 페이지에서 로드하여 줍니다.
페이지 부분에 들어가는 소스입니다.
<div id="jsGrid"></div> //그리드 위치 선언
자바스크립트 부분
$(document).ready(function(){
var db = {
loadData: function (filter) {
return $.ajax({
type: "POST",
headers : {
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST",
'X-CSRF-TOKEN': $("#csrf_token").val()
},
async: true,
url: getContextPath()+"/grid/select",
data: read_common_data("Appointment_Mapper.a2_list_all_select", filter),
error: function (request, status, error) {
alert('code:' + request.status + '\n' + 'message:' + request.responseText + '\n' + 'error:' + error);
}
});
}
};
window.db = db;
window.db.comcode = new Object();
window.db.comcode["mt_use"] = [
{ Name: "선택", Id: "" },
{ Name: "Y", Id: "Y" },
{ Name: "N", Id: "N" }
];이제 그리드 등 연결해 줍니다.
now_grid=$("#jsGrid");
now_pager= $("#pager");
now_table_custom=$(".config-panel input[type=checkbox]");
now_db = db;
/* 달력 */
jsGrid.fields.MySelectControlField = MySelectControlField;필드값을 설정해줍니다.
var fields = [
{ name: "idx", title:"번호", type:"number", width: 60 ,align: "center" , valueType: "number",readOnly: true},
{ name: "mdate", title:"게시일", type: "text", width: 100, align: "center" },
{ name: "title", title:"제목", type: "text", width: 300, align: "left" ,readOnly: true},
{ name: "dname", title:"구분", type: "text", width: 60, align: "left" ,readOnly: true},
{ title:"답변상태",width: 100 ,align: "center",
itemTemplate: function(_, item) {
var parent = $("<p>");
var $result_bt = $("<button>")
.addClass( "btn btn-blue btn_icon" )
.on("click", function() {
});
$result_bt.append( "답변완료" );
var $result_bt1=$(" <button>")
.addClass( "btn btn-lightblue btn_icon" )
.on("click", function() {
});
$result_bt1.append( "미답변" );
if(item.answer=='Y')
{
parent.append($result_bt);
}
else
{
parent.append($result_bt1);
}
return parent;
}},
{title:"답변메일",width: 100 ,align: "center",
itemTemplate: function(_, item) {
var parent = $("<p>");
var $result_bt = $("<button>")
.addClass( "btn btn-blue btn_icon" )
.on("click", function() {
email_send(item);
});
$result_bt.append( "보내기" );
if(item.memailsend=='Y')
{
parent.append("답장보냄");
}
else
{
parent.append("답장안함");
}
parent.append(item.memail);
parent.append($result_bt);
return parent;
}},
{ type: "MySelectControlField", selectButton: true, deleteButton:false, modeSwitchButton: false, editButton: false, width: 120 },
{ title:"공개상태",width: 100 ,align: "center",
itemTemplate: function(_, item) {
var parent = $("<p>");
var $result_bt = $("<button>")
.addClass( "btn btn-blue btn_icon" )
.on("click", function() {
});
$result_bt.append( "공개" );
var $result_bt1=$(" <button>")
.addClass( "btn btn-lightblue btn_icon" )
.on("click", function() {
});
$result_bt1.append( "미공개" );
if(item.always=='Y')
{
parent.append($result_bt);
}
else
{
parent.append($result_bt1);
}
return parent;
}},
{ title:"공개삭제",width: 100 ,align: "center",
itemTemplate: function(_, item) {
var parent = $("<p>");
var $result_bt = $("<button>")
.addClass( "btn btn-blue btn_icon" )
.on("click", function() {
naver_send_w(item);
});
$result_bt.append( "공개" );
var $result_bt1=$(" <button>")
.addClass( "btn btn-lightblue btn_icon" )
.on("click", function() {
naver_send_d(item);
});
$result_bt1.append( "삭제" );
parent.append($result_bt,' ',$result_bt1);
return parent;
}}
];다음은 인서트나 업데이트시 체크되야할부분과 업데이트인서트 기능을 설정해줍니다.
var onItemInserting = function(args) {
// cancel insertion of the item with empty 'name' field
f_values_chack(args);
}
var onItemUpdating = function(args) {
// cancel insertion of the item with empty 'name' field
f_values_chack(args);
}
var in_filtering=true;
var in_editing=false;
var insert_row=false;
initGrid(now_grid,fields,true,15,10,in_filtering,insert_row,in_editing,true,true,now_pager,now_table_custom,now_db,OnrowClass,onItemInserting,onItemUpdating);여기서 f_values_chack함수를 만들어줍니다.
var f_values_chack = function(args)
{
if(args.item.mt_code === "") {
jQuery.each( args.grid.fields, function( key, value ) //반복
{
if(value.name==="mt_code")
{
showmessage("경고",value.title+"을(를) 입력값이 누락되었습니다. 확인해 주세요.",2000,'error');
}
});
args.cancel = true;
return;
}
if(args.item.mt_code_value === "") {
jQuery.each( args.grid.fields, function( key, value ) //반복
{
if(value.name==="mt_code_value")
{
showmessage("경고",value.title+"을(를) 입력값이 누락되었습니다. 확인해 주세요.",2000,'error');
}
});
args.cancel = true;
return;
}
}실행해보면 나옵니다.
'SPRING FRAMEWORK' 카테고리의 다른 글
| 인스타그램 사진 가져오기 (2) | 2020.01.17 |
|---|---|
| 이클립스 배경색 변경하기 (0) | 2020.01.08 |
| 카페24 SMS 스프링에서 보내기 restTemplate 활용하기 (0) | 2019.12.13 |
| 스프링 모바일 웹 제작하기 (0) | 2019.11.04 |
| spring boot + mybatis + mysql + multi db 사용하기 (0) | 2019.05.17 |
은호아빠
여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#