javascript - 剑道用户界面 : How to display foreign key from remote datasource in grid

Question

我有一个列出声明的 kendoui 网格。其中一列是 lenders，它是 lenders 表的外键引用。我想要的是能够在网格中显示贷方名称而不是其 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。我尝试创建一个本地数据源并且工作正常，所以我现在可以使用远程数据源与我做一些事情。

任何帮助都会很棒

谢谢

Answer 1

简短的回答是你不能。反正不是直接的。参见 here和 here .

您可以(如上述链接帖子中提到的响应)将数据预加载到 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; });

我在延迟的 JQuery 中使用它以确保在我绑定(bind)到网格之前加载我的所有查找:-

$.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');
});

然后您可以使用 countryLookupData 作为您的值。

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

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

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