本文介绍了如何在jqGrid中动态编辑单元格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是jqGrid的新手,我需要一些我无法弄清楚的方案的帮助。

I am new to jqGrid and I need help with a scenario that I am not able to figure out.

我能够使用不可编辑的单元格以下代码:

I am able to make a cell un-editable using the following code:

jQuery("#updAssist").jqGrid('setCell',rowid,'precPsProg','','not-editable-cell');

现在我想根据某些条件再次修改单元格。

Now I want to make the cell editable again based on some condition.

我应该用什么课来实现这一目标?

What class should I use to achieve that?

我可以使用可编辑单元格类吗?

Is there a 'editable-cell' class that I can use?

推荐答案

您应该从单元格中删除'not-editable-cell'类(< td> 元素)

You should remove 'not-editable-cell' class from the cell (<td> element)

td.removeClass('not-editable-cell');

您应该选择所有单元格(< td> element)你想要的是可编辑的。

You should select all cells (<td> element) which you want make editable.

我做了演示如何执行此操作。演示中最重要的代码片段是

I made the demo which demonstrate how to do this. The most important code fragment from the demo is

var grid = $("#list");
var getColumnIndexByName = function(gr,columnName) {
    var cm = gr.jqGrid('getGridParam','colModel');
    for (var i=0,l=cm.length; i<l; i++) {
        if (cm[i].name===columnName) {
            return i; // return the index
        }
    }
    return -1;
};
var changeEditableByContain = function(gr,colName,text,doNonEditable) {
    var pos=getColumnIndexByName(gr,colName);
    // nth-child need 1-based index so we use (i+1) below
    var cells = $("tbody > tr.jqgrow > td:nth-child("+(pos+1)+")",gr[0]);
    for (var i=0; i<cells.length; i++) {
        var cell = $(cells[i]);
        //var cellText = cell.text();
        var unformatedText = $.unformat(cell,{rowId:cell[0].id,
                                        colModel:gr[0].p.colModel[pos]},pos);
        if (text === unformatedText) { // one can use cell.text() instead of
                                       // unformatedText if needed
            if (doNonEditable) {
                cell.addClass('not-editable-cell');
            } else {
                cell.removeClass('not-editable-cell');
            }
        }
    }
};
grid.jqGrid({
    datatype: "local",
    ...
    cellEdit: true,
    cellsubmit: 'clientArray',
    loadComplete: function() {
        changeEditableByContain(grid,'name','test',true);
    }
});
$("#doEditable").click(function(){
    changeEditableByContain(grid,'name','test',false);
});
$("#doNonEditable").click(function(){
    changeEditableByContain(grid,'name','test',true);
});

在演示中,客户列中包含文本test的单元格将标记为不可编辑。稍后可以单击相应的按钮使单元格可编辑或不可编辑。

In the demo the cells from the 'Client' column having the text "test" will be marked as "non-editable". Later one can make the cells "editable" or "non-editable" be clicking on the corresponding button.

这篇关于如何在jqGrid中动态编辑单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 08:40
查看更多