Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

default.js

By: a guest on Feb 14th, 2012  |  syntax: JavaScript  |  size: 6.92 KB  |  views: 59  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // Reference for jquery visual studio intellisense
  2. /// <reference path="jquery-1.7.1-vsdoc2.js" />
  3.  
  4. // Determine whether input is a function
  5. //function isFunction(inputText) {
  6. //    inputText = inputText.toUpperCase();
  7. //    inputText = inputText.substring(0, 3);
  8. //    if (inputText === '=SUM')
  9. //        return 'SUM';
  10. //}
  11.  
  12. //  extends :contains to contains EXACT text
  13. $.expr[':'].containsExactly = function (obj, index, meta, stack) {
  14.     return $(obj).text() === meta[3];
  15. };
  16.  
  17. // Function for inserting the spreadsheet into spreadsheet div
  18. function drawSpreadsheet(xAxis, yAxis) {
  19.     if (xAxis === "" || xAxis === undefined)
  20.         xAxis = 27;
  21.     if (yAxis === "" || yAxis === undefined)
  22.         yAxis = 40;
  23.     var tableHtml = '<table id="spreadsheetTable"><thead><tr><th width="22px" class="firstCell"></th>';
  24.  
  25.     // Create an array to store all the cells
  26.     var cellarrays = new Array();
  27.     // Create the x Axis
  28.     for (var i = 0; i < xAxis; i++) {
  29.         tableHtml += '<th width="60px">' + getExcelColumnName(i + 1) + '</th>';
  30.         cellarrays[getExcelColumnName(i+1)] = new Array();
  31.     }
  32.     tableHtml += '</tr></thead><tbody>';
  33.    
  34.     // Create the y Axis
  35.     for (var i = 0; i < yAxis; i++) {
  36.         tableHtml += '<tr><td class="yAxis">' + (i + 1) + '</td>';
  37.         for (var x = 0; x < xAxis; x++) {
  38.             tableHtml += '<td class="display" id="' + getExcelColumnName(x + 1).toString() + "_"  + (i + 1).toString() + '"></td>';
  39.             cellarrays[getExcelColumnName(x+1)][i] = getExcelColumnName(x + 1) + "" + (i+1) + " ";
  40.         }
  41.         tableHtml += '</tr>';
  42.     }
  43.     tableHtml += '</tr></tbody></table>';
  44.    
  45.     $('div#spreadsheet').html(tableHtml);
  46.     var arraydata = "";
  47.     for (var i = 0; i < yAxis; i++) {
  48.         for (var x = 0; x < xAxis; x++) {
  49.            arraydata += cellarrays[getExcelColumnName(x+1)][i];
  50.         }
  51.    }
  52. }
  53.  
  54. function getExcelColumnName(columnNumber) {
  55.     columnName = "";
  56.     module = 0;
  57.     while (columnNumber > 0) {
  58.         module = (columnNumber - 1) % 26;
  59.         columnName = String.fromCharCode(65 + module) + columnName;
  60.         columnNumber = parseInt((columnNumber - module) / 26);
  61.     }
  62.     return columnName;
  63. }
  64.  
  65. // Popup dialog asking for filename and pass to ajax
  66. function saveSpreadsheet() {
  67.     $('input.editCell').blur();
  68.     var $dialog = $('<div></div>')
  69.         .html('<div>Name for spreadsheet<input type="text" id="filename" /></div>')
  70.         .dialog({
  71.             autoOpen: false,
  72.             title: 'Filename',
  73.             buttons: {
  74.                 "Ok": function () {
  75.                     var spreadsheetCSV = $('table#spreadsheetTable').table2CSV({ delivery: 'value' });
  76.                     callAJAX("SaveSpreadsheet", spreadsheetCSV, $('input#filename').val());
  77.                     $(this).dialog("close");
  78.                 },
  79.                 "Cancel": function () {
  80.                     $(this).dialog("close");
  81.                 }
  82.             },
  83.             close: function () {
  84.                 $(this).remove();
  85.             }
  86.         }).dialog('open');
  87. }
  88.  
  89. // AJAX Function
  90. function callAJAX(requestMethod, clientRequest, clientRequest2) {
  91.     var pageMethod = "default.aspx/" + requestMethod;
  92.     $.ajax({
  93.         url: pageMethod,   // Current Page, Method  
  94.         data: JSON.stringify({ textFile: clientRequest, fileName: clientRequest2 }), // parameter map as JSON  
  95.         type: "POST", // data has to be POSTed  
  96.         contentType: "application/json", // posting JSON content      
  97.         dataType: "JSON",  // type of data is JSON (must be upper case!)  
  98.         timeout: 30000,    // AJAX timeout  
  99.         success: function (result) {
  100.             if (requestMethod == "SaveSpreadsheet")
  101.                 alert('Save Successful');
  102.             else
  103.                 loadFilesCallBack(result.d);
  104.         },
  105.         error: function (xhr, status) {
  106.             alert(status + " - " + xhr.responseText);
  107.         }
  108.     });
  109. }
  110.  
  111. // Load Files
  112. function loadFiles() {
  113.     callAJAX('GetFiles');
  114. }
  115.  
  116. // Store files in drop down menu
  117. function loadFilesCallBack(result) {
  118.     for (var i = 0; i < result.length; i++) {
  119.         $('select').html($('select').html() + '<option>' + result[i] + '</option>');
  120.     }
  121. }
  122.  
  123. // click events
  124. $(document).on('click', 'td.display', function () {
  125.     // Change class to edit
  126.     this.className = 'edit';
  127.     $(this).html('<input type="text" class="editCell" size="3" value="' + $(this).text() + '"/>');
  128.     // Highlight column and row the cell belongs to
  129.     //$(this).css('border', '2px solid black'); // bold selected cell
  130.     this.className = 'selected';
  131.     var colRow = this.id.split('_');
  132.     $('th:containsExactly(' + colRow[0] + ')').css("background", "orange");
  133.     $('td.yAxis:containsExactly(' + colRow[1] + ')').css("background-color", "orange");
  134. });
  135. // true if webkit, false otherwise
  136. var isWebkit = !!$('<div style="-webkit-border-radius:1px;">')[0].style.cssText.length;
  137.  
  138. $(document).on('blur', 'input.editCell', function () {
  139.     var $thisParent = $(this).parent();      // <-- Optimizing by caching
  140.     // Remove Highlight and bold around cell
  141.     $thisParent.removeClass('selected');
  142.     var colRow = $thisParent.attr('id').split('_');
  143.     $('th:containsExactly(' + colRow[0] + ')').removeAttr('style');
  144.     $('td.yAxis:containsExactly(' + colRow[1] + ')').removeAttr('style');
  145.     // Change class back to display
  146.     $thisParent.attr('class', 'display');
  147.     // Take the entered value and put it in the cell
  148.     $thisParent.html(this.value);
  149.     // if(isFunction(this.value) === 'SUM')
  150.  
  151.     if (isWebkit) { // Fix for Webkit bug: render the table again
  152.         // Without jQuery, for efficiency
  153.         var style = document.getElementById('spreadsheetTable').style;
  154.         style.color = '#111';                       //<--1. Change style
  155.         setTimeout(function(){style.color='';}, 4); //<--2. Fix
  156.     }
  157. });
  158.  
  159.  
  160. $(document).on('keypress', 'input.editCell', function (e) {
  161.     if (e.which == 13) {
  162.         // If enter is pressed trigger the blur function
  163.         $(this).blur();
  164.     }
  165. });
  166.  
  167. // When docunment is loaded load files into dropdown and draw default 20 rows by 10 columns spreadsheet
  168. $(document).ready(function () {
  169.     loadFiles();
  170.     drawSpreadsheet();  // without parameters, uses default spreadsheet columns and rows
  171.  
  172.     $('button#newSpreadsheet').click(function () {
  173.         // Open a dialog prompting for column and row sizes
  174.         var $dialog = $('<div></div>')
  175.         .html('<div>Columns<input type="text" id="xAxisInput" size="1" />Rows<input type="text" id="yAxisInput" size="2" /></div>')
  176.         .dialog({
  177.             autoOpen: true,
  178.             title: 'New Spreadsheet',
  179.             buttons: {
  180.                 "Ok": function () {
  181.                     drawSpreadsheet($('input#xAxisInput').val(), $('input#yAxisInput').val());
  182.                     // clear input values
  183.                     $(this).dialog("close");
  184.                 },
  185.                 "Cancel": function () {
  186.                     $(this).dialog("close");
  187.                 }
  188.             },
  189.             close: function () {
  190.                 $(this).remove();
  191.             }
  192.         }).dialog('open');
  193.     });
  194. });
clone this paste RAW Paste Data