jqgrid 선택된 행 기준으로 행 삽입하기

행 삽입 버튼을 눌렀을 때 현재 그리드에 선택된 행에 대해서 위, 아래 선택 후 행 삽입을 하는 기능을 구현하게 될 일이 있어서 정리해봤습니다.

첫번째로 삽입할 수 있는 버튼을 넣어줍니다.

위쪽에 있는 plus 버튼입니다.

var myGrid = jQuery("#dept_table");
myGrid.jqGrid('navButtonAdd', "#dept_nav", {
    caption: "",
    buttonicon: "ui-icon-plus",
    title: "행 삽입",
    onClickButton: function () {
        newId = $("#item_info_table").getGridParam("reccount") +1;
        var datarow = {임의의 데이터},
        newId = $.jgrid.randId();
        myGrid.addRowData(undefined, datarow, row_position(), $("#dept_table").getGridParam( "selrow" ))
    }
});

8번째 행에서 임의의 데이터를 넣어줍니다.

10번쨰 행에서 row_position() 이 부분이 중요했네요. $("#dept_table").getGridParam("selrow") 이건 현재 선택된 행의 id값을 반환합니다.

그럼 row_position() 함수를 만들어줘야겠죠 ?

function row_position(){
    var position = $('input:radio[name=row_position]:checked').val();
    return position;
}

간단합니다.  맨 위에 사진에서 보듯이 위 아래 체크박스가 있습니다. 체크박스 태그도 아래 첨부하겠습니다.

<form class="form-horizontal">
     <fieldset class="demo-switcher-1">
         <div class="form-group">
            <div class="col-md-10" style = "margin-left: 10px">
                <label class="radio radio-inline">
                    <input type="radio" class="radiobox" value = "before" name="row_positions" checked="checked">
                    <span>위</span>  
                </label>
                <label class="radio radio-inline">
                    <input type="radio" class="radiobox" value = "after" name="row_positions">
                    <span>아래</span> 
                </label>
            </div>
        </div>
     </fieldset>
 </form>    

부트스트랩적용하였습니다.

체크박스의 value 값이 before, after입니다. 그럼 이해가 되시겠죠 ?

이상 jqgrid 선택된 행 기준으로 행 삽입하는 jquery 였습니다.