Question

我有一个包含4列的表格。 [ID，FIRSTNAME，LASTNAME，ADDRESS]。我在kendogrid上显示3个cloumns [ID，FIRSTNAME，LASTNAME]。我想要做的是点击FIRSTNAME它应该在新窗口显示地址。但我没有得到它。我试图获取FIRSTNAME上的链接但不知道如何继续。我是这个概念的新手。下面是我的代码。我需要为地址创建一个剑道网格或它是如何工作的。我想要的是ID上的超链接来显示地址。

感谢。

 Grid = $("#grid").kendoGrid({
                      dataSource:gridDS,
                      height: 450,
                      pageable: false,
                      sortable: true,
                          binding: true
         columns: [

                 {
                     field: "ID",
                     title: "ID",
                     headerTemplate: '<span class="tbl-hdr">ID</span>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 85
                 },
                 {
                     field: "FIRSTNAME",
                     title: "FIRSTNAME",
                     headerTemplate: '<span class="tbl-hdr">FIRSTNAME</span>', 
                     template: '<a href="#=FIRSTNAME#">#=ADDRESS#</a>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 25
                 },
                 {
                     field: "LASTNAME",
                     title: "LASTNAME",
                     headerTemplate: '<span class="tbl-hdr">LASTNAME</span>',
                     attributes: {
                         style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                     },
                     width: 85
                 },

                  {
                      command: [
                        {
                            name: "destroy",
                            template: "<div class='k-button delete-btn'><span class='k-icon k-delete'></span></div>",
                            text: "remove"
                        },
                        {
                            text: "Edit",
                            template: "<div class='k-button edit-btn'><span class='k-icon k-edit'></span></div>",

                        },

                      ],
                      width: 40,
                      attributes: {
                          style: "vertical-align: top; text-align: center;"
                      }
                  },
             ],
             editable: "popup"
         }).data('kendoGrid');
     }

Answer 1

我认为这不是 kendo 问题，而是关于JS / jQuery。我建议绑定网格上的事件以从模板中的该链接获取所有点击事件。然后，您可以获取点击的 dataItem及其行数据。

.on("click", "a.name-link", function() {
    var tr = $(this).closest("tr");
    var dataItem = $("#grid").data("kendoGrid").dataItem(tr);

    window.alert(dataItem.Address);
});

Working Demo

目前还不清楚您希望如何使用地址打开新窗口。你的意思是：一个全新的浏览器选项卡/窗口或你的应用程序中的JS Popup等什么东西？

如果您需要新的浏览器选项卡/窗口，则应使用window.open()将行id传递给它，然后在此窗口中，您必须再次访问数据库以显示信息。现在，如果您想在应用内部使用javascript弹出窗口（例如Bootstrap's Modal），则可以使用之前检索到的dataItem来填充它。信息已经存在。

Answer 2

我更新了代码。您可以单击firstName查看地址。

如果您想更进一步，可以点击地址按钮在弹出窗口中查看地址。

Sample at Telerik Kendo UI Dojo

itertools.groupby()

剑道网格超链接

2 个答案: