通过单击列中的按钮选择kogrid中的行

Question

我有一个kogrid，其中一列有每行的视图按钮。当我单击“查看”按钮时，我需要显示一个包含该行值的弹出窗口。如何提取选定的行值以传递到弹出窗口

Answer 1

您可以获取所选值并将其放在将成为模态上下文的属性中，请参阅获取行数据并将其作为模态上下文放置的片段。

＆＃13;

＆＃13;

function viewModel() {
  this.currentRowValues = ko.observableArray([]);
  this.gridData = ko.observableArray([{
    name: "Moroni",
    age: 50
  }, {
    name: "Tiancum",
    age: 43
  }, {
    name: "Jacob",
    age: 27
  }, {
    name: "Nephi",
    age: 29
  }, {
    name: "Enos",
    age: 34
  }]);


  this.detailBtnTemplate = '<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-bind="click: $parent.$userViewModel.setModelContext.bind($parent.$userViewModel,$parent)">Detail </button>'

  this.reconciliationGridOptions = {
    data: this.gridData,
    selectedItems: this.currentRowValues,
    afterSelectionChange: function(selectedRow) {

      return true;
    },
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      displayName: 'Action',
      cellTemplate: '<button data-bind="click: $parent.$userViewModel.log.bind($parent.$userViewModel,$parent)">Log</button>'
    }, {
      displayName: 'Detail',
      cellTemplate: this.detailBtnTemplate
    }]
  };

  this.message = "binded context";
  this.modalContext = ko.observable();
};
viewModel.prototype.save = function() {
  alert(ko.toJSON(this.currentRowValues()));
};

//Function that will be binded with the row
viewModel.prototype.log = function(rowData) {
  console.log("row data: ", rowData);
  console.log("entity data: ", rowData.entity);
  //Showing the context binded
  alert(this.message);
};
viewModel.prototype.setModelContext = function(rowData) {
  console.log("entity data: ", rowData.entity);
  this.modalContext({name:ko.observable(rowData.entity.name),age: ko.observable(rowData.entity.age)});
};


ko.applyBindings(new viewModel());

＆＃13;

.gridStyle {
  border: 1px solid rgb(212, 212, 212);
  width: 400px;
  height: 300px;
}
.selectedItems {
  border: solid black 1px;
  padding: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.lukej.me/kogrid/2.0.6/KoGrid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdn.lukej.me/kogrid/2.0.6/koGrid.debug.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="gridStyle" id="reconciliationGrid" data-bind="koGrid: reconciliationGridOptions"></div>

<button data-bind="click: save">Save Example</button>
<br/>
<div class="selectedItems" data-bind="foreach: currentRowValues">
  <span data-bind="text:ko.toJSON($data)"></span>
</div>




<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-bind="with: modalContext">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Detail Person</h4>
      </div>
      <div class="modal-body">
        <label for="name">Name</label>
        <input id="name" type="text" data-bind="value: name" />
        <label for="age">Age</label>
        <input id="age" type="number" data-bind="value: age" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;