2011-10-06 50 views
0

我正在用這些字段和功能創建一個新的jqgrid:jqGrid的。在編輯模式下禁用多重選擇

部署ID','Branch','Release Name','Client id','#of hosts','Comments' ,「操作

-I對TRUE多選選項。

-I具有編輯/每行

-I有我與ADD /搜索選項底部導航欄的刪除操作。

我的行動是: 當我添加一個新的記錄,我可以增加分支領域和評論只(那作品) 當我編輯記錄我只能修改COMMENT(的作品太)

我的問題是約MULTISELECT選項...

如果我點擊編輯按鈕,MULTISELECT是取消選中一切正常..意味着唯一的評論被允許修改。

如果該行是在複選欄中選擇的分會場變成可編輯。

此外,我想阻止其他操作,而我編輯一個特別行(意味着不能夠選擇/取消編輯/刪除另一行)

有人可以幫助我做到這一點?

感謝

PS:我是用不同的代碼試圖/例子我發現這裏沒有成功。我現在不公佈它,以避免更多混淆。

var lastSel; 
    $(function(){ 

$("#list").jqGrid({ 

    data: mydata, 
    datatype: "local", 

    colNames:['Deployment id','Branch', 'Release Name','Client id','# of hosts','Comments','Actions'], 
    colModel:[ 
     {name:'deployment_id',index:'deployment_id',align:"right", sorttype:"int", width:120},  
     {name:'branch',index:'branch',align:"center", formatter:branchColor,editable: true,edittype:"select",editrules:{required:true},editoptions:{value:"option 1:option1;option2:option2"}},   
     {name:'release_name',index:'release_name',align:"center"},  
     {name:'client_id',index:'client_id',align:"right", sorttype:"int", width:60}, 
     {name:'num_hosts',index:'num_hosts',align:"right", sorttype:"int", width:60}, 
     {name:'comments',index:'comments',align:"center", editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}, 
     {name:'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}} 
    ], 

     rowList : [20,30,50], 

     pager: '#pager', 
     sortname: 'deployment_id', 
     viewrecords: true, 
     recordpos: 'right',  
     sortorder: "asc", 
     sortable: true, 
     multiselect: true, 
     shrinkToFit :true, 
     viewrecords: true, 


    onSelectRow: function(id){ 
     //alert("id:"+id); 
     if (id == null) { 
         id = 0; 
             if(id && id!==lastSel){ 

              //$('#list').jqGrid('restoreRow',lastSel); 
              //$('#list').jqGrid('editRow',id,false); 


              $("#jqg_list_" + id).attr("disabled","disabled"); 
              lastSel=id; 

             } 
        } 
        else { 


           var grId = $("#list").jqGrid('getGridParam','selrow'); 


    if(grId){ 
      $("#" + grId + "_branch").attr("disabled","disabled"); 
      $("#" + grId + "_branch").removeClass("editable"); 
     }         

        }     
      }, 



}); 


// to modify The tool bar on bottom 
$("#list").jqGrid('navGrid','#pager',{edit:false, edittitle: 'Modify a Deployment', 
             add:true, addtitle: 'Add a new Deployment', 
             del:true, deltitle: 'Delete a Deployment', 
             nav:{ addCaption: 'Columns'} 
             }, 
{// edit option 
beforeShowForm: function(form) { 
            $('#branch', form).attr("disabled","disabled"); 

            }, 

//seems to be is not qworking 
beforeSelectRow: function(rowid, e) { return false; },        
}, 

{// add option 
beforeShowForm: function(form) { 

            $('#branch option[value=""]', form).text('Select a branch') 
            $('#branch option[value=""]', form).attr("selected", "selected"); 
            $('#branch', form).attr("disabled",""); 



     var ids; 

    ids = $("#list").getGridParam('selarrrow'); 
    if(ids){   
       alert('array: ['+ids+']'); 
       alert('id in array[0]: '+ids[0]); 
     } 


            }, 
addCaption: "Add a Deploymet" 

}, 



{// delette option 

}, 
{// Search option 
    multipleSearch:true 
}, 
{// view option 

} 
); 

回答

0

最後我得到了答案測試了很多..我想分享..可能是有用的其他人。 基本上我刪除OnSelectRow功能和我修改formatoptions:{}添加onEdit

我添加的例子/ DEMO在此鏈路上運行的標籤:DEMO ONLINE

var mydata = [ 

    { 
    "branch": "PACS-3-3-1", 
    "comments": "migrated deployment", 
    "client_id": 27, 
    "deployment_id": 249, 
    "release_name": null, 
    "num_hosts": 12}, 

{ 
    "branch": "PACS-3-1-1", 
    "comments": "migrated deployment", 
    "client_id": 27, 
    "deployment_id": 144, 
    "release_name": null, 
    "num_hosts": 9}, 

{ 
    "branch": "PACS-2-4-1", 
    "comments": "2.6.1", 
    "client_id": 27, 
    "deployment_id": 78, 
    "release_name": null, 
    "num_hosts": 0}, 
{ 
    "branch": "PACS-2-4-2", 
    "comments": "PACS-2-4-2", 
    "client_id": 27, 
    "deployment_id": 46, 
    "release_name": null, 
    "num_hosts": 0} 

]; 

var lastSel; 


$("#list").jqGrid({ 

    data: mydata, 
    datatype: "local", 

    colNames: ['Deployment id', 'Branch', 'Release Name', 'Client id', '# of hosts', 'Comments', 'Actions'], 
    colModel: [ 
     { 
     name: 'deployment_id', 
     index: 'deployment_id', 
     align: "right", 
     sorttype: "int", 
     width: 120}, 
    { 
     name: 'branch', 
     index: 'branch', 
     align: "center", 
     editable: true, 
     edittype: "select", 
     editrules: { 
      required: true 
     }, 
     editoptions: { 
      value: "option 1:option1;option2:option2" 
     }}, 
    { 
     name: 'release_name', 
     index: 'release_name', 
     align: "center"}, 
    { 
     name: 'client_id', 
     index: 'client_id', 
     align: "right", 
     sorttype: "int", 
     width: 60}, 
    { 
     name: 'num_hosts', 
     index: 'num_hosts', 
     align: "right", 
     sorttype: "int", 
     width: 60}, 
    { 
     name: 'comments', 
     index: 'comments', 
     align: "center", 
     editable: true, 
     edittype: "textarea", 
     editoptions: { 
      rows: "2", 
      cols: "20" 
     }}, 
    { 
     name: 'myac', 
     width: 80, 
     fixed: true, 
     sortable: false, 
     resize: false, 
     formatter: 'actions', 
     formatoptions: { 
      keys: true, 
      //hace que se abra el popup, en lugar de inlineedit 
      //editformbutton: true, 
      onEdit: function(rowid) { 
       //alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything"); 
       $("#" + rowid + "_branch").attr("disabled", "disabled"); 
       $("#" + rowid + "_branch").removeClass("editable"); 
      } 
     }} 
    ], 

    rowList: [20, 30, 50], 

    pager: '#pager', 
    sortname: 'deployment_id', 
    viewrecords: true, 
    recordpos: 'right', 
    sortorder: "asc", 
    sortable: true, 
    multiselect: true, 
    shrinkToFit: true, 



// onSelectRow: function(id) { 
     //alert("id:"+id); 
     // if (id === null) { 
     //  id = 0; 
//   if (id && id !== lastSel) { 

       //$('#list').jqGrid('restoreRow',lastSel); 
       //$('#list').jqGrid('editRow',id,false); 

//    $("#jqg_list_" + id).attr("disabled", "disabled"); 
//    lastSel = id; 

//   } 
//  } 
//  else { 


//   var grId = $("#list").jqGrid('getGridParam', 'selrow'); 


//   if (grId) { 
//    $("#" + grId + "_branch").attr("disabled", "disabled"); 
//    $("#" + grId + "_branch").removeClass("editable"); 
//   } 

     //} 
    // } 



}); 


// to modify The tool bar on bottom 
$("#list").jqGrid('navGrid', '#pager', { 
    edit: false, 
    edittitle: 'Modify a Deployment', 
    add: true, 
    addtitle: 'Add a new Deployment', 
    del: true, 
    deltitle: 'Delete a Deployment', 
    nav: { 
     addCaption: 'Columns' 
    } 
}, { // edit option 
    // beforeShowForm: function(form) { 
    //  $('#branch', form).attr("disabled", "disabled"); 

    // }, 

    //seems to be is not qworking 
    beforeSelectRow: function(rowid, e) { 
     return false; 
    } 
}, 

{ // add option 
    beforeShowForm: function(form) { 


     $('#branch', form).prepend("<option value=''>Select a branch</option>") 
     //$('#branch option[value=""]', form).text('Select a branch'); 
     $('#branch option[value=""]', form).attr("selected", "selected"); 
     //$('#branch', form).attr("disabled", ""); 



     var ids; 

     ids = $("#list").getGridParam('selarrrow'); 
     if (ids) { 
      //alert('array: [' + ids + ']'); 
      //alert('id in array[0]: ' + ids[0]); 
     } 


    }, 
    addCaption: "Add a Deploymet" 

}, 



{ // delette option 
}, { // Search option 
    multipleSearch: true 
}, { // view option 
});