セルにドロップダウンがある作業中のjqGRIDを取得しました。
{ name : 'oid', editrules: {required: true}, index : 'note', sortable : false, editable : true, edittype: 'select',
formatter: 'select',
editoptions:{
dataUrl: "http://api.kurse.dailyware.ch/orte/liste",
buildSelect: function(response){
var data = typeof response === "string" ?
$.parseJSON(response) : response,
s = "<select>";
$.each(data.data.orte, function () {
s += '<option value="' + this.oid + '">' + this.name +
'</option>';
})
return s + "</select>";
}
}
}
この JSON ソースによって入力されます。
{
"header":
{
"timestamp": "2015-09-24 03:47:18"
},
"data":
{
"func": "listview",
"orte":
[
{
"oid": "1",
"name": "Buero Gruetter Stooss",
"strasse": "Muehledorf 30",
"plz": "5013",
"ort": "Niedergoesgen"
},
{
"oid": "3",
"name": "FBS",
"strasse": "Das ist wahr",
"plz": "46",
"ort": "oke"
},
{
"oid": "2",
"name": "TCS Sicherheitscenter",
"strasse": "Industrie 17",
"plz": "8000",
"ort": "Zuerich"
}
]
},
"status": "200"
}
行を編集するとすぐに、ドロップダウンに正しい値が表示されます。
ここに私の完全なGRIDがあります
$.ajax({
dataType: "json",
url: "http://api.kurse.dailyware.ch/kurse/liste",
success: function(data){
jqgrid_data = data.data.kurse
// ----------------------------------------------------------------------------------------------------
console.log('test')
jQuery("#jqgrid").jqGrid({
data : jqgrid_data,
datatype : "local",
height : '250',
colNames : ['ID', 'Datum', 'Zeit', 'Name', 'Inhalt', 'Preis','Teilnehmer','Kursort'],
colModel : [
{ name : 'kid', index : 'kid', key : true, sortable : false, width : '50px' },
{ name : 'kursdatum', editrules: {required: true}, index : 'sdate', editable : true, sorttype:"date",unformat: pickDate, width : '100px' },
{ name : 'kurszeit', editrules: {required: true}, index : 'tax', editable : true, width : '80px' },
{ name : 'kursname', editrules: {required: true}, index : 'name', editable : true },
{ name : 'kursinhalt', editrules: {required: true}, index : 'amount', editable : true },
{ name : 'kurskosten', editrules: {required: true}, index : 'note', align : "right", sortable : false, editable : true, width : '80px' },
{ name : 'kursteilnehmer', editrules: {required: true}, index : 'kursteilnehmer', align : "right", editable : true, width : '100px' },
{ name : 'oid', editrules: {required: true}, index : 'oid', sortable : false, editable : true, edittype: 'select',
editoptions:{
dataUrl: "http://api.kurse.dailyware.ch/orte/liste",
buildSelect: function(response){
var data = typeof response === "string" ?
$.parseJSON(response) : response,
s = "<select>";
$.each(data.data.orte, function () {
s += '<option value="' + this.oid + '">' + this.name +
'</option>';
})
return s + "</select>";
}
}
}],
rowNum : 10,
rowList : [10, 20, 30],
pager : '#pager_jqgrid',
sortname : 'kursdatum',
toolbarfilter: true,
viewrecords : true,
sortorder : "desc",
gridComplete: function(){
var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('"+cl+"');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid").jqGrid('setRowData',ids[i],{act:be+se+ca});
}
},
editurl : "http://api.kurse.dailyware.ch/kurse/add",
caption : "Kursübersicht",
multiselect : false,
autowidth : false
});
ただし、機能しないことが 2 つあります。
行を編集しない限り、セルは空です (何も表示されません)。
編集をクリックすると、ドロップダウンが表示されますが、セル値に対応するデフォルト値は取得されません。
これら2つのことを修正するにはどうすればよいですか？
ご挨拶