我正在尝试使用DropDown列加载gjqxGrid,我尝试使用jsfiddle中的示例json:here,它运行正常。但是当我尝试在我的项目文件中使用相同的代码时,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 column具有下拉列表中需要pe的值数组。如果我替换数据字段' 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填充下拉列表。
感谢。
答案 0 :(得分:0)
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
});
答案 1 :(得分:0)
这是我的解决方案
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" });
}
}
]
});
}
});
});