Skip to content

Improvement of JsTree 3 themes and plugins support #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 20, 2016
Merged

Improvement of JsTree 3 themes and plugins support #49

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
158bc17
- add plugins attribute to tree tag.
flofourcade Jul 13, 2016
338b4fa
- correct conflict with jstree.default.plugins
flofourcade Jul 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
- correct conflict with jstree.default.plugins 
- add examples in showcase for search plugin with/without ajax usage
- add example for themeVariant and responsive usage
  • Loading branch information
@flofourcade
flofourcade committed Jul 15, 2016
commit 338b4fa7ff315129b67a8656ff769f3955a43a2f
140 changes: 140 additions & 0 deletions ...uery-showcase/src/main/java/com/jgeppert/struts2/jquery/showcase/tree/JsonTreeSearch.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

package com.jgeppert.struts2.jquery.showcase.tree;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;

import com.jgeppert.struts2.jquery.tree.result.TreeNode;
import com.opensymphony.xwork2.ActionSupport;

public class JsonTreeSearch extends ActionSupport {

private static final long serialVersionUID = -9222182010123442253L;
private static final List<TreeNode> treeSource = new ArrayList<>();
private List<TreeNode> nodes = new ArrayList<TreeNode>();
private String id = "";
private String str;
Set<String> nodeIds = new HashSet<>();

static {
TreeNode treeRoot = new TreeNode("1", "Struts 2", new ArrayList<TreeNode>());
treeRoot.setHasChildren(Boolean.TRUE);
treeSource.add(treeRoot);

TreeNode nodeGeneral = new TreeNode("11", "General", new ArrayList<TreeNode>());
nodeGeneral.setHasChildren(Boolean.TRUE);
treeSource.add(nodeGeneral);

TreeNode nodePlugins = new TreeNode("12", "Plugins", new ArrayList<TreeNode>());
nodePlugins.setHasChildren(Boolean.TRUE);
treeSource.add(nodePlugins);

TreeNode nodeBlogs = new TreeNode("13", "Blogs", new ArrayList<TreeNode>());
nodeBlogs.setHasChildren(Boolean.TRUE);
treeSource.add(nodeBlogs);

TreeNode nodeStruts2 = new TreeNode("111", "Struts 2");
nodeStruts2.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2);

TreeNode nodeStruts2FB = new TreeNode("112", "Struts 2 @ Facebook");
nodeStruts2FB.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2FB);

TreeNode nodeStruts2TW = new TreeNode("113", "Struts 2 @ Twitter");
nodeStruts2TW.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2TW);

TreeNode nodeStruts2Pins = new TreeNode("121", "Struts 2 Plugins");
nodeStruts2Pins.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2Pins);

TreeNode nodeStruts2JQ = new TreeNode("122", "Struts 2 JQuery Plugin");
nodeStruts2JQ.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2JQ);

TreeNode nodeStruts2BS = new TreeNode("123", "Struts 2 Bootstrap Plugin");
nodeStruts2BS.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2BS);

TreeNode nodeStruts2JQNews = new TreeNode("131", "Struts2 JQuery News");
nodeStruts2JQNews.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2JQNews);

}

@Action(value = "json-tree-search-data", results = @Result(name = SUCCESS, type = "json", params = { "root",
"nodes" }))
public String data() {
for (TreeNode n : treeSource) {
if ((this.id == null || "".equals(id)) && n.getId().equals("1")) {
this.nodes.add(n);
break;
} else if (this.id != null && !"".equals(id) && n.getId().startsWith(id)
&& n.getId().length() == (this.id.length() + 1)) {
this.nodes.add(n);
}
}

return SUCCESS;
}

@Override
@Action(value = "json-tree-search", results = @Result(name = SUCCESS, type = "json", params = { "root",
"nodeIds" }))
public String execute() {
if (this.str != null && !"".equals(str)) {
for (TreeNode n : treeSource) {
if (n.getText().toLowerCase().contains(str.toLowerCase())) {
String nodeId = n.getId();
do {
this.nodeIds.add(nodeId);
nodeId = nodeId.substring(0, nodeId.length() - 1);
} while (nodeId.length() > 0);
}
}
}

return SUCCESS;
}

