jqGrid-禁用“编辑"中的内联下拉列表；而不是在“添加" [英] jqGrid - disabling inline dropdown on "edit" but not on "add"
问题描述
It looks as if this question has been asked at least once before but was not answered. I have also seen this question answered regarding standard "form" based editing, but not inline.
代码
$(function() {
var lastSel;
var MSVendors = {'9990':'XXXXXX - LEXI','9991':'XXXXXX - RICH','9992':'XXXXXX - BIRM','9993':'XXXXXX - PEMB' };
$('#special_dialog').dialog({
width:'auto',
height:'auto',
resizable:true
});
$.extend($.jgrid.defaults,{
rowNum:250,
rowList:[1000,2500,5000],
viewrecords:true,
sortorder:'asc',
height:800,
autowidth:true,
deepempty:true,
altRows: true,
grouping: true,
groupingView: {
groupField: ["vendor"],
groupColumnShow: [true],
groupText: ["<b>WAREHOUSE : {0}</b>"],
groupDataSorted: true,
groupSummary: [false]
}
});
var surplusGrid = $('#surplusGrid'),
editingRowId,
sEditParam = {
keys: true,
oneditfunc: function(id) {
editingRowId = id;
$('#surplusGrid_ilsave').removeClass('ui-state-disabled');
$('#surplusGrid_ilcancel').removeClass('ui-state-disabled');
},
afterrestorefunc: function() {
editingRowId = undefined;
}
},
sAutoCompOpts = {
source: function(request, response) {
$.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
response(data);
});
},
minLength: 3,
focus: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
},
select: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
}
},
sAddParam = {
rowID: 'new',
position:'last'
};
surplusGrid.jqGrid({
url: '/json/json.getSurplusStock.php',
datatype:'json',
emptyrecords: 'Surplus Stock is currently depleted!',
colNames: ['ID','Type','Part#','Description','On-Hand','On-Order','On-Hold','Min Stock','Warehouse','Shelf','Bin'],
colModel: [
{ name:'id',
index:'id',
hidden:true,
key:false,
search:false,
viewable:false
},
{ name:'type',
index:'type',
width:35,
sortable:true,
editable:false,
align:'center',
editoptions:{defaultValue:'B'},
cellattr: function(rowId,val) {
if (val == 'B') {
return 'class="blue_stock"';
} else {
return 'class="gold_stock"';
}
}
},
{ name:'surplus_partno',
index:'surplus_partno',
width:140,
sortable:false,
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:25},
editrules:{required:true}
},
{ name:'description',
index:'description',
width:200,
sortable:false,
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:40},
editrules:{required:true}
},
{ name:'on_hand',
index:'on_hand',
width:60,
sortable:false,
editable:true,
align:'center',
edittype:'text',
editoptions:{size:6},
editrules:{required:true,integer:true,minValue:0}
},
{ name:'on_order',
index:'on_order',
width:60,
sortable:false,
editable:true,
align:'center',
edittype:'text',
editoptions:{size:6},
editrules:{required:false,integer:true,minValue:0}
},
{ name:'on_hold',
index:'on_hold',
width:60,
sortable:true,
editable:true,
align:'center',
edittype:'text',
editoptions:{size:6},
editrules:{required:true,integer:true}
},
{ name:'min_threshold',
index:'min_threshold',
width:60,
sortable:true,
editable:true,
align:'center',
edittype:'text',
editoptions:{size:6},
editrules:{required:true,integer:true,minValue:0}
},
{ name:'vendor',
index:'vendor',
width:120,
editable:true,
align:'center',
editoptions:{value:MSVendors},
edittype:'select',
editrules:{required:true,integer:true}
},
{ name:'shelf',
index:'shelf',
width:40,
sortable:true,
editable:true,
align:'center',
editoptions:{size:10}
},
{ name:'bin',
index:'bin',
width:40,
sortable:true,
editable:true,
align:'center',
editoptions:{size:10}
}
],
pager:'#surplusFoot',
sortname:'b.id',
caption:'Surplus Stock Inventory',
onSelectRow: function(id) {
if(id && id !== lastSel) {
surplusGrid.jqGrid('restoreRow',lastSel);
var cm = surplusGrid.jqGrid('getColProp','vendor');
if (id != 'new') { cm.editable = false; }
lastSel = id;
}
surplusGrid.jqGrid('editRow',id,true);
$('#surplusGrid_ilsave').removeClass('ui-state-disabled');
$('#surplusGrid_ilcancel').removeClass('ui-state-disabled');
},
editurl:'/jqg/jqg.saveSurplusStockEdit.php'
});
surplusGrid.jqGrid('navGrid','#surplusFoot',{
add:false,
edit:false,
del:false
});
surplusGrid.jqGrid('inlineNav','#surplusFoot',{
add:true,
edit:true,
editParams:sEditParam,
addParams:sAddParam
});
// re-size all grids when dialog box resizes
$('#special_dialog').dialog({
resizeStop: function(e,ui) {
surplusGrid.jqGrid('setGridWidth', ui.size.width - 30);
}
});
});
在内联ADD上工作出色-出现下拉菜单，并且值按预期传递给了编辑URL.但是，在内联EDIT上，整个下拉列表消失了，只剩下一个 "作为单元格的内容，而不是网格最初加载时的值.
Works GREAT on inline ADD - dropdown appears and value is passed to the editing URL as expected. On inline EDIT, however, the entire dropdown vanishes, leaving a " " as the cell content rather than the value that was there when the grid initially loaded.
推荐答案
inlineNav的用法是内联编辑的一种特殊情况，因为将调用editRow.从jqGrid 4.5.3开始，内联编辑支持beforeEditRow和beforeAddRow回调，引入这些回调主要是为了在使用inlineNav的情况下提供其他自定义.方法beforeEditRow更有趣，因为它将以任何调用editRow的方式进行调用.
The usage of inlineNav is a special case of inline editing, because editRow will be called. Starting with jqGrid 4.5.3 inline editing supports beforeEditRow and beforeAddRow callbacks which was introduced mostly to provide additional customization in case of usage inlineNav. The method beforeEditRow is more interesting, because it will be called in any way of calling editRow.
在提供用法示例beforeEditRow之前，我要指出您必须修复sAddParam中的错误，您可以将其用作addRow的选项.您使用不必要和危险的参数rowID: 'new'.结果，每个新行的ID将相同:"new".这样，您将获得ID重复项.早期版本的jqGrid中存在相同的问题.如果rowID是null或undefined，则当前版本的jqGrid使用$.jgrid.randId()为新添加的行生成新的 unique id. rowID的默认值为null.因此，我强烈建议您删除rowID: 'new'选项.
Before providing an example of usage beforeEditRow I would remark that you have to fix the bug in sAddParam, which you use as the option of addRow. You use unneeded and danger parameter rowID: 'new'. As the result the id of every new row will be the same: "new". In the way you will have id duplicates. The same problem exists in early versions of jqGrid. The current version of jqGrid uses $.jgrid.randId() to generate new unique id for new added row if rowID is null or undefined. The default value of rowID is null. So I strictly recommend you to remove rowID: 'new' option.
下一个重要的事情是inlineNav的addParams选项的含义.方法addRow在内部调用相同的editRow方法. addParams的addRowParams属性允许指定由addRow调用的editRow选项.因此，我强烈建议您使用以下格式的addParams
The next important thing is the meaning of addParams option of inlineNav. The method addRow calls internally the same editRow method. The addRowParams property of addParams allows to specify the option of editRow called by addRow. So I strictly recommend you to use addParams in the following form
var sEditParam = {
... // any options or callbacks
},
sAddParam = {
position: 'last',
addRowParams: sEditParam
};
通过这种方式，您将确保即使在使用addRow的情况下，也可以应用所有内联编辑的回调和选项.
In the way you will be sure that all callbacks and options of inline editing will be applied even in case of usage addRow.
现在回到您的主要问题.我建议您使用beforeEditRow更改vendor列的editable属性.要测试当前行是否只是添加，我建议测试jqgrid-new-row类的存在.相应的代码可能如下所示
Now back to you main question. I suggest that you use beforeEditRow to change editable property of vendor column. To test whether the current row are just add or not I suggest to test existence of jqgrid-new-row class. The corresponding code could be like the following
var sEditParam = {
beforeEditRow: function (option, rowid) {
var tr = $(this).jqGrid("getGridRowById", rowid);
$(this).jqGrid("setColProp", "vendor", {
editable: !$(tr).hasClass("jqgrid-new-row")
});
}
};
surplusGrid.jqGrid("inlineNav", "#surplusFoot", {
add: true,
edit: true,
editParams: sEditParam,
addParams: {position: "last", addRowParams: sEditParam}
});
这篇关于jqGrid-禁用“编辑"中的内联下拉列表；而不是在“添加"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
