同一页面上两个光滑网格的自定义格式化程序答案

【问题标题】：Custom Formatter for two slick grids on same page同一页面上两个光滑网格的自定义格式化程序
【发布时间】：2014-12-22 14:58:59
【问题描述】：

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

我用一个网格列名来区分这两个网格。

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>';  


  }

请多多指教。

【问题讨论】：

我感觉问题是由于在您应用/绑定datepicker 时，template 尚未添加到 DOM。当您仅为一个网格编写此格式化程序时，也许您可以详细说明您在做什么。
我以同样的方式应用自定义格式化程序，没有 if else 条件。
另一个网格是否仍然包含列定义以及其中的格式化程序用法？网格的加载顺序是什么？
是的。如果我使用上面给出的两个网格的第二段代码，首先在页面加载时可以正常工作。但是如果我们对两个网格都使用相同的格式化程序模板，则会发生 id 冲突。首先，创建季节网格，然后创建食物网格

标签： jquery slickgrid

【解决方案1】：

根据评论，当食物网格初始化时，季节网格实际上会加载日期选择器。如果您只创建季节网格，则不应获取日期选择器。这是因为从格式化程序返回的模板是 datepicker 正确“绑定”自身所需的模板，并且在查找时在 DOM 中不可用。

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

<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>

【讨论】：