Simple Jquery Plugin: Editable jQuery with Total Calculator

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Editable jQuery with Total Calculation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<style>
.main_wrapper{
padding:20px;
margin:auto;
background:#ccc;
}
</style>
</head>
<body>
<div class="main_wrapper">
<h2>Inventory Record</h2>
<div class="container">
  <table id="mainTable" class="table table-striped">
    <thead>
      <tr>
        <th>Item Name</th>
        <th>Price</th>
        <th>Tax(Rs.)</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pen</td>
        <td>100</td>
        <td>2</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Copy</td>
        <td>200</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Switch</td>
        <td>500</td>
        <td>7</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Laptop</td>
        <td>15000</td>
        <td>200</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Mobile</td>
        <td>3330</td>
        <td>123</td>
        <td>1</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th><strong>TOTAL</strong></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </thead>
      
  </table>
  
</div>
<script>
  $('#mainTable').editableTableWidget().numericInputExample().find('td');
  $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
  window.prettyPrint && prettyPrint();
</script>
</body>
</html>

Create script.js

/* global $ */
/* this is an example for validation and change events */
$.fn.numericInputExample = function () {
 'use strict';
 var element = $(this),
  footer = element.find('tfoot tr'),
  dataRows = element.find('tbody tr'),
  initialTotal = function () {
   var column, total;
   for (column = 1; column < footer.children().size(); column++) {
    total = 0;
    dataRows.each(function () {
     var row = $(this);
     total += parseFloat(row.children().eq(column).text());
    });
    footer.children().eq(column).text(total);
   };
  };
 element.find('td').on('change', function (evt) {
  var cell = $(this),
   column = cell.index(),
   total = 0;
  if (column === 0) {
   return;
  }
  element.find('tbody tr').each(function () {
   var row = $(this);
   total += parseFloat(row.children().eq(column).text());
  });
  if (column === 1 && total > 5000) {
   $('.alert').show();
   return false; // changes can be rejected
  } else {
   $('.alert').hide();
   footer.children().eq(column).text(total);
  }
 }).on('validate', function (evt, value) {
  var cell = $(this),
   column = cell.index();
  if (column === 0) {
   return !!value && value.trim().length > 0;
  } else {
   return !isNaN(parseFloat(value)) && isFinite(value);
  }
 });
 initialTotal();
 return this;
};
$.fn.editableTableWidget = function (options) {
 'use strict';
 return $(this).each(function () {
  var buildDefaultOptions = function () {
    var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);
    opts.editor = opts.editor.clone();
    return opts;
   },
   activeOptions = $.extend(buildDefaultOptions(), options),
   ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
   element = $(this),
   editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
   active,
   showEditor = function (select) {
    active = element.find('td:focus');
    if (active.length) {
     editor.val(active.text())
      .removeClass('error')
      .show()
      .offset(active.offset())
      .css(active.css(activeOptions.cloneProperties))
      .width(active.width())
      .height(active.height())
      .focus();
     if (select) {
      editor.select();
     }
    }
   },
   setActiveText = function () {
    var text = editor.val(),
     evt = $.Event('change'),
     originalContent;
    if (active.text() === text || editor.hasClass('error')) {
     return true;
    }
    originalContent = active.html();
    active.text(text).trigger(evt, text);
    if (evt.result === false) {
     active.html(originalContent);
    }
   },
   movement = function (element, keycode) {
    if (keycode === ARROW_RIGHT) {
     return element.next('td');
    } else if (keycode === ARROW_LEFT) {
     return element.prev('td');
    } else if (keycode === ARROW_UP) {
     return element.parent().prev().children().eq(element.index());
    } else if (keycode === ARROW_DOWN) {
     return element.parent().next().children().eq(element.index());
    }
    return [];
   };
  editor.blur(function () {
   setActiveText();
   editor.hide();
  }).keydown(function (e) {
   if (e.which === ENTER) {
    setActiveText();
    editor.hide();
    active.focus();
    e.preventDefault();
    e.stopPropagation();
   } else if (e.which === ESC) {
    editor.val(active.text());
    e.preventDefault();
    e.stopPropagation();
    editor.hide();
    active.focus();
   } else if (e.which === TAB) {
    active.focus();
   } else if (this.selectionEnd - this.selectionStart === this.value.length) {
    var possibleMove = movement(active, e.which);
    if (possibleMove.length > 0) {
     possibleMove.focus();
     e.preventDefault();
     e.stopPropagation();
    }
   }
  })
  .on('input paste', function () {
   var evt = $.Event('validate');
   active.trigger(evt, editor.val());
   if (evt.result === false) {
    editor.addClass('error');
   } else {
    editor.removeClass('error');
   }
  });
  element.on('click keypress dblclick', showEditor)
  .css('cursor', 'pointer')
  .keydown(function (e) {
   var prevent = true,
    possibleMove = movement($(e.target), e.which);
   if (possibleMove.length > 0) {
    possibleMove.focus();
   } else if (e.which === ENTER) {
    showEditor(false);
   } else if (e.which === 17 || e.which === 91 || e.which === 93) {
    showEditor(true);
    prevent = false;
   } else {
    prevent = false;
   }
   if (prevent) {
    e.stopPropagation();
    e.preventDefault();
   }
  });

element.find('td').prop('tabindex', 1);

$(window).on('resize', function () {
   if (editor.is(':visible')) {
    editor.offset(active.offset())
    .width(active.width())
    .height(active.height());
   }
  });
 });

};
$.fn.editableTableWidget.defaultOptions = {
 cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
       'text-align', 'font', 'font-size', 'font-family', 'font-weight',
       'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
 editor: $('<input>')
};

Thursday, 20 August 2015

Editable jQuery with Total Calculator

Create index.html

Create script.js

No comments:

Post a Comment