jqxGrid dropDown проблема
Я пытаюсь загрузить gjqxGrid со столбцом DropDown, я пытался с образцом json в jsfiddle: здесь все работало нормально. Но когда я пытаюсь использовать тот же код в моих файлах проекта, столбец DropDown пуст, я проверил формат данных, все в порядке. Ниже приведен код из файла проекта
var source_app =
{
datatype: "json",
datafields:[
{ name: 'id' },
{ name: 'name' },
{ name: 'count' },
{ name: 'drop'},
{ name: 'drops'}
],
url: "settings/scenario_count2.php",
cache:false,
updaterow: function (rowid, rowdata, commit) {
var data = "update=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'settings/scenario_count2.php',
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
/*
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}*/
});
}
};
var dataAdapter_app = new $.jqx.dataAdapter(source_app);
dataAdapter_app.dataBind();
// ниже мой код инициализации сетки Jqx // Подход 1
$("#scenario_grid2").jqxGrid(
{
width: 520,
height: 253,
source: dataAdapter_app,
editable: true,
theme: theme,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Id', hidden: true, editable:false, columntype: 'textbox', datafield: 'id'},
{ text: 'Name', columntype: 'textbox', datafield: 'name', width: 140 },
/*{ text: 'Drop', columntype: 'NumberInput', datafield: 'drop', width: 60 }, */
{ text: 'Drop',
datafield: 'drop', width: 160, columntype: "dropdownlist",
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList ({source: dataAdapter_app.records[row].drops });
}},
Столбец drop имеет массив значений, которые необходимо отобразить в раскрывающемся списке. Также, если я заменяю поле данных "drop" на "drop", я получаю в столбце значения, разделенные запятыми, это означает, что данные массива есть, но выпадающий не создается.,
Если я создал выпадающий адаптер до инициализации сетки // Подход 2
var dropdownListStateAdapter3 = new $.jqx.dataAdapter(dropDownListStateSource3, { autoBind: true, async: false });
и используйте это, как показано ниже:
{ text: 'State', columntype: 'dropdownlist', datafield: 'revision_state', width: 55,
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: 'name', source: dropdownListStateAdapter3 });
Затем я получаю выпадающий список, но я хочу динамический выпадающий список, так как каждая строка имеет различный набор выпадающих значений. Пожалуйста, дайте мне знать, как я могу заполнить раскрывающийся список, используя подход 1.
Благодарю.
2 ответа
Решение
aynch:false и autobind:true необходимо добавить в функцию dataAdapter.
var dataAdapter_app = new $.jqx.dataAdapter(source_app,{
loadComplete: function (record) {
console.log(record);
datarecords = JSON.parse(JSON.stringify(record));
},
async:false,
autoBind:true
});
Это мое решение
var merchantItems = [
{ name: 'ID', type: 'string' },
{ name: 'NAME', type: 'string' }
]
jQuery(document).ready(function ($) {
$.ajax({
url: "/Parameter/GetMerchantList",
type: "POST",
success: function (e) {
for (var i = 0; i < e.length; i++) {
if (e[i].NAME.trim() == "")
continue;
var mitem = {};
mitem.ID = e[i].ID;
mitem.NAME = e[i].NAME;
merchantItems.push(mitem);
}
merchantItems.splice(0,2);
// initialize jqxGrid
$("#jqxgridParameter").jqxGrid({
source: dataadapter,
width: $('.contentwrapper').width(),
height: 800,
selectionmode: 'singlerow',
theme: theme,
columnsresize: true,
//filtermode: 'excel',
editable: false,
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
scrollmode: 'default',
autoshowfiltericon: true,
altrows: true,
enabletooltips: true,
rowdetails: true,
showaggregates: true,
//serach texbox-------
showfilterrow: true,
filterable: true,
columnsheight: 30,
rowsheight: 30,
filterrowheight: 35,
autoheight: true,
rendergridrows: function (obj) {
return obj.data;
},
columns: [
{
button: 'Güncelle', datafield: 'Güncelle', columntype: 'button', width: 100, height: 200, cellsrenderer: function () {
return "Güncelle";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $("#jqxgridParameter").offset();
$("#parameterPopupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 400, y: parseInt(offset.top) - 020 }, height: 220, width: 435 });
// get the clicked row's data and initialize the input fields.
var dataRecord = $("#jqxgridParameter").jqxGrid('getrowdata', editrow);
$("#ID").val(dataRecord.ID == null ? "" : dataRecord.ID);
$("#NAME").val(dataRecord.NAME == null ? "" : dataRecord.NAME);
$("#MERCHANT_ID").val(dataRecord.MERCHANT_ID == null ? "" : dataRecord.MERCHANT_ID);
$("#MERCHANT_NAME").val(dataRecord.MERCHANT_NAME == null ? "" : dataRecord.MERCHANT_NAME);
$("#INTEGRATOR_ID").val(dataRecord.INTEGRATOR_ID == null ? "" : dataRecord.INTEGRATOR_ID);
$("#INTEGRATOR_NAME").val(dataRecord.INTEGRATOR_NAME == null ? "" : dataRecord.INTEGRATOR_NAME);
$("#CREATE_USER_NAME").val(dataRecord.CREATE_USER_NAME == null ? "" : dataRecord.CREATE_USER_NAME);
//$("#CREATE_USER_NAME").val(dataRecord.CREATE_USER_NAME == null ? "" : dataRecord.CREATE_USER_NAME);
//$("#UPDATE_USER_NAME").val(dataRecord.UPDATE_USER_NAME == null ? "" : dataRecord.UPDATE_USER_NAME);
//$("#CREATE_DATE_TIME").val($.datepicker.formatDate('dd/mm/yy', new Date(dataRecord.CREATE_DATE_TIME == null ? Date('dd/mm/yy') : dataRecord.CREATE_DATE_TIME)));
//$("#UPDATE_DATE_TIME").val($.datepicker.formatDate('dd/mm/yy', new Date(dataRecord.UPDATE_DATE_TIME == null ? Date('dd/mm/yy') : dataRecord.UPDATE_DATE_TIME)));
//$("#DELETED").val(dataRecord.DELETED == null ? "" : dataRecord.DELETED);
fxFillMerchant();
fxFillIntegrator();
// show the popup window.
$("#parameterPopupWindow").jqxWindow('open');
}
},
{ text: 'No', columntype: 'textbox', datafield: 'ID', width: 70 },
{ text: 'Adı', columntype: 'textbox', datafield: 'NAME', width: 250 },
//{ text: 'Alt Müşteri', columntype: 'textbox', datafield: 'MERCHANT_NAME', width: 200 },
{ text: 'Entegrator', columntype: 'textbox', datafield: 'INTEGRATOR_NAME', width: 200 },
{ text: 'Güncelleme Zamanı', filtertype: "date", columntype: 'datetimeinput', datafield: 'CREATE_DATE_TIME', width: 200, cellsformat: 'dd-MM-yyyy' },
{ text: 'Kullanıcı Adi', columntype: 'textbox', datafield: 'CREATE_USER_NAME', width: 200 },
//{
// text: 'Alt Müşteri', filtertype: 'list', datafield: 'MERCHANT_NAME', displayfield: 'MERCHANT_NAME', columntype: 'dropdownlist'
//},
{
text: 'Alt Müşteri', datafield: 'MERCHANT_ID', displayfield: 'MERCHANT_NAME', columntype: 'dropdownlist', filtertype: 'list',
createfilterwidget: function (column, htmlElement, editor, height) {
editor.jqxDropDownList({ autoDropDownHeight: false, height:25, source: merchantItems, valueMember: "ID", displayMember: "NAME" });
}
}
]
});
}
});
});