C'est une histoire embarrassante, mais je crée une page d'exemple qui affiche un arbre avec les données obtenues à partir de l'API et les laisse sous forme de données à l'écran. Veuillez nous aider avec vos conseils (code source). L'environnement, etc. sont listés en bas. Voici ce que nous voulons réaliser:
Données Json ⇒ Obtenir et afficher l'arborescence (affichage initial) ⇒ Boutons dans l'arborescence (bouton plus, etc.) ⇒ Récupérer à nouveau les données Json cibles ⇒ Afficher les données acquises n'importe où sur l'écran Lorsque le bouton est enfoncé Montrer seulement
-Librairie
- BOOK
Une pièce ☑️
＋ Hôtel
＋ Électrique
＋ Yahyakuya
Bouton d'affichage
Afficher l'emplacement[une pièce]
Affichez les informations de la partie cochée à n'importe quel endroit en HTML (feuille de thym). Le contenu affiché est appelé "One Piece" dans l'image, et je souhaite rassembler le nombre de pages dans les coulisses.
Je ne peux pas obtenir Json en créant un lien avec Ajax et Java et en l'affichant sous forme d'arbre. Si cela peut être réalisé, Ajax ou Java peuvent être utilisés, mais la situation actuelle est que je ne sais pas comment afficher Json dans un arbre et comment appeler à nouveau les données Json avec le bouton plus.
@Service
public class ZipCodeService {
@Autowired
@Qualifier("zipCodeSearchRestTemplate")
RestTemplate restTemplate;
/**Exemple d'URL de demande d'API de recherche*/
private static final String URL = "http://zipcloud.ibsnet.co.jp/api/search?zipcode={zipcode}";
public ZipCodeDto service(String zipcode) {
return restTemplate.getForObject(URL, ZipCodeDto.class, zipcode);
}
}
@Controller
public class ZipCodeController {
@Autowired
ZipCodeService zpcService;
/**
*Exemple de formulaire de saisie
* @return "zipcode"
*/
@RequestMapping("/zipcode")
public String zipcodeForm(HttpSession session, Model model) {
return "zipcode";
}
/**
*Exemple d'affichage d'informations
* @return "zipcode-confirm"
*/
@RequestMapping(value="/zipcode/confirm", method=RequestMethod.POST)
public String zipcodeConfirm(HttpSession session, Model model,
@RequestParam("zipcode") String zipcode){
//Seul chèque obligatoire, chèque numéro / chiffre omis
//Si nul ou vide, affiche un message d'erreur sur le formulaire de saisie
if (zipcode == null || zipcode.equals("")) {
model.addAttribute("errorMessage", "Veuillez entrer votre code postal.");
return zipcodeForm(session, model);
}
//Exemple d'appel de service d'API de recherche
ZipCodeDto zipCodeDto = zpcService.service(zipcode);
//Développer et afficher la liste avec thymeleaf
model.addAttribute("zipcodeList", zipCodeDto.getResults());
return "zipcode-confirm";
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Exemple d'installation</title>
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/treeview.css?_yuiversion=2.4.1" />
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/tree.css?_yuiversion=2.4.1" />
<script type="text/javascript" src="/content/lib/yui/build/yahoo/yahoo.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/event/event.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/treeview/treeview.js?_yuiversion=2.4.1"></script>
<style type="text/css">
* {
margin:0; padding:0;
}
body{
margin:0 auto; padding:0;
background-color:#666;
color:#666;
font:81%/1.5 verdana,sans-serif;
text-align:center;
}
#wrap {
width:500px;
margin:0 auto; padding:0;
background-color:#fff;
text-align:center;
}
#content {
margin:0 20px; padding:0;
text-align:left;
}
#footer {
margin:1em 0 0 0; padding:.2em .5em;
background-color:#999;
color:#fff;
font-size:78%;
text-align:right;
}
#footer * {
font-style:normal;
font-size:100%;
color:#fff;
}
h1 {
margin:0 0 1em 0; padding:.5em 1em;
background-color:#999;
color:#fff;
font-size:100%;
text-align:left;
}
h1 a {
color:#fff;
}
p {
margin:1em 0; padding:0;
}
img {
border:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Exemple d'installation</h1>
<p>référence:<a href="http://developer.yahoo.com/yui/examples/treeview/folder_style.html">YUI Library » Tree View Control » Folder-Style TreeView Design</a></p>
<div id="content">
<p>
<a id="expand" href="#">Expand all</a> |
<a id="collapse" href="#">Collapse all</a>
</p>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example's treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for expanding all nodes
YAHOO.util.Event.on("expand", "click", function(e) {
YAHOO.log("Expanding all TreeView nodes.", "info", "example");
tree.expandAll();
YAHOO.util.Event.preventDefault(e);
});
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//create top-level nodes
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
//we'll delegate to another function to build child nodes:
buildRandomTextBranch(tmpNode);
}
//once it's all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
</div><!-- div#wrap/div#content -->
</div><!-- div#wrap -->
</body>
</html>
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . ajax( {
url: 'jquery-sample-ajax-json.php',
dataType: 'json',
data: {
year: '2011',
month: '11',
day: '25'
},
success: function( data ) {
jQuery . each( data, function( key, value ) {
jQuery( '#jquery-sample-ajax' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );
jQuery( '#jquery-sample-textStatus' ) . text( 'Lire avec succès' );
},
error: function( data ) {
jQuery( '#jquery-sample-textStatus' ) . text( 'Échec de lecture' );
}
} );
},
function() {
jQuery( '#jquery-sample-ajax' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
{
"book1":{
"title": "Book",
"year": 2005 ,
"page": 399
},
"book2":{
"title": "une pièce",
"year": 2006 ,
"page": 650
}
}
STS、SpringBoot、Java8,Javascript、HTML、Timeleaf
Recommended Posts