[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.
전체 테스트 코드
'[jsgrid]' 카테고리의 다른 글
| [jsgrid] jsgrid 안에 데이터 가져오기 (0) | 2018.06.29 |
|---|---|
| [jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 데이터(아이템) 추가하기(insert item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 예제 기초 사용법 (0) | 2018.04.15 |
미나미나미