|
|
@@ -0,0 +1,142 @@
|
|
|
+/**
|
|
|
+ * @author horken wong <horken.wong@gmail.com>
|
|
|
+ * @version: v1.0.0
|
|
|
+ * https://github.com/horkenw/bootstrap-table
|
|
|
+ * Click to edit row for bootstrap-table
|
|
|
+ */
|
|
|
+
|
|
|
+(function ($) {
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ $.extend($.fn.bootstrapTable.defaults, {
|
|
|
+ clickEdit: false
|
|
|
+ });
|
|
|
+
|
|
|
+ function setDivision(node, options){
|
|
|
+ var $option = $('<option />');
|
|
|
+ if(options){
|
|
|
+ $(options).each(function(i, v){
|
|
|
+ $option.clone().text(v.idxNum + ' ' +v.name).val(v.idxNum).appendTo(node);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ console.log('Please setup options first!!')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function clikcToEdit(evt, tarNode){
|
|
|
+ var txt = [], table = evt,
|
|
|
+ submit = '<button type="button" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button>',
|
|
|
+ cancel = '<button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>';
|
|
|
+
|
|
|
+ var replaceData = function(){
|
|
|
+ txt = [];
|
|
|
+ tarNode.find('td').find('input[type="text"]').each(function(i, td){
|
|
|
+ txt.push($(td).eq(0).val());
|
|
|
+ });
|
|
|
+ tarNode.find('select').each(function(i, td){
|
|
|
+ txt.push($('#'+td.id+' option:selected').val());
|
|
|
+ });
|
|
|
+ $('#table').bootstrapTable('updateRow', {
|
|
|
+ index: table.$data.thId,
|
|
|
+ row: {
|
|
|
+ noOld: txt[0],
|
|
|
+ area: tarNode.find('select').eq(0).children(':selected').text(),
|
|
|
+ town: tarNode.find('select').eq(1).children(':selected').text(),
|
|
|
+ address: txt[1]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#tooling').remove();
|
|
|
+ table.editing = true;
|
|
|
+ // updateToServerSide(table.$data.itemid, txt);
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+
|
|
|
+ var recoveryData = function(){
|
|
|
+ $('#table').bootstrapTable('updateRow', {
|
|
|
+ index: table.$data.thId,
|
|
|
+ row: {},
|
|
|
+ });
|
|
|
+ $('#tooling').remove();
|
|
|
+ table.editing = true;
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+
|
|
|
+ if(table.editing){
|
|
|
+ var rootid = 0;
|
|
|
+ table.editing = false;
|
|
|
+ table.columns.forEach(function(column, i){
|
|
|
+ if (!column.editable) return;
|
|
|
+
|
|
|
+ switch(column.editable){
|
|
|
+ case 'input':
|
|
|
+ var div=$('<div class="editable-input col-md-12 col-sm-12 col-xs-12" style="position: relative;"/>');
|
|
|
+ txt.push(tarNode.find('td').eq(column.fieldIndex).text());
|
|
|
+ div.append($('<input type="text" class="form-control input-sm"/>'));
|
|
|
+ div.append($('<span class="clear"><i class="fa fa-times-circle-o" aria-hidden="true"></i></span>'));
|
|
|
+ tarNode.find('td').eq(column.fieldIndex).text('').append(div);
|
|
|
+ break;
|
|
|
+ case 'select':
|
|
|
+ var select=$('<select id="'+column.field+'">'), options = $.selectArray[column.field];
|
|
|
+ tarNode.find('td').eq(column.fieldIndex).text('').append(select);
|
|
|
+ setDivision($('#'+column.field), options);
|
|
|
+ break;
|
|
|
+ case 'textarea':
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ console.log(column.fieldIndex+' '+column.editable);
|
|
|
+ }
|
|
|
+
|
|
|
+ }, evt);
|
|
|
+ for(var i=0, l=txt.length; i<l; i++){
|
|
|
+ tarNode.find('input[type="text"]').eq(i).val(txt[i]);
|
|
|
+ }
|
|
|
+ tarNode.find('td').last().append('<div id="tooling" class="editable-buttons"/>');
|
|
|
+ $('.clear').on('click', function(){ $(this).parent().find('input').val('');});
|
|
|
+ $(submit).on('click', replaceData).appendTo('#tooling');
|
|
|
+ $(cancel).on('click', recoveryData).appendTo('#tooling');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateToServerSide(item, data){
|
|
|
+ var itemid = $(item).find('a').attr('href').match(/\d+/g)[0];
|
|
|
+ var datas = {'treeId': itemid, 'oldTreeSerialNo': data[0], 'adminDivision': data[2], 'adminUnit': data[3], 'treeAddr': data[1]}; //傳送至伺服器端的Data產生處，需手動修改對應表格
|
|
|
+ store( 'data/update', datas)
|
|
|
+ }
|
|
|
+
|
|
|
+ var BootstrapTable = $.fn.bootstrapTable.Constructor,
|
|
|
+ _initTable = BootstrapTable.prototype.initTable,
|
|
|
+ _initBody = BootstrapTable.prototype.initBody;
|
|
|
+
|
|
|
+ BootstrapTable.prototype.initTable = function(){
|
|
|
+ var that = this;
|
|
|
+ this.$data = {};
|
|
|
+ _initTable.apply(this, Array.prototype.slice.apply(arguments));
|
|
|
+
|
|
|
+ if (!this.options.clickEdit) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ BootstrapTable.prototype.initBody = function () {
|
|
|
+ var that = this;
|
|
|
+ _initBody.apply(this, Array.prototype.slice.apply(arguments));
|
|
|
+
|
|
|
+ if (!this.options.clickEdit) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var table = this.$tableBody.find('table');
|
|
|
+ that.editing=true;
|
|
|
+
|
|
|
+ table.on('click-row.bs.table', function (e, row, $element, field) {
|
|
|
+ if(field ==='no') return; //|| field ==='noOld'
|
|
|
+ this.$data.thId = $element.data().index;
|
|
|
+ this.$data.itemid = $element.data().uniqueid;
|
|
|
+ this.$data.divi = parseInt(row.area);
|
|
|
+ this.$data.town=parseInt(row.town);
|
|
|
+ clikcToEdit(this, $element);
|
|
|
+ }.bind(this));
|
|
|
+ };
|
|
|
+})(jQuery);
|
Horken