javascript - 如何在 Kendo Grid 中显示二维码？

Question

这是我的 div，但它在剑道网格之外

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

这是我的剑道格子场

 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 ) 生成了外部网格但我想要我的剑道网格中的所有二维码。

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

 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

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

$("#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