jstreegrid/tests/components/odd-named-id-test.html

grid plugin for jstree

		<script type="text/javascript">
		$(document).ready(function(){
				var data;

				data = [{
					text: "Root 1",
					data: {price: "$5.00", size: "4",spanclass:"root"},
					children: [
						{id: "root 1/really long named child", text: "Really long named child whose name gets cut off", data: {price: "<b>$4.00</b>", size: "3",spanclass:"first"}},
						{text: "Child 2", data: {price: "<i>$3.00</i>", size: "2",spanclass:"second"}, children:[
							{text:"Grandchild",data:{price: "EXPENSIVE!",size:"10",spanclass:"third"}}
						]}
					]
				}];

				$("div#jstree").bind("loaded_grid.jstree",function(){
					$("span#status").text("loaded");
				}).on("select_cell.jstree-grid",function (e,data) {
					$("span#clicked").html("clicked "+data.column+" of value "+data.value);
				}).on('update_cell.jstree-grid',function (e,data) {
					$("span#changed").html("changed "+data.col+" from "+data.old+" to "+data.value);
				});


				$("div#jstree").jstree({
					plugins: ["themes","json","grid"],
					core: {
						data: data
					},
					grid: {
						columns: [
							{width: 110, header: "Nodes",title:"_DATA_"},
							{cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
							{cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
						],
						resizable:true,
						contextmenu:true
					}
				});


			});
		</script>
		<h2>Tree Grid 3.2.0 Demo</h2>

		<div id="jstree1">
			<h4>First Tree</h4>
			<div id="jstree"></div>
			<div>Tree grid is <span id="status">loading</span>.</div>
		</div>