【问题标题】:jqxGrid dropDown issuejqxGrid下拉问题
【发布时间】:2015-03-16 14:27:11
【问题描述】:

我正在尝试使用 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 列具有需要在下拉列表中 pe 的值数组。此外,如果我将数据字段 'drop' 替换为 'drops',那么我会在列中得到逗号分隔的值,这意味着数组数据存在,但下拉列表未创建。 .

如果我在网格初始化之前创建了下拉适配器 // 方法二

  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 填充下拉列表。

谢谢。

【问题讨论】:

    标签: jquery jqxgrid jqxwidgets jqxcombobox


    【解决方案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
                });
    

    【讨论】:

      【解决方案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" });
                                }
                            }
                          ]
                      });
      
      
                  }
              });
          });
      

      【讨论】:

        猜你喜欢
        • 2014-05-28
        • 2016-08-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-11-01
        • 2019-02-12
        相关资源
        最近更新 更多