Nutzung mit PHP
#944
-
|
KoliBri lässt sich in statische HTML-Seiten einbinden und nutzen. Link zur Integration: https://public-ui.github.io/?path=/docs/get-started--page Beispiel: <head>
<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet" />
<script type="module">
import { register } from 'https://esm.sh/@public-ui/[email protected]';
import { defineCustomElements } from 'https://esm.sh/@public-ui/[email protected]/dist/loader';
import { MAPZ } from 'https://esm.sh/@public-ui/[email protected]';
register([MAPZ], defineCustomElements)
.then(() => {})
.catch(console.warn);
</script>
</head>
<body class="mapz" data-theme="mapz">
<kol-spin _show>
</body>CodeSandbox-Link: https://codesandbox.io/s/elegant-currying-uq3cmd?file=/index.html Folgende Aspekte sind bei der statischen Verwendung beachten:
|
Beta Was this translation helpful? Give feedback.
Answered by
Zementaa
Jan 4, 2023
Replies: 1 comment
-
|
Ein Beispiel wie mithilfe von PHP eine Kolibri-Tabelle dynamisch befüllt werden kann: <div>
<kol-table id="table-index" _caption="The weather is sunnier in PHP land (°F)" _data="[{}]" _headers="{}"></kol-table>
</div><?php
// Das $cities-Array könnte auch ein aus einer Datenbank ausgelesenes Array sein
$cities = array(
"berlin" => "Berlin",
"munich" => "Munich",
"belfast" => "Belfast",
"cardiff" => "Cardiff",
"edinburgh" => "Edinburgh",
"london" => "London",
"nyc" => "New York City",
"la" => "Los Angeles",
"chicago" => "Chicago"
);
<script>
// In einem JavaScript-Abschnitt (oder in einer separaten Datei) werden die Variablen definiert
const TABLE_NEW_HEADERS = {
horizontal: [
[{
label:'',
colSpan:2,
rowSpan:2,
asTd:true,
},
{
label:'2022',
colSpan:2,
},
{
label:'2023',
colSpan:4,
}
],
[{
label:'November',
key:'november',
textAlign: "right",
},
{
label:'December',
key:'december',
textAlign: "right",
},
{
label:'January',
key:'january',
textAlign: "right",
},
{
label:'February',
key:'february',
textAlign: "right",
},
{
label:'March',
key:'march',
textAlign: "right",
},
{
label:'April',
key:'april',
textAlign: "right",
}
]
],
vertical:[
[{
label:'Germany',
rowSpan:2,
textAlign:"left"
},
{
label:'United Kingdom',
rowSpan:4,
textAlign:"left"
},
{
label:'USA',rowSpan:3,
textAlign:"left"
}
],
[{
label:'<?php echo $cities["berlin"] ?>',
key:'berlin',
textAlign:"left"
},
{
label:'<?php echo $cities["munich"] ?>',
key:'munich',
textAlign:"left"
},
{
label:'<?php echo $cities["belfast"] ?>',
key:'belfast',
textAlign:"left"
},
{
label:'<?php echo $cities["cardiff"] ?>',
key:'cardiff',
textAlign:"left"
},
{
label:'<?php echo $cities["edinburgh"] ?>',
key:'edinburgh',
textAlign:"left"
},
{
label:'<?php echo $cities["london"] ?>',
key:'london',
textAlign:"left"
},
{
label:'<?php echo $cities["chicago"] ?>',
key:'chicago',
textAlign:"left"
},
{
label:'<?php echo $cities["la"] ?>',
key:'la',
textAlign:"left"
},
{
label:'<?php echo $cities["nyc"] ?>',
key:'nyc',
textAlign:"left"
},
]
]
},
// Der Tabelleninhalt könnte auch aus einer Datenbank stammen
TABLE_DATA = [
// Berlin
{
november:'<?php echo rand(31, 51) ?>',
december:'<?php echo rand(26, 46) ?>',
january:'<?php echo rand(23, 43) ?>',
february:'<?php echo rand(25, 45) ?>',
march:'<?php echo rand(31, 51) ?>',
april:'<?php echo rand(39, 59) ?>'
},
// Munich
{
november:'<?php echo rand(29, 49) ?>',
december:'<?php echo rand(23, 43) ?>',
january:'<?php echo rand(21, 41) ?>',
february:'<?php echo rand(22, 42) ?>',
march:'<?php echo rand(30, 50) ?>',
april:'<?php echo rand(37, 57) ?>'
},
// Belfast
{
november:'<?php echo rand(36, 56) ?>',
december:'<?php echo rand(32, 52) ?>',
january:'<?php echo rand(31, 51) ?>',
february:'<?php echo rand(31, 51) ?>',
march:'<?php echo rand(33, 53) ?>',
april:'<?php echo rand(37, 57) ?>'
},
// Cardiff
{
november:'<?php echo rand(31, 51) ?>',
december:'<?php echo rand(26, 46) ?>',
january:'<?php echo rand(23, 43) ?>',
february:'<?php echo rand(25, 45) ?>',
march:'<?php echo rand(31, 51) ?>',
april:'<?php echo rand(39, 59) ?>'
},
// Edinburgh
{
november:'<?php echo rand(37, 57) ?>',
december:'<?php echo rand(33, 53) ?>',
january:'<?php echo rand(32, 52) ?>',
february:'<?php echo rand(32, 52) ?>',
march:'<?php echo rand(35, 55) ?>',
april:'<?php echo rand(38, 58) ?>'
},
// London
{
november:'<?php echo rand(39, 59) ?>',
december:'<?php echo rand(35, 55) ?>',
january:'<?php echo rand(33, 53) ?>',
february:'<?php echo rand(33, 53) ?>',
march:'<?php echo rand(37, 57) ?>',
april:'<?php echo rand(41, 61) ?>'
},
// Chicago
{
november:'<?php echo rand(33, 53) ?>',
december:'<?php echo rand(22, 42) ?>',
january:'<?php echo rand(17, 37) ?>',
february:'<?php echo rand(20, 40) ?>',
march:'<?php echo rand(29, 49) ?>',
april:'<?php echo rand(39, 59) ?>'
},
// Los Angeles
{
november:'<?php echo rand(51, 71) ?>',
december:'<?php echo rand(46, 66) ?>',
january:'<?php echo rand(47, 67) ?>',
february:'<?php echo rand(48, 68) ?>',
march:'<?php echo rand(50, 70) ?>',
april:'<?php echo rand(52, 72) ?>'
},
// New York City
{
november:'<?php echo rand(38, 58) ?>',
december:'<?php echo rand(29, 49) ?>',
january:'<?php echo rand(23, 43) ?>',
february:'<?php echo rand(25, 45) ?>',
march:'<?php echo rand(32, 52) ?>',
april:'<?php echo rand(43, 63) ?>'
}
];
// Die Überschriften und der Tabelleninhalt werden der Kolibri-Tabelle zugeordnet
window.onload = function() {
document.getElementById("table-index")._headers = TABLE_HEADERS;
document.getElementById("table-index")._data = TABLE_DATA;
};
</script>
?> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
deleonio
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ein Beispiel wie mithilfe von PHP eine Kolibri-Tabelle dynamisch befüllt werden kann: