jqGrid的。在编辑模式下禁用多重选择

时间:2011-10-06 17:42:53

标签: jqgrid

我正在创建一个包含以下字段和功能的新jqgrid:

部署ID','分支','发布名称','客户ID','主机数','评论','操作

- 我在TRUE上有多选选项。

- 我在每一行都有编辑/删除操作

- 我的导航栏位于底部,带有ADD /搜索选项。

我的行动是: 当我添加新记录时,我可以添加BRANCH字段和仅评论(这是工作) 当我编辑记录时,我只能修改COMMENT(也可以)

我的问题是关于MULTISELECT选项......

如果我点击编辑按钮并取消选中MULTISELECT一切正常..意味着只允许修改COMMENT。

如果在Multiselect列中选择了行,则BRANCH字段变为可编辑。

另外我想在编辑一个特别行时阻止其他操作(意味着无法检查/取消选中编辑/删除其他行)

有人可以帮我这么做吗?

感谢

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

}   
);

1 个答案:

答案 0 :(得分: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
});