multiselect component

2017-10-15 15:54:21 +02:00
parent 1ecef555ef
commit ddae98d233
2 changed files with 167 additions and 0 deletions
@@ -0,0 +1,46 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <script src="multiselectcomponent.js"></script>
+</head>
+<body>
+    <div style="width: 50%; float: left;" id="left"></div>
+    <div style="width: 50%; float: right;" id="right"></div>
+
+    <script type="application/javascript">
+        // Sample data.
+        var data1 = [
+            {id: 1, name: 'Peter', surname: 'Hrdlica'},
+            {id: 6, name: 'Vojtěch', surname: 'Hrdlica'},
+            {id: 2, name: 'Michal', surname: 'Kváček'},
+            {id: 19, name: 'Miček', surname: 'Je kokot!'},
+            {id: 13, name: 'Mirek', surname: 'Mráček'},
+            {id: 11, name: 'Naděžda', surname: 'Zímová'}
+        ];
+
+        var data2 = [
+            {id: 2, name: 'wanna', surname: 'know'},
+            {id: 6, name: 'Batman', surname: 'insulted'},
+            {id: 58, name: 'scream', surname: 'pushed'},
+            {id: 19, name: 'Mob', surname: 'why'},
+            {id: 63, name: 'eight', surname: 'begin'},
+            {id: 4, name: 'you', surname: 'emotions'}
+        ];
+        data1.sort(function(a, b) { return a.id > b.id; }); // Sort by ID, lowest first.
+        data2.sort(function(a, b) { return a.id > b.id; }); // Sort by ID, lowest first.
+
+        // Js component instance
+        var mscL = new MultiSelectComponent('contacts', data1, 'id', function(item) { return item.name + ' ' + item.surname; });
+        var mscR = new MultiSelectComponent('users', data2, 'id', function(item) { return item.name + ' ' + item.surname; });
+        // Generated data added to template
+        var left = document.getElementById('left');
+        var right = document.getElementById('right');
+        left.innerHTML = mscL.createTemplate();
+        right.innerHTML = mscR.createTemplate();
+
+        // Initialization. May be done in more elegant way if the template is created ie. on server.
+        mscL.init();
+        mscR.init();
+    </script>
+</body>
+</html>