淘汰赛：编程选择行和数据录入过程中设置重点

请检查下面的jsfiddle：http://jsfiddle.net/yv8h8hca/1/淘汰赛：编程选择行和数据录入过程中设置重点

来源后： Highlight selected row using knockout

下已经发生：

行被选定元件。
行可以更新。
行可以添加到数组中。

我希望用户能够在一行中填写数据，然后按下更新按钮以自动选择新行（使用现有的黄色背景）并将焦点设置为ID列设置它准备编辑。

我想避免让用户用鼠标点击新行来选择它。

HTML：

<table class="defaultGrid"> 
    <thead> 
     <tr> 
      <td> 
       <button class="btn" data-bind="click: NewDetail">New</button> 
      </td> 
     </tr> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: model.Things"> 
     <tr data-bind="click: $root.selectThing, css: { selected: isSelected} "> 
      <td> 
       <input type="text" data-bind="value: ID"> 
      </td> 
      <td> 
       <input type="text" data-bind="value: Name"> 
      </td> 
      <td> 
       <button style="width:60px" data-bind="click: $parent.UpdateDetail">Update</button> 
      </td> 
      <td> 
       <button style="width:64px" data-bind="click: $parent.RemoveDetail">Remove</button> 
      </td> 
     </tr> 
    </tbody> 
</table>

的JavaScript：

$(function() { 
    Thing = function (id, name, selected) { 

     var self = this; 
     self.ID = id, 
     self.Name = name, 
     self.isSelected = ko.computed(function() { 
      return selected() === self; 

     }); 
    }; 

    function viewModel() { 
     var self = this; 
     self.model = {}; 
     self.model.CurrentDisplayThing = ko.observable(); 
     self.model.Things = ko.observableArray(
     [ 
     new Thing(1, "Thing 1", self.model.CurrentDisplayThing), 
     new Thing(2, "Thing 2", self.model.CurrentDisplayThing), 
     new Thing(3, "Thing 3", self.model.CurrentDisplayThing)]); 
     self.selectThing = function (item) { 
      self.model.CurrentDisplayThing(item); 
     }; 

     this.NewDetail = function() { 
      var item = new Thing(4, "Thing 4", self.model.CurrentDisplayThing); 
      self.model.Things.push(item); 
      self.model.CurrentDisplayThing(item); 
     }; 

     // Update NVD 
     this.UpdateDetail = function (entry) { 
      // code to update detail.... 

      // Now, create new row for next input 

      var item = new Thing(entry.ID + 1, "", self.model.CurrentDisplayThing); 
      self.model.Things.push(item); 
      self.model.CurrentDisplayThing(item); 
     }; 

     self.RemoveDetail = function (entry) { 
      self.model.Things.remove(entry); 
     }; 
    } 
    ko.applyBindings(new viewModel()); 
});

来源

2014-09-05 user1309226

为什么是“更新”，并称新行？ – haim770 2014-09-05 06:59:21

这是为了快速输入数据。用户可能需要输入数百行。所以，在更新当前行后，我们为下一行设置数据输入。我想尽可能避免在这里使用鼠标。我知道表单上的添加新按钮，但同样，在您键入时创建新行以保持数据输入流将会很好。 – user1309226 2014-09-05 07:04:03

我现在遇到的问题是，除非您用鼠标单击一行，否则无法选择它。由于按下“更新”按钮，我希望能够在创建后选择一行。 – user1309226 2014-09-05 07:13:17

要选择新行我不得不停止冒泡否则会选择点击的地方保存按钮行的行单击事件。

<td><button style="width:60px" data-bind="event: {click : $parent.Detail }, clickBubble: false">Save</button></td>

要设置编辑模式我设置hasfocus数据绑定属性：

<td><input type="text" class="nvd" data-bind="value: ID, hasfocus: isNew"></td>

来源

2014-09-05 10:58:23 user1309226

淘汰赛：编程选择行和数据录入过程中设置重点

回答

相关问题