Javascript kendoui：如何在网格中显示来自远程数据源的外键

我有一个kendoui表格，上面列出了索赔。其中一列是贷方，它是贷方表的外键引用。我想要的是能够在网格中显示贷方名称，而不是其id引用

我已按如下方式设置贷方数据源

var dsLenders = new kendo.data.DataSource({
    transport: {
        read: {
          url: "../data/lenders/",
          dataType: "jsonp"
      },
      parameterMap: function(options, operation) {
          if (operation === "read") {
              return options;
          }
      }
    }
});

网格是这样的

 $("#gridClaims").kendoGrid({
      dataSource: claimData,
      autoSync:true,
      batch: true,
      pageable: {
          refresh: true,
          pageSizes: true
      },
      filterable: true,
      sortable: true,
      selectable: "true",
      editable: {
          mode: "popup",
          confirmation: "Are you sure you want to delete this record?",
          template: $("#claimFormPopup").html()
      },
      navigable: true,  // enables keyboard navigation in the grid
      toolbar: ["create"],  // adds insert buttons
      columns: [
          { field:"id_clm", title:"Ref", width: "80px;" },
          { field:"status_clm", title:"Status", width: "80px;" },
          { field:"idldr_clm", title:"Lender", values: dsLenders },
          { field:"type_clm", title:"Claim Type"},
          { field:"value_clm", title:"Value", width: "80px;", format:"{0:c2}", attributes:{style:"text-align:right;"}},
          { field:"created", title:"Created", width: "80px;", format: "{0:dd/MM/yyyy}"},
          { field:"updated", title:"Updated", width: "80px;", format: "{0:dd/MM/yyyy}"},
          { field:"user", title:"User" , width: "100px;"},
          { command: [
              {text: "Details", className: "claim-details"},
              "destroy"
            ],
            title: " ",
            width: "160px"
          }
      ]
  });

但是，它仍然在“贷方”列中显示id。我试着创建一个本地数据源，效果很好，所以我现在可以使用远程数据源

任何帮助都会很好

---

谢谢

简而言之，你不能。反正不是直接的。见和

您可以（正如上面链接的帖子中提到的）将数据预加载到var中，然后将其用作列定义的数据

我用这样的方式：-

function getLookupData(type, callback) {
    return $.ajax({
        dataType: 'json',
        url: '/lookup/' + type,
        success: function (data) {
            callback(data);
        }
    });
}

var countryLookupData;
getLookupData('country', function (data) { countryLookupData = data; });

然后我用这个：-

function getLookupData(type, callback) {
    return $.ajax({
        dataType: 'json',
        url: '/lookup/' + type,
        success: function (data) {
            callback(data);
        }
    });
}

var countryLookupData;
getLookupData('country', function (data) { countryLookupData = data; });

我在JQuery中使用它，以确保在绑定到网格之前加载所有查找：-

$.when(
    getLookupData('country', function (data) { countryLookupData = data; }),
    getLookupData('state', function (data) { stateLookupData = data; }),
    getLookupData('company', function (data) { companyLookupData = data; })
)
.then(function () {
    bindGrid();
}).fail(function () {
    alert('Error loading lookup data');
});

然后，您可以使用

countrylookupdatea

获取您的值

您也可以使用自定义网格编辑器，但是您可能会发现仍然需要将数据加载到var中（而不是使用带有DropDownList的数据源），并确保在网格之前加载数据，因为您很可能需要查找列模板，以便在网格中显示新选定的值

我无法让ForeignKey以任何有用的方式工作，所以我最终使用了自定义编辑器，因为您对它们有更多的控制

---

还有一个问题：在定义列之前，确保已加载查找数据。我使用了一个列数组，它是在一个变量中定义的，然后我附加到网格定义中。。。即使在使用网格之前加载了查找数据，但如果在列定义之后定义了查找数据，它也不会工作。

尽管这篇文章已经发表了两年，但我仍然分享我的解决方案

1） 假设api url（）将返回：

{
    "odata.metadata":"http://localhost/api/$metadata#term","value":[
        {
            "value":2,"text":"2016-2020"
        },{
            "value":1,"text":"2012-2016"
        }
    ]
}

请注意，属性名称必须为“text”和“value”

2） 显示外部表中的术语名称（文本），而不是术语id（值）。 请参见网格列“术语\ id”，如果添加“值：数据\术语”，将创建dropdownlist

$.when（$.getJSON（“http://localhost/api/term）然后（函数（）{
绑定网格（参数[0]。值）；
});
函数绑定网格（数据项）{
$（“#网格”）.kendoGrid({
数据来源：ds_投标人，
可过滤：正确，
可排序：是的，
pageable:对，
可选：“行”，
栏目：[
{字段：“用户类型”，标题：“用户类型”}，
{字段：“用户名”，标题：“用户名”}，
{字段：“term_id”，标题：“term”，值：data_term}
],
可编辑：{
模式：“弹出”，
}
});
}

对于那些现在遇到困难的人，支持以下功能：

---

非常感谢。我要试一试。我所做的工作实际上是编辑我的mySQL查询（RIGHT JOIN等），以包括外键值及其ID。然后，我还可以使用COUNT（）函数包括total claims之类的内容。然后，我只需编辑插入并创建脚本，以仅排除表中实际不存在的其他字段。看起来还不错。是的，我得说剑道的难度让人非常恼火。我已经尝试了很多不同的方法来提出一个更优雅的解决方案，但是网格根本无法获取异步加载的新值。所以基本上你必须运行所有的查询来预先填充你的值数组，然后才能对网格做任何事情，非常令人失望。这也使得使用角度指令变得很困难，因为正确处理这个问题的方法是使用Jquery来更新网格。