如何在双击时禁用单元格可编辑选项

时间:2012-02-10 12:33:59

标签: jqgrid

如何在双击时使单元格无法编辑? 单击即可编辑单元格。

我使用以下代码完成了单元格编辑功能:

 jQuery("#tree").jqGrid({
                url:'json/jsonSamplePots.json',
                datatype: "json",
                mtype:'GET',
                colNames: ["Task id", "Task no.", "Task name", "Priority", "Start", "End", "Effort(hrs)", "Actual start", "Actual end", "Actual effort(hrs)", "Baseline start", "Baseline end", "Baseline effort(hrs)", "Task type", "Link", "Resources", "Tag"],
                colModel: [
                    {name:'id',width: 30, editable:false, align:"right",sortable:false, hidden: true, key: true},
                    {name:'no',width:80, editable:false, align:"left", sortable:true, sorttype:"int"},
                    {name:'name', width:150, editable:true, sortable:true, sorttype:"text"},
                    {name:'priority', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
                    {name:'sDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'eDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'effort', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
                    {name:'asDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'aeDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'aeffort', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
                    {name:'bsDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'beDate', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
                    {name:'beffort', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
                    {name:'type', width:120, editable:true, align:"left", sortable:true, sorttype:"text"},
                    {name:'link', width:80, editable:true, align:"left", sortable:true, sorttype:"text"},
                    {name:'resources', width:300, editable:true, align:"left", sortable:true, sorttype:"int"},
                    {name:'ref', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: '#pcolch',
                sortname: 'no',
                treeGridModel:'adjacency',
                autowidth:false,
                sortorder: 'desc',
                caption:"<a href="#">Task</a>
                toolbar:[true,"top"],
                treeGrid: true,
                cellEdit: true,
                sortable: true,
                shrinkToFit :true, 
                //viewrecords: true, 
                height:'auto',
                ExpandColumn:'name',
                cellsubmit : 'clientArray',

1 个答案:

答案 0 :(得分:1)

我建议使用行编辑而不是cellediting。我一直在苦苦挣扎,但是细胞编辑并不像行编辑那么灵活。通过行编辑,您可以达到与单元格编辑完全相同的目标。

您可以使用onCellSelect事件启用“单元格编辑”(行编辑),并使用event参数来捕获事件是否为双击事件。我在自己的项目中使用了类似的东西:

'onCellSelect' : function(rowId, iCol, cellcontent, e) {
    if(rowId && rowId !== lastsel && e.type != 'onDblClick') {
    $('#resultsgrid').jqGrid(
        'saveRow',
        lastsel,
        null,
        'clientArray',
        null,
        saveEditRow
    );

    $('#resultsgrid').jqGrid('restoreRow', lastsel);
    $('#resultsgrid').jqGrid('editRow', rowId, false);

    lastsel = rowId;
    }
}

上面的注意只是一个例子,您可以无法复制/粘贴它以在您自己的项目中使用它。你应该测试它是否适合你。

并非onCellSelect在celledit模式下不起作用。

希望它可以帮到你!