如何打開編輯按鈕點擊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());