[ javascript ] jqgird 사용법

function changeCode(tar){

var code1 = $(tar).val();

if(code1 == "G211"){

$("#inMoney").val("${groupBean.mnthFee}");

$("#bankComment").val("회비");

}else if(code1 == "G212"){

$("#inMoney").val("${groupBean.groupFee}");

$("#bankComment").val("가입비");

}else{

$("#inMoney").val(0);

}

}

var updateDialog = {

    url: '<c:url value="/srvc/group/alterBankAjax.phy"/>'

    , closeAfterAdd: true

    , closeAfterEdit: true

    ,closeOnEscape:true

    , modal: true

    , onclickSubmit: function (params) {

        var ajaxData = {};

        var list = $("#grid1");

        var selectedRow = list.getGridParam("selrow");

        rowData = list.getRowData(selectedRow);

        ajaxData = { dirId: rowData.dirId ,groupCode : "${groupBean.groupCode}"};

        return ajaxData;

    }

    , afterShowForm: function (formId) {

        $("#inMoney").mask("(999) 999-9999");

    }

    , afterclickPgButtons: function (whichbutton, formid, rowid) {

        $("#inMoney").mask("(999) 999-9999");

    }

    , width: "300"

    , afterSubmit : function (resp, postdata)

    {

    var data1 = $.parseJSON(resp.responseText);

    alert(data1.msg1);

    if(data1.success){

    $("#asst_span").text(data1.msg2.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'));

    }

    return [true,"",""];

    }

};

function fixSearchOperators() {

    var $grid = $("#grid1"),

        columns = $grid.jqGrid ('getGridParam', 'colModel'),

        filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar");

    filterToolbar.find("th").each(function(index) {

        var $searchOper = $(this).find(".ui-search-oper");

        if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) {

            $searchOper.hide();

        }

    });

}

