引用:jqgrid:如何根据所选行中的列值设置工具栏选项

时间:2013-03-30 22:07:45

标签: jqgrid

我的问题是http://goo.gl/f0Boc 代码对我来说很好,但是现在我想在单元格中的值为“是”或“否”时启用/禁用“编辑按钮”。

在这个例子中写道:

  

//您可以使用getCell或getRowData来检查

的包含      

//选择的行来决定该行是否可编辑

我需要解释如何更改代码,以便代码与jqGrid('getCell',rowid,'cellContent')一起运行?

我需要的是如果cellContent为“Yes”,则禁用“Edit-Button”。

提前感谢您的努力,

最好的问候

斯蒂芬

<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({ 
    url:'example.php', 
    datatype: 'xml',
    mtype: 'GET',
    colNames:['User ID','Name', 'Firstname','CDS-ID','E-mail','Password', 'Registration
                  Date','Account Activated', 'Account Activation Date', 'Role'],
    colModel :[ 
               {name:'idUser_registration', index:'idUser_registration', width:55,
                  editable:true, editoptions{readonly:true},search:true}, 
...
               {name:'account_activated', index:'account_activated', width:150, align:'right',
                      edittype:'checkbox',editoptions: { value:"Yes:No" }, editable:true, 
                          search:true}, 
... ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'idUser_registration',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    caption: 'My grid',
    editurl: 'example2.php',
    beforeSelectRow: function(rowid) {
                       var selRowId = $(this).getGridParam('selrow'),
                       celValue = $(this).getCell('getCell', selRowId, 'list_account_activated'),
                       tr = $("#"+rowid);
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
                       if (selRowId !== rowid && !tr.hasClass('not-editable-row')) {
// eneble the "Edit" button in the navigator
                       $("#edit_" + this.id).removeClass('ui-state-disabled');
                       $("#del_" + this.id).removeClass('ui-state-disabled');
                       } 
                      else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
                       $("#edit_" + this.id).addClass('ui-state-disabled');
                       $("#del_" + this.id).addClass('ui-state-disabled');
                       }
return true; // allow selection or unselection
},
loadComplete: function() {
                          // just one example how to mark some rows as non-editable is to add
                          // some class like 'not-editable-row' which we test in beforeSelectRow
                          $("tr.jqgrow:even",this).addClass('not-editable-row');
                          }
}).jqGrid('navGrid','#pager',
{}, //options
{closeAfterEdit:true,mtype:'GET',editCaption: "Activate
Account",height:400,reloadAfterSubmit:true },
{reloadAfterSubmit:false}, // del options
{} // search options
);
$("#edit_").click(function() {
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{}); 
});
$("#del_").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('delGridRow',gr,{mtype:'GET',reloadAfterSubmit:true});
});
}); 
</script>

1 个答案:

答案 0 :(得分:0)

我为您修改了引用的演示。代码的主要部分如下

onSelectRow: function (rowid) {
    var thisId = $.jgrid.jqID(this.id),
        isCompleted = $(this).jqGrid("getCell", rowid, "isCompleted");

    // you can use getCell or getRowData to examine the contain of
    // the selected row to decide whether the row is editable or not
    if (isCompleted !== "Yes") {
        // eneble the "Edit" button in the navigator
        $("#edit_" + thisId).removeClass('ui-state-disabled');
        $("#del_" + thisId).removeClass('ui-state-disabled');
    } else {
        // unselect previous selected row
        // disable the "Edit" and "Del" button in the navigator
        $("#edit_" + thisId).addClass('ui-state-disabled');
        $("#del_" + thisId).addClass('ui-state-disabled');
    }
}

您可以看到新的演示here