jstreetable
Version:
table plugin for jstree
189 lines (181 loc) • 6.41 kB
HTML
<html>
<head>
<title>jstree treetable 3.0.0 plugin demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<style type="text/css" href="https://www.dropbox.com/s/7u7zirpulyj6vvr/jquery-ui.css?dl=0"></style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript" src="../jstreetable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$( ".stopclick" ).on('click',function( event ) {
$( "#wrapper" ).on('click','.stopclick',function( event ) {
if (event.preventDefault) {
event.preventDefault();
}
if (event.stopPropagation) {
event.stopPropagation();
}
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
}
});
var jsonData = [{
"id": 1,
"text": "Materials and varieties",
"parent": "#",
"data": {
"item_id": 1,
"mal_item_name": null,
"data_needed": "N",
"def_unit_id": null,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}, {
"id": 2,
"text": "Bricks",
"parent": "1",
"data": {
"item_id": 2,
"mal_item_name": null,
"data_needed": "N",
"def_unit_id": null,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}, {
"id": 3,
"text": "Class(Country burnt)(8\" 4\" 4\")(high quality)",
"parent": "2",
"data": {
"item_id": 3,
"mal_item_name": null,
"data_needed": "Y",
"def_unit_id": 9,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}, {
"id": 4,
"text": "Class(Country burnt)(8\" 4\" 4\")(low quality)",
"parent": "2",
"data": {
"item_id": 4,
"mal_item_name": null,
"data_needed": "Y",
"def_unit_id": 9,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}, {
"id": 11,
"text": "River Sand",
"parent": "1",
"data": {
"item_id": 11,
"mal_item_name": null,
"data_needed": "N",
"def_unit_id": null,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}, {
"id": 12,
"text": "Coarse",
"parent": "11",
"data": {
"item_id": 12,
"mal_item_name": null,
"data_needed": "Y",
"def_unit_id": 10,
"col_unit_id": null,
"shop1_price": null,
"shop2_price": null,
"remarks": null
}
}];
$('#treeViewDiv').jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": {
"name": false, //default theme used
"stripes": true,
"variant": "large",
"theme": "default",
"dots": true,
"icons": true,
"url": false, // url of theme's css file
"expand_selected_onload": true,
},
"data": jsonData
},
"checkbox": {
"keep_selected_style": false,
"three_state":false,
"two_state": true,
"whole_node": true
},
"table": {
"columns": [{
width: 350,
header: "Items",
headerClass: "jtreeHeader",
wideCellClass: "jtreeCell",
title: "_DATA_"
}, {
width: 120,
header: "Shop1 Price",
headerClass: "jtreeHeader",
wideCellClass: "jtreeCell",
title: "Price from Shop1",
value: function (node) {
if (node.data.data_needed == 'Y') {
return ('<input type="text" class="stopclick" id="shop1TreeTxt_' + node.data.item_id + '" maxlength="15" value="' + ((node.data.shop1_price === null) ? ' ' : node.data.shop1_price) + '"></input>');
}
}
}, {
width: 120,
header: "Shop2 Price",
headerClass: "jtreeHeader",
wideCellClass: "jtreeCell",
title: "Price from Shop2",
value: "ABC"
}, {
width: 120,
header: "Shop1 Price",
headerClass: "jtreeHeader",
wideCellClass: "jtreeCell",
title: "Price from Shop1",
value: function (node) {
if (node.data.data_needed == 'Y') {
return ('<input type="text" class="stopclick" id="shop1TreeTxt_' + node.data.item_id + '" maxlength="15" value="' + ((node.data.shop1_price === null) ? ' ' : node.data.shop1_price) + '"></input>');
}
}
}],
"contextmenu": true,
"resizable": true
},
"plugins": ["checkbox", "contextmenu", "dnd", "search", "state", "types", "table", "wholerow"]
});
});
</script>
</head>
<body>
<h2>tharasp issue</h2>
<div id="wrapper">
<div id="treeViewDiv"></div>
</div>
</body>
</html>