public List<TreeNode> getNodes() {
return nodes;
}

public void setId(String id) {
this.id = id;
}

public void setStr(String str) {
this.str = str;
}

public Set<String> getNodeIds() {
return this.nodeIds;
}

}
174 changes: 173 additions & 1 deletion struts2-jquery-showcase/src/main/webapp/WEB-INF/content/tree/tree-json.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@
nodeTargets="result"
onClickTopics="treeClicked"
/>

<div id="result" class="result ui-widget-content ui-corner-all">Click on the AJAX links above.</div>



<sj:tabbedpanel id="localtabs" cssClass="list">
<sj:tab id="tab1" target="jsp" label="JSP Code"/>
<sj:tab id="tab2" target="javascript" label="JavaScript"/>
Expand Down Expand Up @@ -138,3 +139,174 @@ public class JsonTreeData extends ActionSupport implements ServletContextAware {
</pre>
</div>
</sj:tabbedpanel>
<p class="text">
A Tree Component with a JSON Data Source and search plugin with AJAX / JSON.
</p>
<s:url var="treeSearchDataUrl" action="json-tree-search-data" namespace="/tree"/>
<s:url var="treeSearchUrl" action="json-tree-search" namespace="/tree"/>
<s:url var="echo" value="/echo.action"/>

<div>
<input type="text" id="searchField" />
<sj:submit value="Search" button="true"
onclick="$('#jsonTreeSearch').jstree('search', $('#searchField').val())" />
</div>
<sjt:tree
id="jsonTreeSearch"
href="%{treeSearchDataUrl}"
plugins="{search:{ajax:{url:'%{treeSearchUrl}'}}}"

/>
<p class="text">
More about JsTree 3 plugins (unique, sort, massload, drag and drop,...) on <a href="https://www.jstree.com/">JsTree official website</a>
</p>
<sj:tabbedpanel id="localtabs2" cssClass="list">
<sj:tab id="tab4" target="jspsearch" label="JSP Code"/>
<sj:tab id="tab5" target="jsonsearchaction" label="JSON Action"/>
<div id="jspsearch">
<pre>
<code class="html">
&lt;s:url var=&quot;treeDataUrl&quot; action=&quot;json-tree-data&quot; namespace=&quot;/tree&quot;/&gt;
&lt;s:url var=&quot;echo&quot; value=&quot;/echo.action&quot;/&gt;
&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;searchField&quot; /&gt;
&lt;sj:submit value=&quot;Search&quot; button=&quot;true&quot;
onclick=&quot;$(&apos;#jsonTreeSearch&apos;).jstree(&apos;search&apos;, $(&apos;#searchField&apos;).val())&quot; /&gt;
&lt;/div&gt;
&lt;sjt:tree
id=&quot;jsonTreeSearch&quot;
href=&quot;%{treeSearchDataUrl}&quot;
plugins=&quot;{search:{ajax:{url:&apos;%{treeSearchUrl}&apos;}}}&quot;
/&gt;
</code>
</pre>
</div>
<div id="jsonsearchaction">
<pre>
<code class="java">
package com.jgeppert.struts2.jquery.showcase.tree;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;

import com.jgeppert.struts2.jquery.tree.result.TreeNode;
import com.opensymphony.xwork2.ActionSupport;

public class JsonTreeSearch extends ActionSupport {

private static final long serialVersionUID = -9222182010123442253L;
private static final List&lt;TreeNode&gt; treeSource = new ArrayList&lt;&gt;();
private List&lt;TreeNode&gt; nodes = new ArrayList&lt;TreeNode&gt;();
private String id = &quot;&quot;;
private String str;
Set&lt;String&gt; nodeIds = new HashSet&lt;&gt;();

static {
TreeNode treeRoot = new TreeNode(&quot;1&quot;, &quot;Struts 2&quot;, new ArrayList&lt;TreeNode&gt;());
treeRoot.setHasChildren(Boolean.TRUE);
treeSource.add(treeRoot);

TreeNode nodeGeneral = new TreeNode(&quot;11&quot;, &quot;General&quot;, new ArrayList&lt;TreeNode&gt;());
nodeGeneral.setHasChildren(Boolean.TRUE);
treeSource.add(nodeGeneral);

TreeNode nodePlugins = new TreeNode(&quot;12&quot;, &quot;Plugins&quot;, new ArrayList&lt;TreeNode&gt;());
nodePlugins.setHasChildren(Boolean.TRUE);
treeSource.add(nodePlugins);

TreeNode nodeBlogs = new TreeNode(&quot;13&quot;, &quot;Blogs&quot;, new ArrayList&lt;TreeNode&gt;());
nodeBlogs.setHasChildren(Boolean.TRUE);
treeSource.add(nodeBlogs);

TreeNode nodeStruts2 = new TreeNode(&quot;111&quot;, &quot;Struts 2&quot;);
nodeStruts2.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2);

TreeNode nodeStruts2FB = new TreeNode(&quot;112&quot;, &quot;Struts 2 @ Facebook&quot;);
nodeStruts2FB.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2FB);

TreeNode nodeStruts2TW = new TreeNode(&quot;113&quot;, &quot;Struts 2 @ Twitter&quot;);
nodeStruts2TW.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2TW);

TreeNode nodeStruts2Pins = new TreeNode(&quot;121&quot;, &quot;Struts 2 Plugins&quot;);
nodeStruts2Pins.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2Pins);

