如何打开编辑按钮点击js弹出窗口点击

Question

我正在使用knockoutjs将用户数据绑定到表格的示例代码，当我点击特定的用户名详细信息时，它会打开该用户行下方的新tr特定用户的详细信息，但我想在弹出窗口中打开。怎么做。 以下是我的HTML

<tbody data-bind="foreach: Users"> 
     <tr> 
      <td><span data-bind="css: { clickable: !$root.EditId() }, click: $root.Edit, text: Name"></span></td> 
      <td data-bind="text: LoginName"></td> 
      <td data-bind="text: SpaceName"></td> 
      <td data-bind="text: Email"></td> 
      <td data-bind="text: moment(LastLoginDate).format('M/DD/YYYY h:MM Z')"></td> 
     </tr> 
     <tr data-bind="visible: $root.EditId() === Id"> 
      <td colspan="3"> 
       <div id="EditEbillingPanel"> 
        <div> 
         <em>E-Billing</em> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingActive_' + Id }">Active: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'EbillingActive_' + Id }, checked: Ebilling() && Ebilling().IsActive" type="checkbox" /> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingEmail_' + Id }">Alternate email: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'EbillingEmai_' + Id }, enable: Ebilling() && Ebilling().IsActive, value: Ebilling() ? Ebilling().Email : null, valueUpdate: 'keyup'" type="email" /> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingReminderDays_' + Id }">Reminder: </label> 
        </div> 
        <div class="field"> 
         <select data-bind="attr: { 'id': 'EbillingReminderDays_' + Id }, enable: Ebilling() && Ebilling().IsActive, value: Ebilling() ? Ebilling().ReminderDays : null"> 
          <option value="0">Do not send me a reminder</option> 
          <option value="1">1 day before the due date</option> 
          <option value="2">2 days before the due date</option> 
          <option value="3">3 days before the due date</option> 
          <option value="4">4 days before the due date</option> 
          <option value="5">5 days before the due date</option> 
          <option value="6">6 days before the due date</option> 
          <option value="7">7 days before the due date</option> 
         </select> 
        </div> 
       </div> 
       <div id="EditAccountPanel"> 
        <div> 
         <em>Password</em> 
        </div> 
        <div> 
         <label data-bind="attr: { 'for': 'ForcePasswordChange_' + Id }">Force password change: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'ForcePasswordChange_' + Id }, checked: ForcePasswordChange" type="checkbox" /> 
        </div> 
        <div id="PasswordInstructions"> 
         If user does not remember their password, enter temporary password here. User is required to have a password to enter a password change. Temporary password must be at least 8 characters long, with at least one numeric character and one of the following special symbols: !@#$%^&*()+= 
        </div> 
        <div> 
         <label data-bind="attr: { 'for': 'TempPassword_' + Id }">Temporary password:</label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'TempPassword_' + Id }, enable: ForcePasswordChange, value: TempPassword, valueUpdate: 'keyup'" type="text" /> 
        </div> 
       </div> 
       <div id="EditActionPanel"> 
        <span data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span> 
        <span class="clickable" data-bind="click: $root.CancelEdit">Cancel</span> 
       </div> 
      </td> 
      <td colspan="2"> 
       <div id="UserInfoPanel"> 
        <div> 
         <em>User Info</em> 
        </div> 
        <!-- ko if: CreatedDate() --> 
        <div data-bind="text: 'Created: ' + moment(CreatedDate()).format('M/DD/YYYY h:MM Z')"></div> 
        <!-- /ko --> 
        <div>AutoPay: <span data-bind="text: IsEnrolledInAutoPay() ? 'enrolled' : 'not enrolled'"></span></div> 
        <div data-bind="text: 'Bank account info: ' + (BankAccountOnFile() ? 'Y' : 'N')"></div> 
        <div data-bind="text: 'Credit card info: ' + (CreditCardOnFile() ? 'Y' : 'N')"></div> 
        <div data-bind="css: { 'cc-expired': CreditCardIsExpired() || false }, text: 'Credit card expiration: ' + ((CreditCardExpiration() === '' || CreditCardExpiration() === '0/0') ? 'n/a' : CreditCardExpiration())"></div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 

Answer 1

，你可以有你的编辑和每一个选择你的弹出用户编辑更新时间变量观测变量。

只是作为一个例子https://jsfiddle.net/kyr6w2x3/154/

HTML：

<table> 
<tbody data-bind="foreach: Users"> 
     <tr> 
      <td></td> 
      <td data-bind="text: LoginName"></td> 
      <td data-bind="text: SpaceName"></td> 
      <td data-bind="text: Email"></td> 
      <td> <input type="button" value="Edit" data-bind="click:$parent.EditUser"></td> 
     </tr> 
    </tbody> 
</table> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
    <div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <h5 > Edit</h5> 
     <input type="text" data-bind="textInput:EditLoginName" > 
     <input type="text" data-bind="textInput:EditEamil" > 
     <input type="button" value="update" data-bind="click:UpdateUser"> 
    </div> 
    </div> 
</div> 

JS：

var data = [{Id:1,LoginName:"Dave" ,SpaceName : "SpaceName1" , Email:"Dave@test.com" },{Id:2,LoginName:"Mike" ,SpaceName : "SpaceName2" , Email:"Mike@test.com" },{Id:3,LoginName:"Kevin" ,SpaceName : "SpaceName3" , Email:"Kevin@test.com" }] 

var AppViewModel = function(){ 
    var self = this; 
    self.EditLoginName = ko.observable(); 
    self.EditEamil = ko.observable(); 
    self.SelectedUserId = ko.observable(); 

    self.Users = ko.observableArray($.map(data, function (user) { 
    return new UserViewModel(user); 
    })); 

    self.EditUser = function(user){ 
    $(".bs-example-modal-sm").modal('show') 
    self.EditLoginName(user.LoginName()) 
    self.EditEamil(user.Email()); 
    self.SelectedUserId(user.Id()) 
    } 

    self.UpdateUser = function(){ 
    alert(self.EditLoginName() + " Id: "+self.SelectedUserId() + " is ready to get updated"); 
    } 
} 

var UserViewModel = function (data){ 
    var self = this; 
    self.Id = ko.observable(data.Id) 
    self.LoginName = ko.observable(data.LoginName) 
    self.SpaceName = ko.observable(data.SpaceName) 
    self.Email = ko.observable(data.Email) 
} 
ko.applyBindings(new AppViewModel());