1. 程式人生 > >JqGrid之指定單元格可編輯-yellowcong

JqGrid之指定單元格可編輯-yellowcong

JqGrid中,設定指定單元格,官網是沒有API的,cell的編輯和不可以編輯,是由not-editable-cell和edit-cell兩個樣式進行控制的,我們需要在onCellSelect的方法的時候,進行判斷是否是我們自己需要編輯的行和列

下圖可以看見,可編輯和不可編輯,是由兩個樣式進行控制的

這裡寫圖片描述

核心的程式碼,這個地方是控制點選的時候,單元格是否可以進行編輯操作

onCellSelect:function(rowid,iCol,cellcontent,event){
            //札回數
            var strBiddingNo = $("#kaisu"
).val().substring($("#kaisu").val().length-1) ; if(strBiddingNo != undefined){ if((iCol-2) != strBiddingNo){ //當是不是自己想要的列,加上not-editable-cell 樣式,就不可以編輯了 $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'not-editable-cell'); }else
{ //當是編輯的列,加上editable-cell 樣式,就可以編輯了 $('#gridRakuData #'+rowid+' td[aria-describedby="gridRakuData_kngaku'+strBiddingNo+'"]').removeClass('not-editable-cell'); $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'edit-cell'); } } }

Demo的程式碼

$("#gbox_gridRakuData").remove();
    $("#wfgm1070RakuData").append("<table id='gridRakuData'></table>");
    $('#gridRakuData').jqGrid({
        formatter : {
             integer : {thousandsSeparator: ",", defaultValue: ""},
        },
        data: dataList,
        datatype:"local",

        cellEdit:girdEditDistable, //CELL EDIT ABLE
        cellsubmit:'clientArray',
        colNames:colNames,
        colModel:colModel,
        width:gridWidth,
        height:gridHeight,
        scrollOffset:0,
        rowNum:dataList.length,
        regional:'ja',
        beforeSelectRow: function(rowid, e){
            return false;
        },
        onSelectRow: function(id) {
        //  var curRowData = $("#gridRakuData").jqGrid('getRowData', id);
            //$("#gridRakuData").jqGrid("setSelection", id,false);
        },
        ondblClickRow: function(id) {
        },
        onCellSelect:function(rowid,iCol,cellcontent,event){
            //札回數
            var strBiddingNo = $("#kaisu").val().substring($("#kaisu").val().length-1) ;
            if(strBiddingNo != undefined){
                if((iCol-2) != strBiddingNo){
                    $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'not-editable-cell');
                }else{
                    $('#gridRakuData #'+rowid+' td[aria-describedby="gridRakuData_kngaku'+strBiddingNo+'"]').removeClass('not-editable-cell');
                    $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'edit-cell');
                }
            }
        },beforeSelectRow(rowid, e){
            return false;
        }
    });