TreeNode nodeStruts2JQ = new TreeNode(&quot;122&quot;, &quot;Struts 2 JQuery Plugin&quot;);
nodeStruts2JQ.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2JQ);

TreeNode nodeStruts2BS = new TreeNode(&quot;123&quot;, &quot;Struts 2 Bootstrap Plugin&quot;);
nodeStruts2BS.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2BS);

TreeNode nodeStruts2JQNews = new TreeNode(&quot;131&quot;, &quot;Struts2 JQuery News&quot;);
nodeStruts2JQNews.setHasChildren(Boolean.FALSE);
treeSource.add(nodeStruts2JQNews);

}

@Action(value = &quot;json-tree-search-data&quot;, results = @Result(name = SUCCESS, type = &quot;json&quot;, params = { &quot;root&quot;,
&quot;nodes&quot; }))
public String data() {
for (TreeNode n : treeSource) {
if ((this.id == null || &quot;&quot;.equals(id)) && n.getId().equals(&quot;1&quot;)) {
this.nodes.add(n);
break;
} else if (this.id != null && !&quot;&quot;.equals(id) && n.getId().startsWith(id)
&& n.getId().length() == (this.id.length() + 1)) {
this.nodes.add(n);
}
}

return SUCCESS;
}

@Override
@Action(value = &quot;json-tree-search&quot;, results = @Result(name = SUCCESS, type = &quot;json&quot;, params = { &quot;root&quot;,
&quot;nodeIds&quot; }))
public String execute() {
if (this.str != null && !&quot;&quot;.equals(str)) {
for (TreeNode n : treeSource) {
if (n.getText().toLowerCase().contains(str.toLowerCase())) {
String nodeId = n.getId();
do {
this.nodeIds.add(nodeId);
nodeId = nodeId.substring(0, nodeId.length() - 1);
} while (nodeId.length() &gt; 0);
}
}
}

return SUCCESS;
}

public List&lt;TreeNode&gt; getNodes() {
return nodes;
}

public void setId(String id) {
this.id = id;
}

public void setStr(String str) {
this.str = str;
}

public Set&lt;String&gt; getNodeIds() {
return this.nodeIds;
}

}

</code>
</pre>
</div>
</sj:tabbedpanel>
58 changes: 58 additions & 0 deletions struts2-jquery-showcase/src/main/webapp/WEB-INF/content/tree/tree.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,35 @@
</sjt:treeItem>
</sjt:tree>

<h2>Tree with search plugin</h2>

