WordPress.com
<!DOCTYPE html><html lang="en"><head> <title>Client Side - Reading Excel Data and binding to HandsOnTable, Allow user to modify data and Upload data to SharePoint List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <link href="" rel="stylesheet"> <link href="" rel="stylesheet"> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <style type="text/css">@import url();body{background-color: #000000; padding: 0px; margin: 0px; color: black; } h1 { font-family: 'Croissant One', sans-serif !Important; font-weight: 400; font-size: 2.5em; color: #2d2d2d;}#gradient{ width: 100%; min-height: 100vh; padding: 0px; margin: 0px; box-shadow: inset 0 0 200px hsla(0,0%,0%,.4);}.btn-file { position: relative; overflow: hidden;}.btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block;}input[readonly] { background-color: white !important; cursor: text !important;}#handsOnTableModal .modal-dialog {width: 90%; /* your width */}.ht_master.handsontable {height: 600px;}.handsontable th, .handsontable td {padding: 0 4PX !important;}button.close {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 0 none;color: #d90200;cursor: pointer;min-width: auto;opacity: 1;padding: 0;}button.close:hover {color: #d90200;border: 0;}.modal-header h2 {margin-bottom:0 !important;} </style></head><body> <div id="gradient"/><div class="container-fluid"><h1>Import XLS/XLSX File</h1><div class="form-group"> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-primary btn-file"> Browse… <input type="file" name="inputXlsFile" id="inputXlsFile" multiple> </span> </span> <input type="text" id="txtFileInput" class="form-control" readonly> </div> </div><div class="form-group"> <button type="button" id="btnProcessData" class="btn btn-primary">Process Data</button></div> <div id="handsOnTableModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" id="btnCloseHandsOnModalDialog" class="close" data-dismiss="modal" aria-hidden="true">x</button><div id="divProcessDataToSp"> <h2 id="modal-label">Imported File Contents</h2> <input type="button" id="btnProcessDataToSp" value="Upload Data" hidden="hidden" /> </div> <div> <label id="lblWarningUserMessage" style="display: none" class="text-warning"></label> <label id="lblSuccessMessage" style="display: none" class="text-success"></label> <label id="lblErrorMessage" style="display: none" class="text-error"></label> </div> </div> <div class="modal-body"> <div id="divImportedFileData" class="table-responsive"></div> </div> </div> </div> </div></div></body></html><script type="text/javascript">var colors = new Array( [251,243,246], [200,220,208], [111,123,140], [244,226,156], [141,158,170]);var step = 0;//color table indices for: // current color left// next color left// current color right// next color rightvar colorIndices = [0,1,2,3];//transition speedvar gradientSpeed = .015;function updateGradient(){var c0_0 = colors[colorIndices[0]];var c0_1 = colors[colorIndices[1]];var c1_0 = colors[colorIndices[2]];var c1_1 = colors[colorIndices[3]];var istep = 1 - step;var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16); $('#gradient').css({ background: "-webkit-radial-gradient(center, circle cover, "+color1+","+color2+")"}); step += gradientSpeed; if ( step >= 1 ) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; //pick two new target color indices //do not pick the same as the current one colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; }}setInterval(updateGradient,10);var sformat = "json";var output = "";var X = XLSX;var parsed = [];var handsOnTable;$(document).on('change', '.btn-file :file', function() { var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1, label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [numFiles, label]);});$(document).ready( function() {MakeSliceFunctionWorkOnAllBrowsers();fileUploadControlTextBinder(); BindClickEventToProcessData(); });function MakeSliceFunctionWorkOnAllBrowsers(){try{if (!ArrayBuffer.prototype.slice) { //Returns a new ArrayBuffer whose contents are a copy of this ArrayBuffer's //bytes from `begin`, inclusive, up to `end`, exclusive ArrayBuffer.prototype.slice = function (begin, end) { //If `begin` is unspecified, Chrome assumes 0, so we do the same if (begin === void 0) { begin = 0; } //If `end` is unspecified, the new ArrayBuffer contains all //bytes from `begin` to the end of this ArrayBuffer. if (end === void 0) { end = this.byteLength; } //Chrome converts the values to integers via flooring begin = Math.floor(begin); end = Math.floor(end); //If either `begin` or `end` is negative, it refers to an //index from the end of the array, as opposed to from the beginning. if (begin < 0) { begin += this.byteLength; } if (end < 0) { end += this.byteLength; } //The range specified by the `begin` and `end` values is clamped to the //valid index range for the current array. begin = Math.min(Math.max(0, begin), this.byteLength); end = Math.min(Math.max(0, end), this.byteLength); //If the computed length of the new ArrayBuffer would be negative, it //is clamped to zero. if (end - begin <= 0) { return new ArrayBuffer(0); } var result = new ArrayBuffer(end - begin); var resultBytes = new Uint8Array(result); var sourceBytes = new Uint8Array(this, begin, end - begin); resultBytes.set(sourceBytes); return result; }; }}catch(e){console.log(e);}}function fileUploadControlTextBinder(){try{$('.btn-file :file').on('fileselect', function(event, numFiles, label) { var input = $(this).parents('.input-group').find(':text'), log = numFiles > 1 ? numFiles + ' files selected' : label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } });}catch(e){console.log(e);}}function fixdata(data) {try{var o = "", l = 0, w = 10240;for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o;}catch(e){console.log(e);} }function to_json(workbook) {try{var result = {}; workbook.SheetNames.forEach(function (sheetName) { var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); if (roa.length > 0) { result[sheetName] = roa; } }); return result;}catch(e){console.log(e);} }function process_wb(wb, sformat) { try { switch (sformat) { case "json": output = JSON.stringify(to_json(wb), 2, 2); return output; case "form": output = to_formulae(wb); break; default: output = JSON.stringify(to_json(wb), 2, 2); } } catch (e) { console.log(e); }}//This method binds the click event to the Process data buttonfunction BindClickEventToProcessData() { try { var btnProcessData = $('#btnProcessData'); if (btnProcessData != null || btnProcessData != 'undefined') { btnProcessData.on('click', function (e) { var fileUploadControl = $('#inputXlsFile'); var fileName = fileUploadControl.val(); if (fileName) { // returns true if the string is not empty //Call the below method to process the XLS file. ProcessFile(); $("#handsOnTableModal").modal('show');; } else { // no file was selected alert("Please select a file for Import."); } //Clear the file upload control. if (fileUploadControl != 'undefined' && fileUploadControl != null && fileUploadControl != '') { fileUploadControl.val(""); $('#txtFileInput').val(""); } }); } } catch (e) { console.log(e); }}//This method when called initiates the processing of the uploaded XLS/XLSX file.function ProcessFile() { try { //Remove any data from parsed element. if (parsed.length > 0) { parsed = []; } var getFile = getFileBuffer(); getFile.done(function (arrayBuffer) { var output = new Array(); var arr = fixdata(arrayBuffer); var wb = X.read(btoa(arr), { type: 'base64' }); output = process_wb(wb, sformat); parsed = JSON.parse(output); //Binds the Excel View on the page BindExcelViewWithProcessedData(); }); getFile.fail(onError); } catch (e) { console.log(e); }}// Get the local file as an array buffer.function getFileBuffer() { try { var controlId = $('#inputXlsFile'); var deferred = $.Deferred(); var reader = new FileReader(); reader.onloadend = function (e) { deferred.resolve(e.target.result); } reader.onerror = function (e) { deferred.reject(e.target.error); } reader.readAsArrayBuffer(controlId[0].files[0]); return deferred.promise(); } catch (e) { console.log(e); }}//This method binds the excel view with the processed data.function BindExcelViewWithProcessedData() { try { var columnHeaders; var prepareDataForBind = []; if (parsed != '' && parsed != 'undefined' && parsed != null) { //Now work on building the data to bind into the HandsOnTable for (var key in parsed) { $.each(parsed[key], function (k, arrayItem) { columnHeaders = Object.keys(arrayItem); var item = []; $.each(columnHeaders, function (s, keyitem) { item.push(arrayItem[keyitem]); }); prepareDataForBind.push(item); }); } if (prepareDataForBind.length > 0) { var dataToBind = prepareDataForBind; var setRangeGridOptions = { data: dataToBind, colHeaders: columnHeaders, columnSorting: true, contextMenu: true, rowHeaders: true, renderAllRows: true }; var container = document.getElementById("divImportedFileData"); setTimeout(function () { //If Hands On Table exists, destroy it. if (handsOnTable != null) { handsOnTable.clear(); handsOnTable.destroy(); handsOnTable = new Handsontable(container, setRangeGridOptions); //handsOnTable.loadData(data); //container.click(); } else { handsOnTable = new Handsontable(container, setRangeGridOptions); //handsOnTable.loadData(data); //container.click(); } }, 1000); } } } catch (e) { console.log(e); }}//Display error messages. function onError(error) { console.log(error.responseText); return error.responseText;}</script> ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- wordpress passing data between pages
- wordpress business templates
- wordpress rss feed not working
- wordpress jquery is not defined
- create wordpress blog
- wordpress roles editor
- wordpress full rss feed
- wordpress rss feed settings
- wordpress rss feed plugin
- wordpress display rss feed
- wordpress rss feed link
- wordpress rss feed to post