elu的程市手札

.lefttd{
  background-color: #e6ffff;
  width:80px;
}
.importSstable{
  width:100%;
}
.importSstable td{
  border: 1px solid #ddd;
  padding: 5px;
  text-align: left;
}

<div class="modal fade modal-center" id="getImportSsdata" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">檢視獎學金申請資料</h4>
      </div>
      <div class="modal-body">
        <table class="importSstable"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div>
    </div>
  </div>
</div>

columns: [
  {
    attributes: {style: 'text-align: center;'},
    headerAttributes: {style: 'font-weight: bolder; text-align: center;'},
    title: "選擇",
    template: function(dataItem){
        return '<button type="button" class="btn btn-warning" name="getData">檢視</button>'
    }
  }
]


$(document).on('click', 'button[class^="btn btn-warning"][type="button"]', function() {
  switch(this.name) {
    case 'getData': {
      var tr = this.closest('tr')
      var obj = $(tr.closest('[data-role="grid"]')).data('kendoGrid').dataItem(tr).toJSON()
      var l =Object.keys(obj).length;
      //先將table的所有tr資料刪除避免顯示出過去資料
      $(".importSstable tr").remove();
      for (var i=0;i<l; i++) { //不建議使用此方法，建議使用下方取得方法1、2
        //依照資料庫所有的欄位自動顯示欄位名稱與內容
        $(".importSstable").append('<tr><td class="lefttd">'+Object.keys(obj)[i]+'</td><td>'+Object.values(obj)[i]+'</td></tr>');
      }
    var a= obj
    //另取得方法 1
    for(var k in obj) {
      console.log(k, a[k])
    }
    //另取得方法 2
    $.each(obj, function(i,v) {
      console.log(i, v)
    })
    //顯示modal
    $("#getImportSsdata").modal();
      break
    }
  }
})