<p class="text">
A Tree with a search field, jstreethemeVariant set as "large" and jstreeResponsive set as "true".
</p>
<div>
<input type="text" id="searchField" />
<sj:submit value="Search" button="true"
onclick="$('#treeSearch').jstree('search', $('#searchField').val())" />
</div>
<sjt:tree
id="treeSearch" jstreetheme="default-dark" jstreethemeVariant="large" jstreethemeResponsive="true"
plugins="{search:{ajax:false}}"
>
<sjt:treeItem title="General">
<sjt:treeItem title="Struts2" href="http://struts.apache.org"/>
<sjt:treeItem title="Struts2 @ Facebook" href="https://www.facebook.com/apachestruts"/>
<sjt:treeItem title="Struts2 @ Twitter" href="https://twitter.com/TheApacheStruts"/>
</sjt:treeItem>
<sjt:treeItem title="Plugins">
<sjt:treeItem title="Struts2 Plugins" href="https://cwiki.apache.org/S2PLUGINS/home.html"/>
<sjt:treeItem title="Struts2 jQuery Plugin" href="https://github.com/struts-community-plugins/struts2-jquery/"/>
<sjt:treeItem title="Struts2 Bootstrap Plugin" href="https://github.com/struts-community-plugins/struts2-bootstrap/"/>
</sjt:treeItem>
<sjt:treeItem title="Blogs">
<sjt:treeItem title="Struts2 jQuery News" href="http://www.jgeppert.com"/>
</sjt:treeItem>
</sjt:tree>

<h4>Source Code</h4>

<div class="code ui-widget-content ui-corner-all">
Expand Down Expand Up @@ -317,6 +346,35 @@
&lt;/sjt:treeItem&gt;
&lt;/sjt:treeItem&gt;
&lt;/sjt:tree&gt;

&lt;h2&gt;Tree with search plugin&lt;/h2&gt;

&lt;p class=&quot;text&quot;&gt;
A Tree with a search field, jstreethemeVariant set as &quot;large&quot; and jstreeResponsive set as &quot;true&quot;.
&lt;/p&gt;
&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;searchField&quot; /&gt;
&lt;sj:submit value=&quot;Search&quot; button=&quot;true&quot;
onclick=&quot;$(&apos;#treeSearch&apos;).jstree(&apos;search&apos;, $(&apos;#searchField&apos;).val())&quot; /&gt;
&lt;/div&gt;
&lt;sjt:tree
id=&quot;treeSearch&quot; jstreetheme=&quot;default-dark&quot; jstreethemeVariant=&quot;large&quot; jstreethemeResponsive=&quot;true&quot;
plugins=&quot;{search:{ajax:false}}&quot;
&gt;
&lt;sjt:treeItem title=&quot;General&quot;&gt;
&lt;sjt:treeItem title=&quot;Struts2&quot; href=&quot;http://struts.apache.org&quot;/&gt;
&lt;sjt:treeItem title=&quot;Struts2 @ Facebook&quot; href=&quot;https://www.facebook.com/apachestruts&quot;/&gt;
&lt;sjt:treeItem title=&quot;Struts2 @ Twitter&quot; href=&quot;https://twitter.com/TheApacheStruts&quot;/&gt;
&lt;/sjt:treeItem&gt;
&lt;sjt:treeItem title=&quot;Plugins&quot;&gt;
&lt;sjt:treeItem title=&quot;Struts2 Plugins&quot; href=&quot;https://cwiki.apache.org/S2PLUGINS/home.html&quot;/&gt;
&lt;sjt:treeItem title=&quot;Struts2 jQuery Plugin&quot; href=&quot;https://github.com/struts-community-plugins/struts2-jquery/&quot;/&gt;
&lt;sjt:treeItem title=&quot;Struts2 Bootstrap Plugin&quot; href=&quot;https://github.com/struts-community-plugins/struts2-bootstrap/&quot;/&gt;
&lt;/sjt:treeItem&gt;
&lt;sjt:treeItem title=&quot;Blogs&quot;&gt;
&lt;sjt:treeItem title=&quot;Struts2 jQuery News&quot; href=&quot;http://www.jgeppert.com&quot;/&gt;
&lt;/sjt:treeItem&gt;
&lt;/sjt:tree&gt;
</code>
</pre>
</div>
Loading