[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.



 

전체 테스트 코드


블로그 이미지

미나미나미

,