JavaScript CSV Download – Excel + Umlaute

var downloadCsv = function(content, fileName) {
var a = document.createElement('a');
mimeType = mimeType || 'application/octet-stream';

var mimeType = 'text/csv;encoding:utf-8';
var BOM = "\uFEFF";
content = BOM + content;

if (navigator.msSaveBlob) { // IE10
navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
} else if (URL && 'download' in a) { //html5 A[download]
a.href = URL.createObjectURL(new Blob([content], {
type: mimeType
}));
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
}

// Example data given in question text
var data = [
['A', 'B', 'C', 'Größe', 'Maße', 'ÄÜÖ']
, ['C', 'D', 'E', 'F', 'G', 'H']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
dataString = infoArray.join(';');
csvContent += index < data.length ? dataString + '\n' : dataString; }); downloadCsv(csvContent, 'MyFilename.csv', );




Handlebars render Funktion wie bei Mustache

[crayon-66061e66545dd587556549/]
 




IsNull in JavaScript

In SQL gibt es die tolle Funktion, wenn ein Wert nicht null ist, dann nimm diesen, ansonsten nimm die Alternative. Die Syntax dazu ist IsNull(‘meinWert,’Alternative’). Um z.B. dem Nutzer kein null in einer Textbox anzuzeigen, habe ich eine Funktion geschrieben, die im Prinzip das gleiche macht.
[crayon-66061e6654b62820630393/]




Get Rekursive Object

Mit der folgenden Funktion kann man rekursiv ein Objekt in Javascript nach einem bestimmten Attribut durchsuchen. Das ganze auch noch ziemlich performant.
[crayon-66061e6654d10196556397/]
 




Nützliche Javascript Bibliotheken

Ich mach hier mal eine kleine Sammlung von Javascript Bibliotheken, die ich vielleicht eines Tages gebrauchen kann.

Forms

Alternative Select Boxen

https://select2.github.io/examples.html

https://twitter.github.io/typeahead.js/

https://harvesthq.github.io/chosen/

http://rmm5t.github.io/jquery-flexselect/

http://loopj.com/jquery-tokeninput/

https://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

https://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html#

Multiple Select

http://loudev.com/#demos

Datepicker

https://uxsolutions.github.io/bootstrap-datepicker/

 

http://amsul.ca/pickadate.js/

https://fullcalendar.io/

http://felicegattuso.com/projects/timedropper/

Daterange:

http://www.daterangepicker.com/#examples

http://rettica.com/caleran/docs/readme.html#caleran-date-range-picker

Tables

http://issues.wenzhixin.net.cn/bootstrap-table/

http://listjs.com/

Modal, PopUp

http://dimsemenov.com/plugins/magnific-popup/

http://codeseven.github.io/toastr/demo.html

http://likeastore.github.io/ngDialog/#

http://qtip2.com/

List shortcuts: https://www.impressivewebs.com/demo-files/question-mark-js/

Treeview

https://www.jstree.com/

Drag & Drop

http://rubaxa.github.io/Sortable/

https://bevacqua.github.io/dragula/

http://vishalok12.github.io/jquery-dragarrange/

Charts, Diagramme, Grafiken

https://d3js.org/

d3 Components: http://plottablejs.org/components/

http://www.chartjs.org/

http://gionkunz.github.io/chartist-js/

http://nvd3.org/examples/index.html

http://visjs.org/

http://sigmajs.org/

http://c3js.org/

http://dc-js.github.io/dc.js/

http://code.shutterstock.com/rickshaw/

https://sbstjn.com/timesheet.js/#light

https://www.javascripting.com/view/stats-js

http://www.humblesoftware.com/flotr2

PDF

Generate PDF: https://mozilla.github.io/pdf.js/

PDF Print: http://printjs.crabbly.com/

http://pdfobject.com/examples/index.php

 

Animation

https://daneden.github.io/animate.css/

http://github.hubspot.com/pace/docs/welcome/

http://timeline.knightlab.com/#overview

https://connoratherton.com/loaders

File Management

http://blueimp.github.io/jQuery-File-Upload/index.html

https://fineuploader.com/demos.html

http://www.dropzonejs.com/

PDF Creator

https://parall.ax/products/jspdf

http://pdfmake.org/#/

Data Management

http://okfnlabs.org/recline/demos/

Object Binding, DOM Manipulating, Templating

https://lodash.com/

 

http://tempojs.com/

https://github.com/lhorie/mithril.js

http://requirejs.org/

LazyLoading: http://callmecavs.com/layzr.js/

https://monkberry.js.org/

https://svelte.technology/

Template (mit Mustache Syntax)

http://mustache.github.io/

http://handlebarsjs.com/

https://ractive.js.org/api/

String Tools:

http://www.benalman.com/projects/jquery-replacetext-plugin/

Code Management

https://highlightjs.org/

AutoComplete: https://www.javascripting.com/view/jquery-autocomplete

Validation

http://is.js.org/

http://rickharrison.github.io/validate.js/

Telephone Country Validator: http://intl-tel-input.com/

WYSIWYG editor

https://quilljs.com/

http://summernote.org/

Photo Editor, Photo Gallery

http://photoswipe.com/

Maps

http://openlayers.org/

http://datamaps.github.io/

http://leafletjs.com/

UI Framework

https://getuikit.com/docs/button

http://mmenu.frebsite.nl/




JQuery Datepicker komplett in Deutsch mit Heute als Standard

Jquery_Datepicker

 

Um den Datepicker komplett auf Deutsch nutzen zu können bedarf es einiger Änderungen es zunächst das Laden der CSS Datei:
[crayon-66061e6654f41183392336/]
dann das laden der JQuery files
[crayon-66061e6654f44400597455/]
dann im <script> </script>:
[crayon-66061e6654f45438893438/]
und zum Schluss den Textinput an sich:
[crayon-66061e6654f48597197400/]
 




OpenStreetMap, OpenLayers Map anzeigen, Marker setzen und Route hinzufügen

einfacher Open Layer Code, mit dem man eine Linie zwischen 2 Punkten erstellen kann.

Diese bekommen am Anfangspunkt einen Marker, am Ende einen Marker und dazwischen einen.

Dies könnte z.B. so Aussehen: 13-09-_2015_00-33-42

 


[crayon-66061e6655266863310775/]
Download Beispielprojekt: OpenLayers