如何在 Kendo 网格中显示二维码？

Question

这是我的 div 但它在 kendo 网格之外

<div>
<div id="qrUrl"></div> 
</div>

这是我的 kendo 网格字段

 columns: [
    {
     field: "Id",
    },
    {
    title: "QrCode",
    width: 300,
    template: function(dataItem) 
    {     
       $(#Qrurl).kendoQRCode({ 
       value: "www.google.com"+ dataItem.Id,
       errorCorrection: "M",
       size: 120,
       border: {
       color: "#000000",
       width: 5
               }
       });
    }

在这种情况下，我的 Qrcode 使用 uniq (url+id ) 生成了外部网格 但我想要我的 kendo 网格中的所有二维码。

我尝试了这个代码和另一个代码，但仍然没有达到标准。

 template: function(dataItem) 
        {     
           $('<div></div>')
           .kendoQRCode({ 
           value: "www.google.com"+ dataItem.Id,
           errorCorrection: "M",
           size: 120,
           border: {
           color: "#000000",
           width: 5
                   }
           });
        }

如果当时我尝试使用 div ID，我会根据要求获得二维码，但在网格之外，我想在我的网格中完成这件事。

请帮助我。

谢谢你的提前。

Answer 1

模板函数需要 return 将要使用的 HTML 的字符串。我会让模板在网格单元格中创建一个空的 DIV，其中包含 class="QRME" 和 id 的数据属性。然后在 grid 的 dataBound 事件中，循环遍历所有 QRME div，获取 id 并创建 QR 码：

$("#grid").kendoGrid({
  columns: [   {
     field: "Id",
    }, {
    title: "QrCode",
    width: 300,
    template: function(dataItem) {
      return "<div class='QRME' data-id='" + kendo.htmlEncode(dataItem.Id) + "'></div>";
    }
  }],
  dataSource: [ { Id: "1" }, { Id: "2" }, { Id: "3" }  ],
  dataBound: function(e) {
    $("div.QRME").each(function(idx){
         $(this).kendoQRCode({ 
         value: "www.google.com"+ $(this).data("id"),
         errorCorrection: "M",
         size: 120,
         border: {
            color: "#000000",
            width: 5
         }
       });
    });
  }
});

工作DEMO

Answer 2

我无法使用 dataBound，因此我一直在寻找适用于模板的解决方案。 首先，我制作了一个 div 实例并将二维码放在那里，然后 return outerHTML.

template: function(dataItem) {
  return jQuery("<div class='qrcode'></div>")
          .kendoQRCode({
          value: kendo.htmlEncode(dataItem["Id"]),
          errorCorrection: "M",
          size: 60,
          border: {
            color: "#000",
            width: 1
          }
        }).html();
}

工作DEMO