首页 > 解决方案 > 剑道甘特图更改列值

问题描述

我将 Kendo UI 用于 jQuery - Gantt 小部件。数据模型包含两个字段(Value1 和 Value2)。如何使用单选按钮将列中值的显示从 Value1 切换到 Value2 并向后切换(不向服务器重新发送请求)?以及如何根据参数(在列中显示什么值)首先初始化列?

public MyData {
  Id: number;
  PeriodStart: date;
  PeriodEnd: date;
  Value1: string;
  Value2: string;
}

$("#myGantt").kendoGantt({
  toolbar: [
    { template: kendo.template($("#MyTemplate").html()) }
  ],
  columns: [
    { field: "Id", title: "Id" },
    { field: "start", title: "Date begin" },
    { field: "end", title: "Date end" },
    { field: "TODO", title: "Value1 or Value2", width: 100 }
  ],
  ...
});

<script id="MyTemplate" type="text/x-kendo-template">
  <div>
    <div id="ganttRadioGroup">
      <label><input type="radio" name="nameGantt" id="name1" value="1" checked>Value 1</label>
      <label><input type="radio" name="nameGantt" id="name2" value="2">Value 2</label>
    </div>    
  </div>
</script>
<div id="myGantt"></div>

如何切换值?

$("#ganttRadioGroup input").on("change", function () {
  let selectedRadioValue = $("input[name=nameGantt]:checked", "#ganttRadioGroup").val();
  // TODO
}

标签: javascriptjquerytypescriptkendo-uikendo-gantt

解决方案


推荐阅读