function startGrid(){

$("#grid1").jqGrid(

{

url : '<c:url value="/srvc/group/bankListGrid.phy"/>' // 데이터를 요청할 url

,postData:{

groupCode : "${groupBean.groupCode}"

}

,datatype : "json" // url을 통해 받아오는 데이터의 타입.

,mtype : "post" // method type

,height : 240 // 높이

,width: 1000

,jsonReader : {

page : "page", // 현제 페이지, 하단의 navi에 출력됨.

total : "total", // 총 페이지 수

root : "rows", // 실제 jqgrid에서 뿌려져야 할 데이터들이 있는 json 키값

records : "records", // 총 row 수

}

,gridComplete : function() {

// 성공적으로 그리드가 완료 되었을때 실행되는 부분

}

,loadError : function(xhr, status, error) {

// 데이터 로드 실패시 실행되는 부분

alert(error);

}

,loadComplete: function(){ // 다 불렀을때 이벤트

}

,onSelectRow: function(rowid, status, e) { //한행 클릭시

}

,onCellSelect: function(rowid, iCol){  // 셀 하나 클릭시

        var list = jQuery("#grid").getRowData(rowid);

        var a1 = list.name;

        var a2 = list.age;

}

   ,ondblClickRow: function (rowid, iRow, iCol, e) {

                    $("#grid1").editGridRow(rowid, updateDialog);

                }

,colNames : [ '코드', '회원','일시', '분류','분류','내용','입금', '출금'] // 컬럼명

,colModel :

[

                   { name : 'bankNum',    index :"BANK_NUM",        width:30,   align:'center' ,key:true ,search:false} //유니크한 키있어야함

                   ,{ name : 'personName',     index :"PERSON_NAME",       width:80,  align:'left'  , editable: true

                    ,edittype:'select'

                    ,editoptions: {

                    dataUrl : '<c:url value="/srvc/group/loadPersonListAjax.phy?groupCode=${groupBean.groupCode}"/>'

                    ,buildSelect:function (data1){

                    var rtSlt = '<select name="personName">';

                    data1 = $.parseJSON(data1);

                    $.each(data1,function(i1,v1){

                    rtSlt += '<option value="' +v1.personName + '">' + v1.personName + '</option>';

                    });

                    rtSlt +='</select>';

                    return rtSlt;

                    }

                    }

                    ,editrules:{edithidden:true, required:true}

                   }

                   ,{ name : 'inDate',     index :"IN_DATE",       width:100,   align:'center', editable: true

                    ,search:true/* ,searchoptions: { sopt: ['eq', 'ne', 'cn']} */

                    , editoptions: {

                    dataInit: function(el) {

                    $(el).datetimepicker({

                       addSliderAccess: true

                       ,sliderAccessArgs: { touchonly: true }

                    ,timeFormat : "HH:mm"

                    ,dateFormat : "yy-mm-dd"

                    });

                    }

                    }

                    ,editrules:{edithidden:true, required:true}

                   }

                   ,{ name : 'tmp1',      index :"BANK_CODE",      width:80,   align:'left',search:false  , editable: false,editrules:{edithidden:true, required:true}

                   }

                   ,{ name : 'bankCode',      index :"BANK_CODE",  hidden:true,    width:80,   align:'left'  , editable: true,editrules:{edithidden:true, required:true}

                   ,edittype:'select'

                    ,editoptions: {

                    dataUrl : '<c:url value="/srvc/group/loadBankCodeListAjax.phy"/>'

                    ,buildSelect:function (data1){

                    var rtSlt = '<select name="bankCode">';

                    data1 = $.parseJSON(data1);

                    $.each(data1,function(i1,v1){

                    rtSlt += '<option value="' +v1.code + '">' + v1.codeName+ '</option>';

                    });

                    rtSlt +='</select>';

                    return rtSlt;

                    }

                    ,dataEvents: [

{ type: 'click', fn: function(e) {changeCode(this); } }

]

                    }

                    ,editrules:{edithidden:true, required:true}

                   }

                   ,{ name : 'bankComment', index :"BANK_COMMENT",  width:300,  align:'left',formatter:'file' ,sortable : true, editable: true,editrules:{edithidden:true, required:true}}

                   ,{ name : 'inMoney', index :"IN_MONEY",  width:80,   align:'right' , editable: true,formatter:'integer',editrules:{edithidden:true, required:false}}

                   ,{ name : 'outMoney', index :"OUT_MONEY",  width:80,   align:'right' , editable: true,formatter:'integer',editrules:{edithidden:true, required:false}}

                  // ,{ name : 'groupCode', index :"GROUP_CODE" , editable: true,hidden:true,editrules:{edithidden:false, required:true}}

           ]

,prmNames: { id: "bankNum" } //넘어갈 파라메터 이름 설정

,rowNum : 10 // 한 그리드에 표시될 데이터의 갯수

,rowList : [5,10,20,30]  //rowNum 선택기능

,multiselect : true // 다중 선택

,viewrecords: true //row숫자 보여주기

   ,sortable: true

   /*

   //여기부터 트리그리드 속성

   ,treeGrid: true

   ,treeGridModel: 'adjacency'

   ,treedatatype: 'json'

    ,treeReader: {

               level_field:        "rnum"

           }

   ,ExpandColumn: 'soc'

    */

   //,rownumbers : true

   ,loadonce:false //reload 여부

   ,sortorder: "desc"

   ,sortname : "IN_DATE"

   ,caption: "Transactional Bill"

,gridview:true  //처리속도를 빠르게 해준다. 시간측정시 절반가량 로딩시간 감소!!! 하지만 다음 모듈엔 사용할 수 없다!! ==> treeGrid, subGrid,

/*

//여기부터 그룹핑 옵션

,grouping:true

    ,groupingView : {

      groupField : ['id']

      }

   */

   //rownumWidth : 20,

,pager : jQuery('#pager1') // 페이지 컨트롤러 삽입

}

).navGrid("#pager1",{edit:true,add:true,del:true,search: true, refresh: true}

,updateDialog

,updateDialog

,updateDialog

,{

multipleSearch: true

,multipleGroup: false

,closeOnEscape: true

           ,closeAfterSearch: true

           ,groupOps: [ { op: "AND", text: "all" }]

           ,matchText: "match"

           ,sopt: ['cn']

}

);

jQuery("#grid1").jqGrid('filterToolbar',{

searchOperators : true

,searchOnEnter: false

,ignoreCase: true

});

fixSearchOperators();

/* $( "#gs_inDate" ).datepicker(

{dateFormat:"yy-mm-dd"}

); */

}

$(function() {

// Document is ready

$.jgrid.nav.addtext = "추가";

    $.jgrid.nav.edittext = "편집";

    $.jgrid.nav.deltext = "삭제";

    $.jgrid.nav.searchtext = "검색";

    $.jgrid.nav.refreshtext = "새로고침";

    $.jgrid.edit.addCaption = "로그추가";

    $.jgrid.edit.editCaption = "로그편집";

    $.jgrid.del.caption = "로그삭제";

    $.jgrid.del.msg = "정말 삭제하실거에요?";

startGrid();

});