Q&A
>日付を選択して該当のレコードを表示するというところで躓いています。
どう考えてどのように作ってどうなったのでしょうか。
初めまして。
現在自分で設計したアプリケーションを作成するとういう課題を行っているんですが、
日付を選択して該当のレコードを表示するというところで躓いています。
Webで色々調べてみましたが自分が実現したいことに近いサイトを見つけることが出来ませんでした。
CRUD機能と画面レイアウトは完成しているので何を追加したらいいか、どこを修正したらいいかご教示お願いできますでしょうか。
実現したいこと
日付を選択したら該当のレコードが画面に表示される
MenuController.java
package com.example.demo.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import com.example.demo.entity.MenuEntity; import com.example.demo.service.MenuService; @Controller public class MenuController { @Autowired private MenuService menuService; @GetMapping(value = "/") public String getMenus(Model model) { List<MenuEntity> list = menuService.findAll(); model.addAttribute("menulist", list); return "detail"; } @PostMapping(value = "/insert") public String insert(@RequestParam String menu, @RequestParam String content, @RequestParam String url) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setMenu(menu); menuEntity.setContent(content); menuEntity.setUrl(url); menuService.insert(menuEntity); return "redirect:/"; } @PostMapping(value = "/update") public String update(@RequestParam int id, @RequestParam String menu, @RequestParam String content, @RequestParam String url) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setId(id); menuEntity.setMenu(menu); menuEntity.setContent(content); menuEntity.setUrl(url); menuService.update(menuEntity); return "redirect:/"; } @PostMapping(value = "/delete") public String delete(@RequestParam int id) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setId(id); menuService.delete(menuEntity); return "redirect:/"; } }
MenuService.java
package com.example.demo.service; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.example.demo.entity.MenuEntity; import com.example.demo.mapper.MenuMapper; @Service public class MenuService { @Autowired private MenuMapper menuMapper; public List<MenuEntity> findAll() { return menuMapper.findAll(); } public void insert(MenuEntity menuEntity) { menuMapper.insert(menuEntity); } public void update(MenuEntity menuEntity) { menuMapper.update(menuEntity); } public void delete(MenuEntity menuEntity) { menuMapper.delete(menuEntity); } }
MenuEntity.java
package com.example.demo.entity; import lombok.Data; @Data public class MenuEntity { private int id; private String menu; private String content; private String url; private String date; }
MenuMapper.java
package com.example.demo.mapper; import java.util.List; import org.apache.ibatis.annotations.Mapper; import com.example.demo.entity.MenuEntity; @Mapper public interface MenuMapper { List<MenuEntity> findAll(); void insert(MenuEntity menuEntity); void update(MenuEntity menuEntity); void delete(MenuEntity menuEntity); }
MenuMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.example.demo.mapper.MenuMapper"> <select id="findAll" resultType="com.example.demo.entity.MenuEntity"> SELECT * FROM menu_management </select> <insert id="insert"> INSERT INTO menu_management(menu, content, url) VALUES(#{menu}, #{content}, #{url}) </insert> <update id="update"> UPDATE menu_management SET menu = #{menu}, content = #{content}, url = #{url} WHERE id = #{id} </update> <delete id="delete"> DELETE FROM menu_management WHERE id = #{id} </delete> </mapper>
detail.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>献立詳細</title> <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" > <script th:src="@{/webjars/jquery/jquery.min.js}"></script> <style> body{ background-image:url('https://beiz.jp/images_M/white/white_00032.jpg'); } </style> <script th:inline="javascript"> $(function() { $('#selectDate').on('change',function() { var now = $('#selectDate').val(); var year = now.slice(0, 4); var month = now.slice(5, 7); var date = now.slice(8, 10); var target = year + "年" + month + "月" + date + "日"; $('#targetDate').html(target); $('.showInsert').show(); $('#contentarea').show(); }); $('.menusName').on('click', function() { $('#display').val($(this).next().text()); }); $('.showInsert').on('click',function() { $('#form').show(); }); $('.showUpdate').on('click',function() { $('#menuId').val($(this).parents().children("td").first().text()); $('#menuName').val($(this).parents().children("td").eq(1).text()); $('#menuContent').val($(this).parents().children("td").eq(2).text()); $('#menuUrl').val($(this).parents().children("td").eq(3).text()); $('#form').show(); $('.touroku').hide(); $('.kousin').show(); }); $('#cancelButton').on('click',function() { $('#form').hide(); }); $('#endButton').on('click',function() { $('#form').hide(); if($('#menuName').val() === ''){ alert('献立を入力してください'); $(this).focus(); return false; } if($('#menuName').val().match(/^[ \r\n\t]+$/)){ alert('献立はスペース以外で入力してください'); $(this).focus(); return false; } }); }); </script> </head> <body> <div class="container bg-danger-subtle"> <div class="row"> <div class="col-md-5"> <h1>献立管理表</h1> <form> <input class="border-0 bg-transparent" type="date" id="selectDate"> <br><br> <h2><p style="text-align:center" id="targetDate"></p></h2> <div style="text-align:right"> <input style="display:none" class="btn btn-outline-dark btn-light rounded-circle showInsert" type="button" value="＋"> </div> <table class="table table-light border border-dark"> <br> <tr th:each="mlist : ${menulist}"> <td class="menusId" id="targetId" th:text="${mlist.id}" hidden></td> <td class="menusName" id="targetMenu"><a href="#" class="link-dark" th:text="${mlist.menu}"></a></td> <td class="menusContent" id="targetContent" th:text="${mlist.content}" hidden></td> <td class="menusUrl" id="targetUrl" th:text="${mlist.url}" hidden></td> <td class="menusDate" id="targetDate" name="date" th:text="${mlist.date}" hidden></td> <td> <div style="text-align:right" method="POST"> <a name="url" th:href="${mlist.url}">レシピへ</a> <input type="hidden" name="id" th:value="${mlist.id}"> <input type="button" class="btn btn-primary showUpdate" value="編集"> <input type="hidden" name="id" th:value="${mlist.id}"> <input th:formaction="@{/delete}" type="submit" class="btn btn-danger" value="削除"> </div> </td> </tr> </table> </form> </div> <div class="col-md-4" id="contentarea" style="display:none"> <br> <br> <b><font size="4"><p>詳細</p></font></b> <textarea name="content" cols="50" rows="25" id="display" readonly></textarea> </div> <div class="col-md-3"> <form id="form" method="POST" style="display:none"> <br> <br> <h4>登録・更新</h4> <input type="hidden" name="id" id="menuId"><br> <b><label>献立</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="menu" id="menuName"><br> <b><label>詳細</label></b></br> <textarea class="form-control input-lg border border-dark" cols="50" rows="10" name="content" id="menuContent"></textarea><br> <b><label>レシピURL</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="url" id="menuUrl"><br> <b><label>日付</label></b><br> <input class="form-control input-lg border border-dark" type="date" name="date" id="menuDate"><br> <div style="text-align:right"> <input type="reset" class="btn btn-default" style="text-align:right" id="cancelButton" value="キャンセル"> <input type="reset" class="btn btn-warning" value="リセット"> <input th:formaction="@{/insert}" type="submit" class="touroku btn btn-primary" id="endButton" value="登録"> <input th:formaction="@{/update}" type="submit" class="kousin btn btn-primary" id="endButton" style="display:none" value="完了"> </div> </form> </div> </div> </div> <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script> </body> </html>
補足情報（FW/ツールのバージョンなど）
・IDE：eclipse 4.26.0
・Java：17
・DB：MySQL 8.0
・フレームワーク：SpringBoot 3.0.4
・ORマッパー：Mybtis 3.0.0
・テンプレートエンジン：Thymeleaf
最初はSQLのSELECT文にWHERE句を追加して該当のレコードを表示しようと思い、
MenuMapper.xmlのSELECT文を「SELECT * FROM menu_management WHERE date = #{date}」に変更しました。
そうしましたところ、画面から一覧が消えてしまったのでWebで色々調べたんですが解決できず、
現在detail.htmlの方に検索機能を持たせて該当のレコードを表示しようとしています。
質問後追加したjQueryを記載します。
「$('#selectDate').on('change',function() { 」の次の行に追加しました。
$(".table tr").each(function() {
var now = $('#selectDate').val();
var date =$(this).children("td").eq(4).text();
if(now != date) {
$(this).removeClass("hidden");
} else {
$(this).addClass("hidden");
}
});
この記述でnow、dateそれぞれ値は取得できていますが、該当でないレコードも表示されてしまいます。
MenuMapper.xml の SELECT は MenuController で "/" にマップされている getMenus から findAll を通して呼ばれるモノですから、そこに条件を入れたら何も出なくなるでしょうね。
SELECT し直すとすればサーバと通信することになりますので、どうするかは仕様次第ですが。
jquery の方はほとんど分からないので、後程調べてみようと思います。
MenuMapper.xml の SELECT文に条件を入れたら表示されなくなってしまうんですね。
一旦自己解決しましたがSELECTし直すときの方法も調べてみようと思います。
ありがとうございました。
解決されて良かったです。
回答1件
0
自己解決
htmlのほうに検索機能を持たせることで自己解決しました。
//テーブルで繰り返し処理
$(".table tr").each(function() {
//カレンダーの日付の取得
var now = $('#selectDate').val();
//データの日付取得
var date =$(this).children("td").eq(4).text();
//カレンダーとの日付とデータの日付が一致しなかったらtrタグにhidden属性を追加
if(now != date) {
$(this).attr("hidden","");
//カレンダーの日付とデータの日付が一致したらtrタグのhidden属性を削除
} else {
$(this).removeAttr("hidden","");
}
});
投稿2023/03/22 07:24
総合スコア2
あなたの回答
tips
プレビュー
