Javascript 如何在jqGrid中使单元格可动态编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5092571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make cell editable dynamically in jqGrid
提问by Abhi
I am new to jqGrid and I need help with a scenario that I am not able to figure out.
我是 jqGrid 的新手，我需要帮助解决我无法弄清楚的场景。
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?
是否有我可以使用的“可编辑单元”类？
回答by Oleg
You should remove 'not-editable-cell' class from the cell (<td>element)
您应该从单元格（<td>元素）中删除 'not-editable-cell' 类
td.removeClass('not-editable-cell');
You should select all cells (<td>element) which you want make editable.
您应该选择<td>要使其可编辑的所有单元格（元素）。
I made the demowhich 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);
});
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.
在演示中，“客户”列中带有“测试”文本的单元格将被标记为“不可编辑”。稍后可以通过单击相应的按钮使单元格“可编辑”或“不可编辑”。
