jqGrid动态更改特定行的edittype
在post之后，我找到了一些方法可以做到这一点，我希望得到它，我遇到了一些麻烦。 这是我的代码：
var myDlg = $("#dlgpers"),lastsel;
myDlg.jqGrid({
url:'pers.php?id='+dataRow.id,
mtype:'GET',
datatype: "json",
ajaxGridOptions: { cache: false },
height:250,
cmTemplate: {sortable:false},
gridview: true,
cellEdit:true,
scroll:false,
colNames:['Id','Label','Information','Type','Data'],
colModel:[
{name:'id',index:'id',hidden:true,key:true},
{name:'label',index:'label',align:'right',width:100,editable:false,
cellattr: function (rowId, val, rawObject, cm, rdata) {
return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"' ;
}
},
{name:'info',index:'info',width:200,editable:true,edittype:'text'},
{name:'type',index:'type',width:30,hidden:true},
{name:'data',index:'data',width:30,hidden:true}
],
loadComplete: function () {
var rowIds = myDlg.jqGrid('getDataIDs');
$.each(rowIds, function (i, row) {
var rowData = myDlg.jqGrid('getRowData',row);
if (rowData.type == 'select') {
myDlg.jqGrid('restoreRow', row);
var cm = myDlg.jqGrid('getColProp', 'info');
cm.edittype = 'select';
cm.editoptions = { value: rowData.data };
myDlg.jqGrid('editRow', row);
cm.edittype = 'text';
cm.editoptions = null;
cm.editable = true;
}else{
myDlg.jqGrid('restoreRow', row);
var cm = myDlg.jqGrid('getColProp', 'info');
cm.edittype = 'text';
cm.editoptions = null;
cm.editable = true;
myDlg.jqGrid('editRow', row);
cm.edittype = 'text';
cm.editoptions = null;
cm.editable = true;
}
});
}
});
和结果为图像：
和JSON响应：
{"page":1,"total":1,"records":1,"rows":[
{"cell":[0,"Nom ","LEBRUN","text",""]},
{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},
{"cell":[2,"Initiales ","LJ","text",""]},
{"cell":[3,"Fonction ","","text",""]},
{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},
{"cell":[5,"T\u00e9l\u00e9phone ","","text",""]},
{"cell":[6,"Email ","","text",""]},
{"cell":[7,"Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int"]},
{"cell":[8,"Entr\u00e9 le ","2008-10-06","text",""]},
{"cell":[9,"Sorti le ","0000-00-00","text",""]}]}
我提交给您的两个问题：
- 如您所见，第二行（Prénom）似乎不可编辑，但确实如此。
- 我不明白为什么这些输入是可见的，因为我希望它们只在我编辑某个单元格时出现。
- 如您所见，第一行不接收select和datepicker作为其他行。奇怪！
- 当我添加新行时，它不会接收select和datepicker作为第一行。 我认为我理解这种方法是错误的。
非常感谢您帮助解决（并解释）我错误的方式。 JiheL
更新2013-03-29
我已经应用了你的答案代码，运行正常！非常感谢。 但是我为另一个主题创造了另一种形式，这给我带来了一些麻烦。
以下是此新表单的代码：
var showAbs=function(){
$('#EditDialog').empty();
var $table=$('<table></table>')
.attr('id','dlgcong')
.appendTo($('#EditDialog'));
var myCong = $("#dlgcong");
myCong.jqGrid({
url:'xpabs.php?id='+id+'&y='+y,
datatype: "json",
height:"auto",
cmTemplate: {sortable:false},
gridview: true,
colNames:['Type absence','Début','Fin','id'],
colModel:[
{name:'abs',index:'abs',width:155,editable:true,edittype:'select',
editoptions:{
dataUrl:"selabs.php",
dataEvents: [
{
type: 'change',
fn: function(e) {
$(this).parent().css('background-color','#'+$(this).find('option:selected').attr('colr'));
if($(this).find('option:selected').attr('colr')=='ffffff'){
$(this).parent().parent().find('input').datepicker('disable');
}else{
$(this).parent().parent().find('input').datepicker('enable');
$(this).parent().parent().attr('changed',true);
}
}
}
]
},
cellattr: function (rowId, val, rawObject, cm, rdata) {
return ' style="background-color:#'+rawObject[4]+';color:white;"';
}
},
{name:'debut',index:'debut',align:'center',width:70,editable:true},
{name:'fin',index:'fin',align:'center',width:70,editable:true},
{name:'id',index:'id',hidden:true}
],
jsonReader: {
cell: "",
root: function (obj) {
return obj;
}
},
loadComplete: function (data) {
var $self = $(this),
cm = $self.jqGrid("getColProp", "debut"),
idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
l = data.length,
i,
item;
for (i = 0; i < l; i++) {
item = data[i];
cm.editoptions = {
dataInit: function(element) {
$(element).datepicker({
setDate:item[1],
minDate:'01/01/'+y,
maxDate:'31/12/'+y,
onSelect: function( selectedDate,inst ) {
$(element).val(selectedDate );
$(element).parent().parent().attr('changed',true);
}
})
}
}
}
var cm = $self.jqGrid("getColProp", "fin");
for (i = 0; i < l; i++) {
item = data[i];
cm.editoptions = {
dataInit: function(element) {
$(element).datepicker({
setDate:item[2],
minDate:'01/01/'+y,
maxDate:'31/12/'+y,
onSelect: function( selectedDate,inst ) {
$(element).val(selectedDate );
$(element).parent().parent().attr('changed',true);
}
})
}
}
$self.jqGrid("editRow", idPrefix + item[3]);
}
myCong.find('select').each(function(){
$(this).css({
backgroundColor:'transparent',
color:'white',
border:0,
width:155
});
});
},
idPrefix: "cong",
rowNum: 10000
});
//********************
// Button ' Valider '
//********************
$('<input />')
.attr({
type:'button',
})
.css({
float:'right',
marginTop:'5px'
})
.click(function(){
var toBeSaved='';
myCong.find('tr[changed=true]').each(function(idx){
if(toBeSaved.length>0){
toBeSaved+='|';
}
toBeSaved+=$(this).find('td:eq(3)').text()+';';
toBeSaved+=$(this).find('select option:selected').val()+';';
toBeSaved+=$(this).find('input:eq(0)').val()+';';
toBeSaved+=$(this).find('input:eq(1)').val();
});
if(toBeSaved.length>0){
$.ajax({
url:'majpabs.php?id='+id+'&data='+toBeSaved,
async:false,
dataType:'json',
success:function(data){
myGrid.trigger('reloadGrid');
$('#newAbs').val(' Nouveau ').attr('disabled',false);
}
});
}
})
.val(' Valider les absences ')
.appendTo($('#EditDialog'));
//*******************
// Button ' Retour '
//*******************
$('<input />')
.attr({
type:'button',
id:'newAbs'
})
.css({
float:'left',
marginTop:'5px'
})
.click(function(){
showPers();
})
.val(' Retour ')
.appendTo($('#EditDialog'));
//********************
// Button ' Nouveau '
//********************
$('<input />')
.attr({
type:'button',
disabled:false
})
.css({
float:'left',
marginTop:'5px',
marginLeft:'7px'
})
.click(function(){
if($(this).val()==' Nouveau '){
var myRow = {abs:"0", debut:'00/00/'+y, fin:'00/00/'+y, id:'0'};
myCong.jqGrid('addRowData','',myRow, 'last');
$(this).val(' Sauver ').attr('disabled',true);
}else{
}
})
.val(' Nouveau ')
.appendTo($('#EditDialog'));
}
和结果为图像：
我担心这些问题让你烦恼，我在维基上看了一眼没有成功找到任何方法来使这些观点正确。我想找一些更详细的教程来展示一些案例。
非常感谢非常如果你能再花一些时间给我一个方法来提高jqGrid.JiheL的效率
更新2013-04-01
我已经应用了Oleg的建议，现在可以使用了。但问题仍然存在。 这是图像：
对于第一行，选择框即可。 第一个输入字段接收datepicker，但第二个（名为'fin'的列）不是！ 所有其他行都接收好日期选择器，但不是第一行的最后一个字段。 这是代码：
loadComplete: function (data) {
var $self = $(this),
idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
l = data.length,
i,
item,
cm;
for (i = 0; i < l; i++) {
item = data[i];
cm = $self.jqGrid("getColProp", "debut");
cm.editoptions = {
dataInit: function(element) {
//alert('deb'+i);
$(element).datepicker({
setDate:item[1],
minDate:'01/01/'+y,
maxDate:'31/12/'+y,
onSelect: function( selectedDate,inst ) {
$(element).val(selectedDate );
$(element).parent().parent().attr('changed',true);
}
})
}
};
$self.jqGrid("editRow", idPrefix + item[3]);
//
cm = $self.jqGrid("getColProp", "fin");
cm.editoptions = {
dataInit: function(element) {
//alert('fin'+i);
$(element).datepicker({
setDate:item[2],
minDate:'01/01/'+y,
maxDate:'31/12/'+y,
onSelect: function( selectedDate,inst ) {
$(element).val(selectedDate );
$(element).parent().parent().attr('changed',true);
}
})
}
};
$self.jqGrid("editRow", idPrefix + item[3]);
}
myCong.find('select').each(function(){
$(this).css({
backgroundColor:'transparent',
color:'white',
border:0,
width:155
});
});
},
另一次，我希望你能帮助我解决这个问题并关闭这个请求。 非常感谢你花在帮助新手上的所有时间。 JiheL
1 个答案:
答案 0 :(得分：7)
我认为很多来自你代码中的问题很常见。所以我试着回答你更详细的问题。
首先，您发布了错误的JSON数据。这条线
{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},
包含两个错误：
- no'：'在“cell”之后 在
- 没有
"Service更改后，行将是
{"cell":[4,"Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},可以读取JSON数据。下一个问题是在一个数组中使用数字和字符串。因为jqGrid代码的the line中的错误
idr = ccur !== undefined ? ccur[idn] || idr : idr;ids不能是整数值0.我发布了the bug report有关错误的信息。 要使用jqGrid的现有代码解决问题，您应该使用字符串而不是数字。例如，行
{"cell":[0,"Nom ","LEBRUN","text",""]},应改为
{"cell":["0","Nom ","LEBRUN","text",""]},如果没有更改，您将有 ID重复。第一行（
{"cell":[0,"Nom ","LEBRUN","text",""]}和{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},）将获得相同的ID，而不是0和1. 这是您描述的问题的主要原因。 < / p>此外，我会向您推荐以下内容：
- 删除
cellEdit:true选项。您稍后会在代码中使用editRow。这意味着您使用inline editing代替cell editing，这意味着cellEdit:true。您无法在一个网格中组合这两种编辑模式。 - 将
height:250选项替换为height:"auto" - 从
index中删除所有colModel个媒体资源。使用默认值（colModel，edittype:'text'） 删除 - 使用默认值（
mtype:'GET'，scroll:false） 删除jqGrid的选项
- JavaScript中函数的所有参数都是可选。因此，如果您不使用
cellattr回调的任何参数，则可以将cellattr: function (rowId, val, rawObject, cm, rdata) {...}替换为cellattr: function () {...} - 回调
loadComplete有一个参数data，它可以为您提供从服务器返回的所有数据。因此，您无需使用getDataIDs和getRowData。数组data.rows可以直接使用。 - 如果您使用
data回调loadComplete，则可以从网格中删除不需要的'type'和'data'列。 - 如果您在
id之后放置'Label','Information'的相关信息，那么您可以使用id的{{1}}属性，并从网格中删除隐藏的jsonReader列。例如，如果您将id移动到id数组中的最后一个，则可以使用cell并从网格中删除隐藏的jsonReader: {id: 4}列。如果您在id中添加了额外的cell: ""属性，则可以从输入数据中删除jsonReader。如果您使用"cell":root属性定义为函数（请参阅the documentation），您可以从服务器响应中删除一些不需要的数据。
editable:false的所有属性例如，服务器可以生成简化数据
jsonReader相应的jqGrid可能是
[ ["Nom ","LEBRUN","text","","0"], ["Pr\u00e9nom ","Jacques","text","","1"], ["Initiales ","LJ","text","","2"], ["Fonction ","","text","","3"], ["Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests","4"], ["T\u00e9l\u00e9phone ","","text","","5"], ["Email ","","text","","6"], ["Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int","7"], ["Entr\u00e9 le ","2008-10-06","text","","8"], ["Sorti le ","0000-00-00","text","","9"] ]请参阅the demo：
- 删除
" 之后
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？