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

Posted 2023-05-08

【中文标题】除非我单击每个单元格，否则年份的下拉菜单不会显示

【英文标题】：dropdown for Year not showing unless I click on each cell

【发布时间】：2021-11-01 10:17:19

【问题描述】：

我正在使用 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'sanswer:

的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" />

【参考方案1】：

您可以使用 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,
    ,
    .......

【参考方案2】：

尝试使用renderer 函数给它你想要的用户界面

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;