当值设置为对象时，可编辑单元格中的剑道网格 [对象，对象]

Question

我正在尝试使用 dataTextField 和 dataValueField 将对象设置为可编辑单元格， 请查看 plunker 链接...

当我尝试将预定义的对象添加到网格时，值没有显示在文本框中，而是显示 [object, Object]，正确的做法是什么？

http://plnkr.co/edit/0Fx7hZyh0TYllducpfni?p=preview

  objectTextBoxEditor:  function (container, options) {
            $("<input id='\"job\" +   + \"'\" data-text-field=\"JobName\" data-value-field=\"JobId\"  name='" + options.field + "' class=\"k-input k-textbox\" type=\"text\" data-bind=\"value:Job\"/>").appendTo(container);}

Answer 1

在那一行：

dataSource.add({ Id: 1, Job:(viewModel.myjob === null) ? '' : viewModel.myjob.Job, Position:1 });

您正在向网格中添加新对象。在Job 字段中，您有空字符串或viewModel.myjob.Job 值。在文件的顶部，您将其声明为{ "JobName" : "Test", "JobId" : "1"}，所以这是对象而不是字符串。

所以你可能应该更改dataSource.add({ Id: 1, Job:(viewModel.myjob === null) ? '' : viewModel.myjob.Job.JobName, Position:1 });上的dataSource添加功能

Answer 2

在您的columns 设置中，您定义了要绑定到Job 字段的第二列。这个Job 字段是一个包含JobId 和JobName 的对象。网格无法显示对象，因此显示[object Object]。

您添加到列中的dataTextField 和dataValueField 不起作用，因为网格不能那样工作。这些设置适用于下拉菜单等。

您可以通过向列的字段添加另一个级别来指定要从 Job 对象显示的字段，如下所示：

columns: [{"field":"Id","title":"ID", width: "100px"},
          {"field": "Job.JobName", title: "Job", width: "200px",
           editor: viewModel.objectTextBoxEditor,
           dataTextField: "JobName", dataValueField: "JobId"}]

我将"field": "Job" 更改为"field": "Job.JobName"。

另一种解决方案是指定一个模板并自己编写单元格内容。为此，您可以在列中添加 template 字段，如下所示：

columns: [{"field":"Id","title":"ID", width: "100px"},
          {"field": "Job", title: "Job", width: "200px",
           editor: viewModel.objectTextBoxEditor,
           template: "ID: #: Job.JobId #, Name: #: Job.JobName #"}]

我添加了一个 template 字段，显示“ID：[JobId]，名称：[JobName]”。