jquery Kendo NumericTextBox更新动态序列号

5lhxktic  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(108)

bounty将在6天后过期。回答此问题可获得+100的声望奖励。Nixoderm正在寻找规范答案

我创建了一个多文本框,每个文本框将根据输入值动态有序地更新。每个文本框只能有唯一的值,除了0。
Here what I have done到目前为止。
例如

  • 如果在COLUMN_3中输入值1,则下一列将更新为2。这意味着结果将为 [ COLUMN_3 = 1,COLUMN_4 = 2,COLUMN_5 = 3,COLUMN_1 = 4,COLUMN_2 = 5 ]
  • 它还允许输入0值。例如,如果COLUMN_1和COLUMN_2值为0,则它将仅更新 [ COLUMN_1 = 0,COLUMN_2 = 0,COLUMN_3 = 1,COLUMN_4 = 2,COLUMN_5 = 3 ]
btxsgosb

btxsgosb1#

在这上面花了几个小时之后,我想出了这个解决方案。需要帮忙,你能按照你的要求用所有的正面和负面场景测试这个解决方案吗,并让我知道失败或不工作的场景。
下面的演示对于non-zero值运行良好,因为我仍然对零值要求感到困惑。
让我们假设这种情况,假设在column_1中我们已经有一个零值,用户试图在column_3中输入零值,那么预期的输出是什么?当我们更新焦点输出/更改的输入时。
现场演示**:**

$(document).ready(function () {

  for(var x=1; x<=5; x++){
    var element = "#input_column"+x;
    $(element).kendoNumericTextBox({
      value:x,
      spinners: true,
      restrictDecimals: true,
      selectOnFocus: true,
      decimals: 0,
      format: "n0",
      min:0,
      max:5,
      change: changeNspin,
      spin: changeNspin
    });
  }

});

function changeNspin() {
  // Variable declarations and initializations
  const thiselement = "#"+this.element[0].id;
  const thisvalue = this.value();
  let checkValue = [1,2,3,4,5];
  let x = 1;
  let y = 1;

  // Logic to update the input elements comes after the current updated input.
  for (let i = Number(thiselement.at(-1)) + 1; i <= 5; i++) {
    const inputAfterCurrent = "#input_column"+i;
    
    if (thisvalue == 5) {
      $(inputAfterCurrent).data("kendoNumericTextBox").value(x)
    } else if (thisvalue > 5) {
      $(thiselement).data("kendoNumericTextBox").value(5)
      $(inputAfterCurrent).data("kendoNumericTextBox").value(x)
    } else if (thisvalue < 5) {
      const newVal = x + thisvalue
      if (newVal <= 5) {
        $(inputAfterCurrent).data("kendoNumericTextBox").value(newVal)
      } else {
        $(inputAfterCurrent).data("kendoNumericTextBox").value(y)
        y += 1;
      }
    }
    x += 1;
  }

  // Logic to update the input elements comes before the current updated input.
  for (let i = 1; i < Number(thiselement.at(-1)); i++) {
    const inputBeforeCurrent = "#input_column"+i;
    const lastInputValue = $('#input_column5').data("kendoNumericTextBox").value();
    checkValue.unshift.apply(checkValue, checkValue.splice(checkValue.indexOf(lastInputValue), checkValue.length - 1));
    $(inputBeforeCurrent).data("kendoNumericTextBox").value(checkValue[i])
  }
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>

<input id="input_column1" style="width:60px;"/>
<input id="input_column2" style="width:60px;"/>
<input id="input_column3" style="width:60px;"/>
<input id="input_column4" style="width:60px;"/>
<input id="input_column5" style="width:60px;"/>

相关问题