컬럼에 적용된 sortable : true의 쓸모가 궁금해서 검색해봤다.
그러니까... 행을 클릭하면 정렬되는 것이었음.
아래 예제는 공식문서에 있는 소스코드.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: grid/12</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
$('#grid').w2grid({
name: 'grid',
show: { lineNumbers: true },
columns: [
{ field: 'lname', text: 'Last Name', size: '30%', sortable: true },
{ field: 'fname', text: 'First Name', size: '30%', sortable: true },
{ field: 'email', text: 'Email', size: '40%', sortable: true },
{ field: 'sdate', text: 'Start Date', size: '90px', sortable: true }
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'motzart@gmail.com', sdate: '4/3/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'franson@gmail.com', sdate: '2/3/2012' },
{ recid: 4, fname: 'Frank', lname: 'Ottie', email: 'ottie@gmail.com', sdate: '4/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'ksilver@gmail.com', sdate: '5/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'fgotya@gmail.com', sdate: '4/4/2012' },
{ recid: 7, fname: 'Dimas', lname: 'Welldo', email: 'dimas@gmail.com', sdate: '7/3/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'bahhtee@gmail.com', sdate: '4/3/2012' },
{ recid: 9, fname: 'Ottie', lname: 'Welldo', email: 'doe@gmail.com', sdate: '4/3/2012' },
{ recid: 10, fname: 'Thomas', lname: 'Bahh', email: 'jane@gmail.com', sdate: '9/4/2012' },
{ recid: 11, fname: 'Kolya', lname: 'Doe', email: 'follow@gmail.com', sdate: '4/3/2012' },
{ recid: 12, fname: 'Martha', lname: 'Motzart', email: 'joe@gmail.com', sdate: '4/3/2012' }
]
});
});
</script>
</body>
</html>
공식 :
https://w2ui.com/web/demos/#/grid/12
w2ui Demos
w2ui.com
728x90
300x250