Question

我在一个页面中渲染两个光滑的网格，我编写了一个自定义格式化程序，用于在页面加载时显示日期选择器，而不是在可编辑模式下执行（默认功能）。

我使用网格列名称来区分两个网格。

function DateFormatter (row, cell, value, columnDef, dataContext) {

      var template = null;
      var rowString = row.toString();
      var cellString = cell.toString();


      if(dataContext.seasonName!= null){

          var hiddenIdentitySeason = "#dpSeason"+rowString+cellString;

          var dateIdentitySeason = "#seasonDateInput"+rowString+cellString;
      $(hiddenIdentitySeason).datepicker({
             buttonImage: "../images/calendar.gif",buttonImageOnly: true,changeMonth: true,changeYear: true,showOn: "both", onSelect: function(dateText, inst) { 
             $(dateIdentitySeason).val(dateText);
       }
       });
      template = '<input type="text" id = "seasonDateInput'+rowString+cellString+'" style="width:75px;" value='+value+'></input><input type="hidden" id="dpSeason'+rowString+cellString+'"  ></input>';
      }else if(dataContext.foodName!= null){
          var hiddenIdentity = "#dpFood"+rowString+cellString;
          var dateIdentity = "#foodDateInput"+rowString+cellString;
          $(hiddenIdentity).datepicker({
                 buttonImage: "../images/calendar.gif",buttonImageOnly: true,changeMonth: true,changeYear: true,showOn: "both", onSelect: function(dateText, inst) { 
                 $(dateIdentity).val(dateText);
           }
           });
          template = '<input type="text" id = "foodDateInput'+rowString+cellString+'" style="width:75px;" value='+value+'></input><input type="hidden" id="dpFood'+rowString+cellString+'"  ></input>';
      }


      return template;

  }

但是没有显示日期选择器图标，这意味着没有调用datepicker（）。

如果我只为一个网格编写此格式化程序，它可以正常工作。

适用于一个网格的代码：

function DateFormatter (row, cell, value, columnDef, dataContext) {

      var rowString = row.toString();
      var cellString = cell.toString();
      var hiddenIdentitySeason = "#dpSeason"+rowString+cellString;        
     var dateIdentitySeason = "#seasonDateInput"+rowString+cellString;
      $(hiddenIdentitySeason).datepicker({
             buttonImage: "../images/calendar.gif",buttonImageOnly: true,changeMonth: true,changeYear: true,showOn: "both", onSelect: function(dateText, inst) { 
             $(dateIdentitySeason).val(dateText);
       }
       });
     return '<input type="text" id = "seasonDateInput'+rowString+cellString+'" style="width:75px;" value='+value+'></input><input type="hidden" id="dpSeason'+rowString+cellString+'"  ></input>';  


  }

请提供建议。

Answer 1

根据评论，季节网格实际上在食物网格初始化时加载了日期选择器。如果只创建季节网格，则不应该获得日期选择器。这是因为从格式化程序返回的模板是datepicker所需要的，以便正确地绑定＆＃34;本身并且在查找时在DOM中不可用。

一种可能的解决方案是设置一个小超时以允许函数返回SlickGrid的模板以插入到DOM中，从而允许jQuery正确地查找元素。请参阅以下示例：

＆＃13;

<html>
  
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/examples/examples.css">
 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
  
 
<style>
 
    .ui-datepicker-calendar {
        background-color: #A8A8A8 
    }
    .ui-datepicker-title {
        background-color: #606060
    }
</style>
<div id="myGrid" style="width:600px;height:250px;"></div>
<div hidden><span id='dataDump'></span><button id='debugB'>Debug</button></div>
<script>
    
 var grid;
 var data = [];
 
 function DateFormatter (row, cell, value, columnDef, dataContext) {

      
      if(columnDef.formatter){
         var id = "DateInput"+row+cell;
         var bind = function() {
          $("#" + id).datepicker({showOn: "button", buttonImage: "http://jqueryui.com/resources/demos/images/calendar.gif",buttonImageOnly: true});     
         }    
         setTimeout(bind, 250)
      
         return '<input type="text" id = "'+id+  '" style="width:60px;" value='+value+'></input>';
      }
      return value;
  }
  
 var columns = [
    {id: "row", name: "Row", field: "row"}
  ];
   
 for (var i = 1; i <= 4; i++) {
    columns.push({
      id: "id" + i,
      name: "Id" + i,
      field: i,
      formatter: i%2 === 0 || i%3 === 0 ? DateFormatter : null
    });
  }

  var options = {
    editable: false,
    forceFitColumns: true,
    enableCellNavigation: true
  };


  $(function () {
    for (var i = 1; i <= 5; i++) {
      var d = (data[i] = {});
      d.row = "Row " + i;
      for (var j = 0; j < columns.length; j++) {
         if(j%3===0 || j %2 ===0){
               d[j] = Math.round(Math.random() * 10) + "/" + Math.round(Math.random() * 10) + "/2014";
        } 
        else {
          d[j] = Math.round(Math.random() * 100);
        }
      }
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
      $("#debugB").click(function(){
          console.log("clicked")
          $("#dataDump").text(JSON.stringify(grid.getData()))
      })
    });
</script>

 
</html>

＆＃13;

自定义格式化程序，用于同一页面上的两个光滑网格

1 个答案: