剑道网格将最小值和最大值设置为另一列。

Question

我有这个网格的演示，我想实现当单选百分比被选中的金额值不能超过100。我已经创建的功能 edit 事件来设置最大和最小值。但它仍然没有工作，因为它没有获取一个 amount id。有什么办法可以帮助我们获取ID？

DEMO这里

var grid = $('#grid').kendoGrid({
  dataSource: dataSource,
  editable: true,
  //toolbar: [{ name: "create", text: "Add" }],
  columns: [

    { field: "name", title: "name" },

    { field: "status", title: "Status",
      template: data => data.status == "amt" ? "Amount" : "Percentage",
         editor:    "<input name='status' type='radio' data-bind='checked:status' id='perc' value='perc'>" +
                "<label>Percentage</label><br>" +
                "<input name='status' type='radio' data-bind='checked:status' id='amt' value='amt'>" +
                "<label>Amount</label>"
        },
    { field: "amount", title: "Amount",
        //template: "<div class='amount'>#: amount #</div>",
        //template: "<a href='\\\#' id = '" + amount + "' class='deleteBtn'></a>",
    },
    { command: ["destroy"], title: "&nbsp;" }
  ],
  edit: function(e){


      $("#perc").click(() => {
            //alert('perc');
        if ($("#amount").val() > 100) $("#amount").val(100);
        $("#amount").attr({"max": 100, "min": 0 });
      });

      $("#amt").click(() => {
        //alert('amt');
        $("#amount").removeAttr("max");
        $("#amount").removeAttr("min");
      });


      $("input[name=amount]").change(() => {
          if ($("#perc").prop('checked')) {
          if ($("#amount").val() > 100) $("#amount").val(100);
        }
      });

  }
});

Answer 1

废掉编辑事件处理程序。

相反，使用 columns.editor 函数。它可以获得整个行的 options.model所以，如果 options.model.status 是百分比，将最小和最大属性添加到输入中。