2013-05-30 103 views
1

我有一個jqgrid,有幾行不可編輯。 我的問題是我想禁用非編輯行的inf ot的複選框。 現在我能夠讓行數據不可編輯,但複選框前面沒有禁用,可以點擊它來選擇在jqgrid中選擇不可編輯的行

我的代碼如下: 我使用JSON來傳遞數據:

內代碼這些行用於diable行,我通過內部的JSON'ReadOnly'的一些行。對於jqGrid的完整代碼如下:

beforeSelectRow: function(rowid, e) { 
      var grid = $('#list4'); 
      var data = grid.getRowData(rowid); 
      if (data.accessType == 'ReadOnly') { 
       $(#id).attr('disabled', true); 
       return false; 
      }else{ 
       return true; 
      } 


var dateoflaunchTxt = 'The launch date of a project refers to the first day when units are made available to prospective home-buyers (i.e. issue of the Option-to-Purchase) including private previews or any other occasion which may take place before the official launch of the project.'; 
var grid = $("#list4"); 
grid.jqGrid({ 
datastr: <%=jsonGridData%>, 
datatype: "jsonstring", 
height: 400, 
    colNames:['S No','Date of Launch','No of Units','Access Type'], 
    colModel:[ 
      {name:'id',index:'id', width:40,align:"center", sorttype:"int"}, 
      {name:'dateofLaunch',index:'dateofLaunch',align:"center", width:75, sorttype:"date",sortable:true 
      ,editable:true , editoptions: { 
         dataInit: function (element) { 
          $(element).datepicker({ 
           dateFormat:"dd/mm/yy", 
           onSelect: function(dateText, inst) { 
            var $input = inst.input; // the datepicker input 
            var $row = $input.parents("tr"); 
            $("#list4").jqGrid('saveRow',$row.attr("id"), false); 
            } 
           }); 

         } 
        }}, 
      {name:'noOfUnits',index:'noOfUnits', align:"center",width:40, sorttype:"integer",sortable:true,editable:true}, 
      {name:'accessType',index:'accessType', align:"center",width:40, sortable:false,editable:false} 
    ], 
     jsonReader : { 
      root: "rows", 
      page: "page", 
      total: "total", 
      records: "records", 
      repeatitems: true, 
      cell: "cell", 
      id: "id" 
    }, 
     editurl: "clientArray", 
     multiselect: true, 
     pagination:true, 
     pager: '#search', 
     rowNum: 15, 
     rowList: [5,10,15,30,45,60], 
     sortname: 'id', 
     sortorder: 'asc', 
     sortable:true, 
     viewrecords: true, 
     loadonce: true, 
     pgtext : "Page {0} of {1}", 
     emptyrecords:'No Records', 
     loadtext:'Loading ...', 
     showpage:true, 
     caption: "Launch Info", 
     headertitles: true, 
     cellEdit: true, 
     cellsubmit: 'clientArray', 
     beforeSelectRow: function(rowid, e) { 
      var grid = $('#list4'); 
      var data = grid.getRowData(rowid); 
      if (data.accessType == 'ReadOnly') { 
       $(#id).attr('disabled', true); 
       return false; 
      }else{ 
       return true; 
      } 
     },    
     loadComplete: function(){gridComplete(); 
     } 

}).jqGrid('navGrid','#pager', 
      {edit:false, add:false, del:false, search:false, refresh:true}); 
grid.setLabel ('dateofLaunch','','',{'title':dateoflaunchTxt}); 

jQuery("#list4").hideCol("id"); 
jQuery("#list4").hideCol("accessType"); 
$("#list4").jqGrid('setGridState','hidden'); 
$("#list4").jqGrid('setGridState','visible'); 
//$('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid'); 
jQuery("#list4").setGridWidth(500); 

function pickdates(id){ 
    jQuery("#"+id+"_dateofLaunch","#list4").datepicker({dateFormat:"dd-mm-yy", constrainInput: true}); 
} 

圖像:I have selected non-editable row, see i am allowed to check the checkbox but row is not highlighted, for editable rows it will be highlighted,

我選擇不可編輯的行,請允許我請選中該複選框,但行不突出,對編輯的行會​​被高亮

enter image description here

我要的是從所有非編輯的行前禁用此複選框,它應該爲可編輯的單位

啓用

感謝

+0

完成此操作的一種方法如下:查看生成的id(firefox - > Inspect Element)作爲複選框。很可能會有複選框ID的模式。現在,在所有行的loadComplete循環中獲取accessType列,如果行必須設置爲不可編輯,則獲取相應的複選框ID並使用jQuery隱藏該複選框ID。 – RRK

回答

0

增加了一個列(將其設置爲隱藏) 在爲JQ網格製作JSON數組數據時計算此隱藏字段的值。 基於這個隱藏列的值,我會在加載JQgrid時將行設置爲可編輯或不可編輯。

0

喜不使用jqGrid的 '多選' 中的jqGrid添加自己的列如下

{name:'my_clickable_checkbox',index:'my_clickable_checkbox',formatter: "checkbox", formatoptions: {disabled : false}}, 

onGridComplete:function(){ 
    //here enable or disable 'my_clickable_checkbox' column based on your condition 
}