jqxGrid 下拉问题

Question

我正在尝试使用 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 });

                       }},

drops 列具有需要在下拉列表中添加的值数组。此外，如果我将数据字段 'drop' 替换为 'drops'，那么我会在列中获得逗号分隔值，这意味着数组数据存在但未创建下拉列表。 .

如果我在网格初始化之前创建了下拉适配器 // 方法 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 填充下拉列表。

谢谢。

Answer 1

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
            });

Answer 2

这是我的解决方案

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" });
                          }
                      }
                    ]
                });


            }
        });
    });

jqxGrid 下拉问题

jqxGrid dropDown issue

jquery

jqxgrid

jqxwidgets

jqxcombobox