jqxgrid에는 각 컬럼들에 여러가지 속성값을 지정해 줄 수 있다.
또한 grid 전체에 일괄 적용할 수 있는 속성값들도 존재한다.
전체적으로 json 형태의 구조를 띄고 있지만 [CSS의 속성명 : 속성값] 처럼 생각하면 더 이해하기 쉽다.
Example
html
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
<div style="margin-top: 30px;">
</div>
</div>
javascript
<script>
$(document).ready(function () {
var data = '[{ "name": "홍길동", "age": "23", "address": "서울 강남구","phone": "010-1234-XXXX", "birthday": "1990-02-05","allowance": 5000}, { "name": "이몽룡", "age": "18", "address": "서울 도봉구","phone": "010-9999-XXXX", "birthday": "1995-06-10","allowance": 20000}, { "name": "성춘향", "age": "18", "address": "서울 중랑구","phone": "010-1593-XXXX", "birthday": "1995-08-23","allowance": 12000}, { "name": "김흥부", "age": "32", "address": "서울 동대문구","phone": "010-2854-XXXX", "birthday": "1984-07-11","allowance": 8000}, { "name": "박놀부", "age": "35", "address": "서울 강서구","phone": "010-4675-XXXX", "birthday": "1982-05-22","allowance": 35000}, { "name": "심청이", "age": "21", "address": "서울 동작구","phone": "010-8948-XXXX", "birthday": "1991-11-25","allowance": 15000}]';
// prepare the data
var source = {
datatype: "json",
datafields: [{
name: 'name',
type: 'string'
},
{
name: 'age',
type: 'int'
},
{
name: 'address',
type: 'string'
},
{
name: 'phone',
type: 'string'
},
{
name: 'birthday',
type: 'date'
},
{
name: 'allowance',
type: 'number'
}
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: '100%', //너비설정
height: '300', //높이설정
source: dataAdapter, // 데이터 연결
sortable: true, // 정렬 여부
filterable: true, // 열 필터(검색)
showstatusbar: true, // 상태바 표시 여부
columnsresize: true, // 열 너비 조정 가능 여부
theme: 'energyblue', // 테마 설정
columns: [{
text: '이름',
datafield: 'name',
width: "10%"
},
{
text: '나이',
datafield: 'age',
width: "10%"
},
{
text: '주소',
datafield: 'address',
width: "20%"
},
{
text: '전화번호',
datafield: 'phone',
width: "20%"
},
{
text: '생일',
datafield: 'birthday',
cellsformat: "yyyy-MM-dd",
width: "20%"
},
{
text: '용돈',
datafield: 'allowance',
cellsformat : 'd',
cellsalign: 'right',
width: "20%"
}
]
});
});
</script>
컬럼의 헤더부분을 한번클릭 하면 오름차순, 두번클릭 하면 내림차순, 세번클릭 하면 기본상태 정렬이 된다.
또한 컬럼의 너비를 자유롭게 변경이 가능하며, 컬럼 헤더에 마우스오버가 되었을 시 보이는 세줄표시를 클릭하면 다양한 조건의 범위 검색이 가능하다.
만약 여러 사람이 사용하는 메뉴에서 gird에서 보여줘야 하는 컬럼이 너무 많을 경우에는
사용자가 원하는 컬럼만 보여주고 숨길 수 있는 기능을 사용할 수 있다.
응용에 따라 사용자의 권한에 따라 보여지는 데이터도 다르게 할 수 있다.
Example
html
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width:100%">
<div id="jqxgrid">
</div>
<div style="margin-top: 20px" id="jqxlistbox">
</div>
</div>
javascript
$(document).ready(function () {
var data = '[{ "name": "홍길동", "age": "23", "address": "서울 강남구","phone": "010-1234-XXXX", "birthday": "1990-02-05","allowance": 5000}, { "name": "이몽룡", "age": "18", "address": "서울 도봉구","phone": "010-9999-XXXX", "birthday": "1995-06-10","allowance": 20000}, { "name": "성춘향", "age": "18", "address": "서울 중랑구","phone": "010-1593-XXXX", "birthday": "1995-08-23","allowance": 12000}, { "name": "김흥부", "age": "32", "address": "서울 동대문구","phone": "010-2854-XXXX", "birthday": "1984-07-11","allowance": 8000}, { "name": "박놀부", "age": "35", "address": "서울 강서구","phone": "010-4675-XXXX", "birthday": "1982-05-22","allowance": 35000}, { "name": "심청이", "age": "21", "address": "서울 동작구","phone": "010-8948-XXXX", "birthday": "1991-11-25","allowance": 15000}]';
// prepare the data
var source = {
datatype: "json",
datafields: [
{name: 'name',type: 'string'},
{name: 'age',type: 'int'},
{name: 'address',type: 'string'},
{name: 'phone',type: 'string'},
{name: 'birthday',type: 'date'},
{name: 'allowance',type: 'number'}
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: '100%',
height: '300',
source: dataAdapter,
sortable: true,
filterable: true,
showstatusbar: true,
columnsresize: true,
theme: 'energyblue',
columns: [
{text: '이름',datafield: 'name',width: "10%"},
{text: '나이',datafield: 'age',width: "10%"},
{text: '주소',datafield: 'address',width: "20%"},
{text: '전화번호',datafield: 'phone',width: "20%"},
{text: '생일',datafield: 'birthday',cellsformat: "yyyy-MM-dd",width: "20%"},
{text: '용돈',datafield: 'allowance',cellsformat : 'd',cellsalign: 'right',width: "20%"}
]
});
var listSource = [
{ label: '이름', value: 'name', checked: true },
{ label: '나이', value: 'age', checked: true },
{ label: '주소', value: 'address', checked: true },
{ label: '전화번호', value: 'phone', checked: true },
{ label: '생일', value: 'birthday', checked: true},
{ label: '용돈', value: 'allowance', checked: true}
];
$("#jqxlistbox").jqxListBox({ source: listSource, height: 200, checkboxes: true });
$("#jqxlistbox").on('checkChange', function (event) {
$("#jqxgrid").jqxGrid('beginupdate');
if (event.args.checked) {
$("#jqxgrid").jqxGrid('showcolumn', event.args.value);
}
else {
$("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
}
$("#jqxgrid").jqxGrid('endupdate');
});
});
출처 : https://pjmcoding.tistory.com/
'Frontend > jQuery' 카테고리의 다른 글
[jQuery] jqxgrid Cell Edit / Validation (0) | 2022.10.07 |
---|---|
[jQuery] jqxgrid Select / click Event (0) | 2022.10.07 |
[jQuery] jqxgrid Grouping (0) | 2022.10.07 |
[jQuery] jqxgrid 집계데이터 (Aggregates 속성) (2) | 2022.10.07 |
[jQuery] jqxgrid 기본구조 (0) | 2022.10.07 |