在jqgrid中选择不可编辑的行

时间:2013-05-30 08:01:18

标签: jquery jqgrid jqgrid-formatter

我有一个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

我想要的是在所有不可编辑的行的前面禁用此复选框,并且应该为可编辑的单位启用此复选框

由于

2 个答案:

答案 0 :(得分:0)

您好不要使用jqGrid'multiselect'添加您自己的列,如下所示

  {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
}

答案 1 :(得分:0)

在jqgrid中添加了一个列(将其设置为隐藏) 在为JQ网格制作JSON数组数据时计算此隐藏字段的值。 根据此隐藏列的值,我会在加载JQgrid时将行设置为可编辑或不可编辑。