Can I somehow insert a table inside <li> when using
jsTree (1.0) and
json?
let's say in this code where I want to insert table for
both node and
leaf.
Why? To display more things than only a name and using nice formatting.
"data" : [
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "li.node.id" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
update:
it seems to me that I can use html_titles. But could somebody give me an example how to insert whole table and get cell data from variables?
Update2:
whether I use
"data" : "<table><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table>",
or
"title" : "<table><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table",
the table is placed on a new line. Not next to the tree icon. Can I fix that somehow?
Expanding on the original post to help others trying to do the same:
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data" : "<table style='display: inline-block'><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table>",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "li.node.id" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"core" : {"html_titles" : true},
"plugins" : [ "themes", "json_data" ]
});
});
The key is to allow html in the titles which is set in the core options as well as the table style
I thought it needs to be solved on javascript level but <table style='display: inline-block'> does the trick
Addon: The "text" you supply is actually treated as html by default.
core: {
data: [{
id: "ID",
parent: "#",
text: "<span>Individual</span>",
icon: 'fa fa-star text-warning'
},}]}
Related
how can I have transformed my json
{
"clients": [
{
"id" : "qwerty",
"accounts" : [{"number" : "6666"}, {"number" : "7777"}]
},
{
"id" : "zxcvb",
"accounts" : [{"number" : "1111"}, {"number" : "2222"}]
}
]
}
into following type of json? using JQ
{
"items": [
{
"id" : "qwerty",
"number" : "6666"
},{
"id" : "qwerty",
"number" : "7777"
},{
"id" : "zxcvb",
"number" : "1111"
},{
"id" : "zxcvb",
"number" : "2222"
}]
}
What kind of tools from JQ can help me? I can't choose any possible way to do it
Something like this should do the trick:
{items: [.clients[] | {id} + .accounts[]]}
Online demo
I am trying to find a value in the json file and based on that I need to get the entire json data instead of that particular block.
Here is my sample json
[{
"name" : "Redirect to Website 1",
"behaviors" : [ {
"name" : "redirect",
"options" : {
"mobileDefaultChoice" : "DEFAULT",
"destinationProtocol" : "HTTPS",
"destinationHostname" : "SAME_AS_REQUEST",
"responseCode" : 302
}
} ],
"criteria" : [ {
"name" : "requestProtocol",
"options" : {
"value" : "HTTP"
}
} ],
"criteriaMustSatisfy" : "all"
},
{
"name" : "Redirect to Website 2",
"behaviors" : [ {
"name" : "redirect",
"options" : {
"mobileDefaultChoice" : "DEFAULT",
"destinationProtocol" : "HTTPS",
"destinationHostname" : "SAME_AS_REQUEST",
"responseCode" : 301
}
} ],
"criteria" : [ {
"name" : "contentType",
"options" : {
"matchOperator" : "IS_ONE_OF",
"values" : [ "text/html*", "text/css*", "application/x-javascript*" ],
}
} ],
"criteriaMustSatisfy" : "all"
}]
I am trying to match for "name" : "redirect" inside each behaviors array and if it matches then I need the entire block including the "criteria" section, as you can see its under same block {}
I managed to find the values using select methods but not able to get the parent section.
https://jqplay.org/s/BWJwVdO3Zv
Any help is much appreciated!
To avoid unwanted duplication:
.[]
| first(select(.behaviors[].name == "redirect"))
Equivalently:
.[]
| select(any(.behaviors[]; .name == "redirect"))
You can try this jq command:
<file jq 'select(.[].behaviors[].name=="redirect")'
[
{
"id" : 1,
"name" : "clevin",
"description" : "Version 1 : some desc",
"info" : [{
"id" : 2,
"name" : "abc",
"size" : "5 GB",
"used" : "25%"
},
{
"id" : 3,
"name" : "def",
"size" : "10 GB",
"used" : "15%"
},
{
"id" : 4,
"name" : "ghi",
"size" : "20 GB",
"used" : "5%"
}],
}]
This is my json file. When ever i mouse over "info.name"[abc, def, ghi] popover will display "name", "size" and "used".
but my issue is "abc" is the first value , when ever i mouseover it display value as expected. but when i mouseover "def" and "ghi" nothing is happened :(.
<ul type="none">
<li>
<label id="vol-label" class="muted">Info :</label>
{{#info}}
<span id="value"><a><u>{{name}}</u></a></span>
<span id="info-popover-title" class="hide">{{name}}</span>
<div id="info-popover-content" class="hide">
<p>Size : {{size}}</p> <p> Used : {{used}}</p><p> Status : {{status}}</p>
</div>
{{/info}}
</li>
</ul>
This is my template(mustache).
following is my view part(backbone.js)
events: {
"mouseenter #value" : "showDetails",
"mouseleave #value" : "hideDetails" ,
},
showDetails : function() {
this.$("#value").popover({
html : true,
title: function() {
return $("#info-popover-title").html();
},
content: function() {
return $("#info-popover-content").html();
}
});
this.$("#value").popover('show');
},
hideDetails : function() {
this.$("#value").popover('hide');
},
Please see my both screen shot to understand the issue. In fist screens hot see am getting all json info values "abc" "def" and "ghi" . in 2nd screen shot if i mouse over am getting "abc" values. but "def" and "ghi" value is not at all displaying. am not figure it out what is the issue :(.
I need to popove "def" and "ghi" values also. But i think something is wrong in my logic. Thanks in advance. This is really a rare issue for me might be others also.
If i use class insted of id following is the screen shot :(
2 things that you need to change here. First, is to use class to define for popovers instead of id. And the second is to abstract each <li> into its own view. Currently, you have one view that loops through the entire collection. All your events are currently tied to this one view. Doing those things I mentioned should fix this issue.
You can do something like this to have the become its own view which carries it's own sub-element. Just wrote this quickly and haven't tested but the idea is something like this. I'm not really sure which popover library you're using but the idea is generally the same.
Edit: Didn't realized you were using Mustache/Handlebars, so here's the JS Fiddle. Code
Now if you try to call each object it should work.
var abc =
{
"id" : 1,
"name" : "clevin",
"description" : "Version 1 : some desc",
"info" : {
"id" : 2,
"name" : "abc",
"size" : "5 GB",
"used" : "25%"
}
};
var def =
{
"id" : 3,
"name" : "def",
"size" : "10 GB",
"used" : "15%"
};
var ghi = {
"id" : 4,
"name" : "ghi",
"size" : "20 GB",
"used" : "5%"
};
var output =
{
show : function()
{
return abc["info"];
}
};
console.log(output.show());
Im trying to create a 'jsTree' treeview that gets it's data from a .Net webservice.
Everything is working, except for the a-node's href attribute. Whatever I try, it always renders as '#'.
As I understand from the documentation, all attributes in any data object get copied to the a-node.
Below is an example of my current json object. Can anyway figure out why the href attribute isn't copied to the nodes?
[ { "attributes" : { "id" : "rootnode_2",
"rel" : "root2"
},
"children" : [ { "attributes" : { "id" : "childnode_9",
"rel" : "folder"
},
"children" : [ { "attributes" : { "id" : "childnode_23",
"rel" : "folder"
},
"children" : null,
"data" : { "href" : "http://www.google.com",
"title" : "Test_Below_1"
},
"state" : null
} ],
"data" : { "href" : "http://www.google.com",
"title" : "Test_1"
},
"state" : null
},
{ "attributes" : { "id" : "childnode_10",
"rel" : "folder"
},
"children" : [ { "attributes" : { "id" : "childnode_24",
"rel" : "folder"
},
"children" : null,
"data" : { "href" : "http://www.google.com",
"title" : "Test_Below_2"
},
"state" : null
} ],
"data" : { "href" : "http://www.google.com",
"title" : "Test_2"
},
"state" : null
}
],
"data" : { "href" : "http://www.google.com",
"title" : "Glatt"
},
"state" : "closed"
} ]
This is how I initialize the tree;
$("#jstreejson").jstree({
json_data : {
"data": treeObject
},
themes: {
"theme": "apple",
"dots": true,
"icons": true,
"url": "/Scripts/themes/apple/style.css"
},
plugins: ['core', 'themes', 'json', "json_data"]
});
So... I'm not sure that's entirely correct. You can't control the anchor attributes as far as I know, but what you can do add stuff to the attr hash in the json and then use the select_node.jstree event to open the desired link, i.e:
.bind("select_node.jstree", function (e,data) {
var href_address = data.rslt.obj.attr("whatever");
// open desired link
}
i have used jstree to populate a tree view using json object .
my json object is something like this :-
[
{
"attr" : { "id" : "li.node.id" ,"rel" : "root"},
"data":"3-Test Group3","state": "open",
"children":["4-testing4"]
},
{
"attr" : { "id" : "li.node.id" ,"rel" : "root"},
"data":"2-Test Group2","state": "open",
"children":["4-testing4"]
}
]
This populates a tree but when i used cookie plugin to reselect the selected value i found that child nodes don't have id due to which the plugin does not work.
Can anyone help me how to provide id in child node??
Thanks in advance
how about:
{
"attr" : { "id" : "li.node.id" ,"rel" : "root"},
"data":"3-Test Group3","state": "open",
"children":[ { "data" : "4-testing4", "id" : "some_id" } ]
},