除非我点击每个单元格，否则 Year 的下拉菜单不会显示

Question

我正在使用 jqwidgets JS 库，在 Year 列下显示下拉列表时遇到一个问题。从下面的代码中可以看出，Year 列不显示 jqxDropdownList 除非我单击它。例如，当我单击 Year 列的第一个单元格时，它显示如下所示的列表：

谁能告诉我我做错了什么？请在下面找到我的代码：

  var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 10; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["available"] = !!(i % 2);
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 500,
      autoheight: true,
      editable: true,
      source: dataAdapter,
      columns: [{
          text: 'Available',
          datafield: 'available',
          width: 100,
          columntype: 'checkbox'
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, 
      {
          text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
          createeditor: function (row, column, editor) {
                    var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                  
                   
                     
                    editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
                }
       
      },
      
      {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  $("#jqxgrid").bind('cellendedit', function (event) {
    if (event.args.value) {
        $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
    }
    else {
        $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
    }
});
  
   $('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows');
    //console.log(rows);
     var selectedRows = rows.filter(x => x.available)
     
    console.log(selectedRows)
   
     //alert(rows);
 });

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

正在根据 Muzaffer Galata's答案测试 cellsrenderer 功能：

var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 10; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["available"] = !!(i % 2);
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
            return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
                + value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
        }
        
        
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 500,
      autoheight: true,
      editable: true,
      source: dataAdapter,
      columns: [{
          text: 'Available',
          datafield: 'available',
          width: 100,
          columntype: 'checkbox'
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, 
      {
          text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
          createeditor: function (row, column, editor) {
             var list =                  ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'];
            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
           },
          cellsrenderer: cellsRendererForCombo,

       
      },
      
      {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  $("#jqxgrid").bind('cellendedit', function (event) {
    if (event.args.value) {
        $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
    }
    else {
        $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
    }
});
  
   $('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows');
    //console.log(rows);
     var selectedRows = rows.filter(x => x.available)
     
    console.log(selectedRows)
   
     //alert(rows);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

Answer 1

尝试用renderer功能给它UI你想要的

renderer: function(instance, td, row, col, prop, value, cellProperties) {
    var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
    $(td).jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
    // or $(td).find("span").jqxDropDownList({......
    return td;
}

Answer 2

您可以使用 cellsrenderer 选项：

        var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
            return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
                + value + '<img src="../../Scripts/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
        }
    
    ........
    {
        text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
        createeditor: function (row, column, editor) {
            var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
        },
        cellsrenderer: cellsRendererForCombo,
    },
    .......

除非我点击每个单元格，否则 Year 的下拉菜单不会显示

dropdown for Year not showing unless I click on each cell

javascript

jqxgrid

jqxwidgets