[jsgrid] jsgrid 삭제(delete) 예제
1. jquery , jsgrid cdn으로 연결하기
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
2. body에서 div id 값으로 만들어주기
<div id="jsGrid"></div>
3. script 코드 넣어주기
- fileds에 {type : 'control'} 를 추가하기
$(function () {
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
data: clients, //아래에 있는 client 배열을 데이터를 받아서
// deleting : true,
fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Married", type: "checkbox", title: "Is Married" },
{ type : 'control'}
// { type : 'control' , editButton : false}
]
})
})
결과 화면 - 오른쪽에 수정이 가능한 연필 모양과 쓰레기통 모양에 삭제 버튼이 생긴다.
- 연필 모양에 수정 버튼이 필요 없는 경우 => editButton : false를 추가하기
fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Married", type: "checkbox", title: "Is Married" },
//{ type : 'control'} // 이럴 경우 연필 모양에 칼럼 수정과 삭제가 가능한 버튼이 생긴다.
{ type : 'control' , editButton : false}
]
결과 화면 - 쓰레기통 모양의 삭제 버튼만 생긴다.
* 자 이렇게 하면 jsgrid에서 삭제를 진행할 수 있다. 여기서 추가적인 질문!!!!!
Are you sure? ... Are you sure?... 한글 안되나요 ! 안되나요 ㅠㅠㅠ 한글을 되게 하소서..!
$(function () {
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
data: clients, //아래에 있는 client 배열을 데이터를 받아서
// deleting : true,
deleteConfirm: function(item) { // 아이템 삭제를 confirm 창을 만들수 있습니다.
return "아이템 삭제 " + item.Name + "를 삭제하시겠습니까?";
},
fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Married", type: "checkbox", title: "Is Married" },
//{ type : 'control'} // 이럴 경우 연필 모양에 칼럼 수정과 삭제가 가능한 버튼이 생긴다.
{ type : 'control' , editButton : false}
]
})
})
결과 화면 - 쓰레기통 모양의 삭제 버튼만 생긴다.
테스트 화면 내용
See the Pen jsgrid2 by Nami (@NamuNami) on CodePen.
전체 테스트 코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<title>테스트 페이지</title>
</head>
<body>
<div id="jsGrid"></div>
<script>
$(function () {
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
data: clients, //아래에 있는 client 배열을 데이터를 받아서
// deleting : true,
deleteConfirm: function (item) { // 아이템 삭제를 confirm 창을 만들수 있습니다.
return "아이템 삭제 " + item.Name + "를 삭제하시겠습니까?";
},
fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Married", type: "checkbox", title: "Is Married" },
//{ type : 'control'} // 이럴 경우 연필 모양에 칼럼 수정과 삭제가 가능한 버튼이 생긴다.
{ type: 'control', editButton: false }
]
})
})
var clients = [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
</script>
</body>
</html>