bootstrap-table-click-edit-row.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /**
  2. * @author horken wong <horken.wong@gmail.com>
  3. * @version: v1.0.0
  4. * https://github.com/horkenw/bootstrap-table
  5. * Click to edit row for bootstrap-table
  6. */
  7. (function ($) {
  8. 'use strict';
  9. $.extend($.fn.bootstrapTable.defaults, {
  10. clickEdit: false
  11. });
  12. function setDivision(node, options){
  13. var $option = $('<option />');
  14. if(options){
  15. $(options).each(function(i, v){
  16. $option.clone().text(v.idxNum + ' ' +v.name).val(v.idxNum).appendTo(node);
  17. })
  18. }
  19. else{
  20. console.log('Please setup options first!!')
  21. }
  22. }
  23. function clikcToEdit(evt, tarNode){
  24. var txt = [], table = evt,
  25. submit = '<button type="button" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button>',
  26. cancel = '<button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>';
  27. var replaceData = function(){
  28. txt = [];
  29. tarNode.find('td').find('input[type="text"]').each(function(i, td){
  30. txt.push($(td).eq(0).val());
  31. });
  32. tarNode.find('select').each(function(i, td){
  33. txt.push($('#'+td.id+' option:selected').val());
  34. });
  35. $('#table').bootstrapTable('updateRow', {
  36. index: table.$data.thId,
  37. row: {
  38. noOld: txt[0],
  39. area: tarNode.find('select').eq(0).children(':selected').text(),
  40. town: tarNode.find('select').eq(1).children(':selected').text(),
  41. address: txt[1]
  42. }
  43. });
  44. $('#tooling').remove();
  45. table.editing = true;
  46. // updateToServerSide(table.$data.itemid, txt);
  47. return false;
  48. };
  49. var recoveryData = function(){
  50. $('#table').bootstrapTable('updateRow', {
  51. index: table.$data.thId,
  52. row: {},
  53. });
  54. $('#tooling').remove();
  55. table.editing = true;
  56. return false;
  57. };
  58. if(table.editing){
  59. var rootid = 0;
  60. table.editing = false;
  61. table.columns.forEach(function(column, i){
  62. if (!column.editable) return;
  63. switch(column.editable){
  64. case 'input':
  65. var div=$('<div class="editable-input col-md-12 col-sm-12 col-xs-12" style="position: relative;"/>');
  66. txt.push(tarNode.find('td').eq(column.fieldIndex).text());
  67. div.append($('<input type="text" class="form-control input-sm"/>'));
  68. div.append($('<span class="clear"><i class="fa fa-times-circle-o" aria-hidden="true"></i></span>'));
  69. tarNode.find('td').eq(column.fieldIndex).text('').append(div);
  70. break;
  71. case 'select':
  72. var select=$('<select id="'+column.field+'">'), options = $.selectArray[column.field];
  73. tarNode.find('td').eq(column.fieldIndex).text('').append(select);
  74. setDivision($('#'+column.field), options);
  75. break;
  76. case 'textarea':
  77. break;
  78. default:
  79. console.log(column.fieldIndex+' '+column.editable);
  80. }
  81. }, evt);
  82. for(var i=0, l=txt.length; i<l; i++){
  83. tarNode.find('input[type="text"]').eq(i).val(txt[i]);
  84. }
  85. tarNode.find('td').last().append('<div id="tooling" class="editable-buttons"/>');
  86. $('.clear').on('click', function(){ $(this).parent().find('input').val('');});
  87. $(submit).on('click', replaceData).appendTo('#tooling');
  88. $(cancel).on('click', recoveryData).appendTo('#tooling');
  89. }
  90. }
  91. function updateToServerSide(item, data){
  92. var itemid = $(item).find('a').attr('href').match(/\d+/g)[0];
  93. var datas = {'treeId': itemid, 'oldTreeSerialNo': data[0], 'adminDivision': data[2], 'adminUnit': data[3], 'treeAddr': data[1]}; //傳送至伺服器端的Data產生處,需手動修改對應表格
  94. store( 'data/update', datas)
  95. }
  96. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  97. _initTable = BootstrapTable.prototype.initTable,
  98. _initBody = BootstrapTable.prototype.initBody;
  99. BootstrapTable.prototype.initTable = function(){
  100. var that = this;
  101. this.$data = {};
  102. _initTable.apply(this, Array.prototype.slice.apply(arguments));
  103. if (!this.options.clickEdit) {
  104. return;
  105. }
  106. };
  107. BootstrapTable.prototype.initBody = function () {
  108. var that = this;
  109. _initBody.apply(this, Array.prototype.slice.apply(arguments));
  110. if (!this.options.clickEdit) {
  111. return;
  112. }
  113. var table = this.$tableBody.find('table');
  114. that.editing=true;
  115. table.on('click-row.bs.table', function (e, row, $element, field) {
  116. if(field ==='no') return; //|| field ==='noOld'
  117. this.$data.thId = $element.data().index;
  118. this.$data.itemid = $element.data().uniqueid;
  119. this.$data.divi = parseInt(row.area);
  120. this.$data.town=parseInt(row.town);
  121. clikcToEdit(this, $element);
  122. }.bind(this));
  123. };
  124. })(jQuery);