@binar/tree-view-component
Version:
Its Tree View Component
153 lines (146 loc) • 4.39 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script
type="module"
src="https://unpkg.com/@binar/tree-view-component"
></script>
<style>
#ChartContainer > google-chart {
width: 100%;
margin: 50px 0px;
}
</style>
</head>
<body>
<tree-view id="chart" key="id" value="1"></tree-view>
<button
onclick="CheckId(5)">
Sele ID 5
</button>
</body>
</html>
<script>
var TreeData={
categories: {
label: "Categories",
id:"1",
children: {
"patient": {
label: "Patients",
id:"2",
children: {
"patient:janeDoe": {
label: "Jane Doe",
icon: "Woman.png",
id:"3",
children: {
"jd:plans": {
label: "Plans",
id:"4",
children: {
"plan:JDHI1": {
label: "Health Insurance JDHI1",
icon: "Plan.png",
id:"5"
},
"plan:JDDI1": {
label: "Dental Insurance JDDI1",
icon: "Plan.png",
id:"6"
},
"plan:JDVI1": {
label: "Vision Insurance JDVI1",
icon: "Plan.png",
id:"7"
},
},
},
},
},
"person:briannen": {
label: "Briannen Storm",
icon: "Woman.png",
id:"8",
children: {
"bs:plans": {
label: "Plans",
id:"9",
children: {
"plan:BSHI1": {
label: "Health Insurance BSHI1",
id:"10",
icon: "Plan.png",
},
"plan:BSDI1": {
label: "Dental Insurance BSDI1",
id:"11",
icon: "Plan.png",
},
"plan:BSVI1": {
label: "Vision Insurance BSVI1",
icon: "Plan.png",
id:"12",
},
"plan:BSVI1": {
label: "Vision Insurance BSVI1",
icon: "Plan.png",
id:"13",
},
"plan:BSVI1": {
label: "Vision Insurance BSVI1",
icon: "Plan.png",
id:"14",
},
},
},
},
},
"person": {
label: "Thomas Key",
icon: "Man.png",
id:"15",
children: {
"group:KTplans": {
label: "Plans",
id:"16",
children: {
"plan:TKHI1": {
label: "Health Insurance HI2",
icon: "Plan.png",
id:"17",
},
"plan:TKDI1": {
label: "Dental Insurance DI2",
icon: "Plan.png",
id:"18",
},
"plan:TKVI1": {
label: "Vision Insurance VI2",
icon: "Plan.png",
id:"19",
},
},
},
},
},
},
},
},
}
}
function CheckId(id) {
let select= document.getElementById('chart');
select.setAttribute('value',id)
}
window.onload = function (e) {
let temp= document.getElementById('chart');
temp.setAttribute('data',JSON.stringify(TreeData))
temp.addEventListener('item-selected',function (params) {
var value=params.detail.param;
console.log(value);
})
};
</script>