展开和折叠详细信息主行网格JSON输入未设置子集

时间:2019-06-26 21:07:50

标签: angularjs kendo-grid

我正在尝试使用角度剑道UI网格创建一个表,该表显示一个json文件中的摘要表,单击摘要表中的一行应展开以显示来自其他json文件的详细值。它们都有一个公共的ID字段。我实现了类似于(https://docs.telerik.com/kendo-ui/knowledge-base/grid-master-row-click-expand-collapse-detail)的方法,但是问题是我选择的详细表中的任何行都显示了所有行,而不仅仅是与所选ID对应的行。

我已经创建了与上述URL类似的脚本,但是可用的帮助大多是jQuery / Ajax,但是此页面是更大应用程序的一部分,我仅限于使用angularJS和kendoUI。

    (<any>$("#alerts-table-cpu")).kendoGrid({
        dataSource: {
          transport: {
            read: {
             url: './assets/count_summary.json',
             type: "get",
             dataType: "json"
            }
          },
          pageSize: 30
        },
        selectable: "multiple",
        allowCopy: true,
        height: 700,
        columnMenu: true,
        scrollable: {
          virtual: true
        },
        pageable: {
          pageSizes: [30, 50, 100, 500, 1000, "all"]
        },
        autowidth: true,
        resizable: true,
        reorderable: true,
        filterable: {
          mode: "row",
          operators: {
            string: {
              contains: "Contains",
              eq: "Equal to",
              neq: "Not equal to",
              startswith: "Starts with",
              doesnotcontain: "Doesn't contain"
            }
          }
        },
        groupable: true,
        sortable: true,
        detailInit: detailInit,
        dataBound: function(e) {
          var grid = e.sender;

          grid.tbody.find("tr.k-master-row").click(function(e) {
              var target = $(e.target);
              if ((target.hasClass("k-i-expand")) || (target.hasClass("k-i-collapse"))) {
                  return;
              }

              var row = target.closest("tr.k-master-row");
              var icon = row.find(".k-i-expand");

              if (icon.length) {
                  grid.expandRow(row);
              } else {
                  grid.collapseRow(row);
              }
          })
        },
        columns: [
         { field: "rcrd_date", title: "Date", width: 60 },
         { field: "occurences", title: "spikes", width: 60 }
        ],
      });
      function detailInit(e) {
        (<any>$("<div/>").appendTo(e.detailCell)).kendoGrid({
          dataSource: {
            transport: {
              read: {
                url: './assets/detailed.json',
                type: "get",
                dataType: "json"
              }
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: [
                {field: "id", operator: "eq", value: e.id}
              ]
          },
          scrollable: false,
          sortable: true,
          pageable: true,
          columns: [
            { field: "timestamp", title: "Timestamp", width: 150 },
            { field: "value", title: "spike", width: 80 }
        ]
        });
      }

当我在摘要表中单击一个日期时,它将在该日期扩展所有时间戳,但会显示所有日期的所有时间戳。

0 个答案:

没有答案