jQuery
[ jqxGrid ]
숑숑이~~
2021. 11. 18. 17:50
jqxGrid Doc
jQuery Grid widget - Getting Started documentation
Getting Started jqxGrid The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing. Grid Features Data Binding - our Grid supports the follow
www.jqwidgets.com
jQWidgets 사이트
jQWidgets UI for Angular, Vue, React, Web Components, Javascript
Advanced JavaScript & HTML5 UI Framework jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS and JavaScript. jQWidgets enables responsive w
www.jqwidgets.com
jqxGrid 사용을 위한 jQWidgets 라이브러리 다운받기
https://www.jqwidgets.com/download/
Download jQuery Widgets SDK - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets
Non-Commercial Use This download contains a fully functional version of jQWidgets with compressed and watermarked Javascript files and examples. It is suitable for everyone who wishes to use jQWidgets for non-commercial purposes. If you agree to use jQWidg
www.jqwidgets.com
jqxGrid 사용을 위한 라이브러리 추가하기.
jQuery 추가하기.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>jqwidgets 추가하기.
<!-- jqxGrid 사용을 위한 jqwidgets추가 -->
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css? " type="text/css"/>
<link rel="stylesheet" href="./jqwidgets/styles/jqx.light.css " type="text/css"/>
<script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.storage.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdate.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxsplitter.js"></script>경로는 자신의 개발환경에 맞게 수정해야 한다.
그리드가 될 HTML 만들기.
<div id="jqxgrid"></div>
그리드 생성하기.
$("#jqxgrid").jqxGrid( settings() );
그리드 설정값 구성하기.
function settings(){
return {
columns: global_columns , // 컬럼 설정
source: global_dataAdapter , // 데이터 설정
/* 디자인 */
theme: 'office', // 테마
width: '100%', // 넓이
height: '100%', // 높이
/* 기능 */
sortable: true, // 정렬기능
filterable: true, // 검색기능
columnsresize: true, // 컬럼크기 조절기능
showfilterrow: true,
altrows: true,
};
}global_columns는 전역분다. 컬럼 추가 등 동적으로 컬럼을 제어하기 위해서 전역변수로 빼두우었다.
global_source는 전역변수다. 그리드의 값을 변경할 때 사용하기 위해서 전역변수로 빼두었다.
컬럼 설정하기.
let global_columns = [
{ text: '이름', datafield: 'name', width: 100, align: 'center', cellsalign: 'center' },
{ text: '나이', datafield: 'age', width: 100, align: 'center', cellsalign: 'center', cellsformat: "d0" },
];text : 컬럼명
datafield : 매핑할 데이터명
width : 넓이
align : 컬럼명 정렬
cellsalign : 값 정렬
cellsformat : 값 표시 형식. ("d0"는 천단위 끊기)
데이터 설정하기.
let global_source = {
localdata: [],
datatype: "array"
};
let global_dataAdapter = new $.jqx.dataAdapter(global_source);
그리드 초기화 하기.
$("#jqxgrid").jqxGrid('clear');
$('#jqxgrid').jqxGrid('clearselection');clearselection은 row 선택을 해제한다.
그리드에 값 넣기.
global_source.localdata = [
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
];
global_dataAdapter.dataBind();
모든 row의 값 가져오기.
let rows = $("#jqxgrid").jqxGrid('getrows');
선택된 row의 값 가져오기.
그리드 설정값에 row선택할 수 있게 설정하기.
// settings 함수 부분에 추가한다.
selectionmode: 'multiplerows' ,selectionmode에는 이외에도 여러가지 옵션을 사용할 수 있다.
'none' : 선택할 수 없음.
'singlerow' : 한줄 선택가능.
'multiplerows' : 여러줄 선택가능.
'multiplerowsextended' : 드래그로 여러줄 선택가능.
'checkbox' : 체크박스형태로 선택가능.
선택된 여러개의 row값 가져오기.
var selectedrowindexes = $('#jqxgrid').jqxGrid('selectedrowindexes');
var selected_rows = [];
selectedrowindexes.forEach(function(element){
selected_rows.push( $('#jqxgrid').jqxGrid('getrowdata', element) );
});선택된 1개의 row값 가져오기.
var selectedrowindex = $('#jqxgrid').jqxGrid('selectedrowindex');
var data = $('#jqxgrid').jqxGrid('getrowdata', selectedrowindex );
합계 Row 만들기.
그리드 설정값에 합계 낼 수 있게 설정하기.
// settings 함수 부분에 추가한다.
showstatusbar: true, // 아래쪽 상태바 활성화
statusbarheight: 30, // 아래쪽 상태바 크기 조절
showaggregates: true, // 컬럼에 통계 보여주는 기능 허럭하기.컬럼 디자인에 설정한다.
let global_columns = [
{ text: '나이' , datafield: 'age' , width: 100 , aggregates: ['sum'] } ,
{ text: '점수' , datafield: 'age' , width: 100 , aggregates: ['sum'] } ,
]aggregates 부분이 합계 설정을 하는 곳이다.
sum은 합계이고 count는 row 개수이다.
컬럼 동적으로 생성하기.
컬럼 1개 추가하기.
global_columns.push({ text: '주소'+element , datafield: 'addr'+element , width: 60 });
$('#jqxgrid').jqxGrid({columns: global_columns});컬럼 여러개 추가하기.
let arr = [ 1 , 2 , 3 ];
arr.forEach(function(element){
global_columns.push({ text: '주소'+element , datafield: 'addr'+element , width: 60 });
});
$('#jqxgrid').jqxGrid({columns: global_columns});
$("#jqxgrid").jqxGrid('clear'); // 초기화 해주면 변경된 컬럼을 확인할 수 있다.
글자색 변경하기.
색 스타일 지정하기.
<style>
.green {
color: black\9;
background-color: #b6ff00\9;
}
.yellow {
color: black\9;
background-color: yellow\9;
}
.red {
color: black\9;
background-color: #e83636\9;
}
.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #b6ff00;
}
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: yellow;
}
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #e83636;
}
</style>컬럼 설정에 랜더함수 추가하기.
let global_columns = [
{ text: '이름', datafield: 'name', width: 100 , cellsrenderer: cellsrenderer },
{ text: '나이', datafield: 'age', width: 100 , cellsrenderer: cellsrenderer },
];랜더함수 선언하기.
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties ) {
// column색깔 변경하기.
if ( columnfield === 'age' ) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign
+ '; color: #0808bd;">' + value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
+ '</span>';
};
row색깔 변경하기.
if ( row % 2 === 1 ) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">'
+ value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
+ '</span>';
};
};
글자색 변경하기.
색 스타일 지정하기.
<style>
.green {
color: black\9;
background-color: #b6ff00\9;
}
.yellow {
color: black\9;
background-color: yellow\9;
}
.red {
color: black\9;
background-color: #e83636\9;
}
.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #b6ff00;
}
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: yellow;
}
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #e83636;
}
</style>컬럼 설정에 랜더함수 추가하기.
let global_columns = [
{ text: '이름', datafield: 'name', width: 100 , cellsrenderer: cellsrenderer },
{ text: '나이', datafield: 'age', width: 100 , cellsrenderer: cellsrenderer },
];랜더함수 선언하기.
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties ) {
// column색깔 변경하기.
if ( columnfield === 'age' ) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0808bd;">'
+ value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
+ '</span>';
};
// row색깔 변경하기.
if ( row % 2 === 1 ) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">'
+ value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
+ '</span>';
};
};
Row 선택 이벤트 사용하기.
$('#jqxGrid').on('rowselect', function (event){
var args = event.args;
var rowBoundIndex = args.rowindex;
var rowData = args.row;
});
Row 클릭 이벤트 사용하기
$('#jqxgrid').on('rowclick', function (event){
var args = event.args;
var boundIndex = args.rowindex;
var visibleIndex = args.visibleindex;
var rightclick = args.rightclick;
var ev = args.originalEvent;
});
기본 틀
가장 기본적인 내용만 추가한 코드이다. 위의 내용들을 추가해서 사용하면 된다.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jqxGrid 사용을 위한 jqwidgets추가 -->
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css? " type="text/css"/>
<link rel="stylesheet" href="./jqwidgets/styles/jqx.light.css " type="text/css"/>
<script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.storage.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdate.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxsplitter.js"></script>
</head>
<body>
<div id="jqxgrid"></div>
<script>
let global_columns = [
{ text: '이름', datafield: 'name', width: 100, align: 'center', cellsalign: 'center' },
{ text: '나이', datafield: 'age', width: 100, align: 'center', cellsalign: 'center', cellsformat: "d0" },
];
let global_source = {
localdata: [],
datatype: "array"
};
let global_dataAdapter = new $.jqx.dataAdapter(global_source);
$("#jqxgrid").jqxGrid( settings() );
function settings(){
return {
columns: global_columns , // 컬럼 설정
source: global_dataAdapter , // 데이터 설정
/* 디자인 */
theme: 'office', // 테마
width: '100%', // 넓이
height: '100%', // 높이
/* 기능 */
sortable: true, // 정렬기능
filterable: true, // 검색기능
columnsresize: true, // 컬럼크기 조절기능
selectionmode: 'multiplerows' ,
};
}
global_source.localdata = [
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
{ name:'이순신' , age:100 },
];
global_dataAdapter.dataBind();
</script>
</body>
</html>
반응형