Bulletin list output using dropbox

user_18116882 0
Viewed 27

I am revising the web page, but I am writing because I am a beginner and I don't know what to do no matter how much I modify it.

It is a method of printing the bulletin board lists by classifying them into contents that match the dropbox value using the dropbox.

Originally, the existing code consisted of two drop boxes, so it was a posting list output method using a large category/subgroup. I want to change this to an output using one drop box. I changed the variable, but the output didn't come out as I wanted, so I asked the experts.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/com/jsp/common.jsp" %><%-- common --%>

<script type="text/javascript">

var type = false;
var typeChange = false;

function fn_paging(pageIndex) {
    var frm = $('#boardForm');
    $('#pageIndex').val(pageIndex);
    frm.attr('action', '/board/reportBoard.co');
    frm.submit();
}

function fn_goDateSearch(){
    if($('#datePickerE').val() == '' || $('#datePickerE').val() == null){
        alert('date.');
        return;
    }
    
    var frm = $('#boardForm');
    $('#pageIndex').val('1');
    $('#searchUseYn').val('1');
    frm.attr('action', '/board/reportBoard.co');
    frm.submit();
}

function fn_goTextSearch(){
    if($('#searchKeyword').val() == '' || $('#searchKeyword').val() == null){
        alert('search Keyword.');
        return;
    }
    
    var frm = $('#boardForm');
    $('#pageIndex').val('1');
    $('#searchUseYn').val('1');
    frm.attr('action', '/board/reportBoard.co');
    frm.submit();
}

function fn_goWrite() {
    var frm = $('#boardForm');
    $('#comCd').val('1');
    frm.attr('action', '/board/reportWrite.co');
    frm.submit();
}

function update_selected() {
    $("#smallType").val(0);
    type.prop('hidden',true);
    typeChange = $("#bigType").find("option[value^="+this.value+"]");
    typeChange.prop('hidden',false);
    
}

$(function() {
  type = $("#smallType").find("option[value!=0]");

  if($("#bigType").val() == null || $("#smallType").val() == 0){
      type.prop('hidden',true);
  } else {
      type.prop('hidden',true);
      typeChange = $("#smallType").find("option[value^="+$("#smallType").val()+"]");
      typeChange.prop('hidden',false);
  }

  $("#bigType").change(update_selected);
  
  $("#bigType").on('change', function(){
        var frm = $('#boardForm');
        $('#pageIndex').val('1');
        $('#searchUseYn').val('0');
        $('#datePickerS').val('');
        $('#datePickerE').val('');
        $('#searchKeyword').val('');
        frm.attr('action', '/board/reportBoard.co');
        frm.submit();
    });
  
  $(".reportContent").on("click", function(){
        var frm = $('#boardForm');
        $('#reportBoardSeq').val($(this).attr("name"));
        frm.attr('action', '/board/reportView.co');
        frm.submit();
  });
  
  $('#searchKeyword').keypress(function(event){
        if ( event.which == 13 ) {
            $('#searchKeywordBtn').click();
            return false;
        }
    });
  
});

function fn_goWeekReport() {
    window.location = '/board/reportBoard.co';
}

function fn_goDailyReport() {
    window.location = '/board/dailyReportBoard.co';
}

function fn_typeNewSelect() {
    <c:forEach items="${newTypeList}" var="type">
        <c:if test="${type.reportBoardFirstType ne 0}">
            var typeText = $("#bigType option[value=\"${type.reportBoardFirstType}\"]").prop("text")
            typeText = replace(typeText,"NEW","");
            $("#bigType option[value=\"${type.reportBoardFirstType}\"]").attr("style", "color:red");
            $("#bigType option[value=\"${type.reportBoardFirstType}\"]").prop("text",typeText+" NEW");
        </c:if>
    </c:forEach>
    

}



</script>

<form:form commandName="REPORTBOARDVO" id="boardForm" name="boardForm" method="post">
<form:hidden path="searchUseYn"/>
<form:hidden path="comCd"/>
<form:hidden path="reportBoardSeq"/>

<div class="board_Top_Div">
    <div class="reportType_Div">
        <button type="button" class="btn btn-secondary" onclick="fn_goWeekReport();">주간보고서</button>
        <button type="button" class="btn btn-outline-secondary" onclick="fn_goDailyReport();">일일피드</button>
    </div>
    
    <div class="date_Div">
        <form:input type="text" id="datePickerS" class="form-control" readonly="true" path="sDate" name="sDate" placeholder="Start Date"/>
        &nbsp;<span class="dateCenter"> ~ </span>&nbsp;
        <form:input type="text" id="datePickerE" class="form-control" readonly="true" path="eDate" name="eDate" placeholder="End Date"/>
        <button class="btn btn-primary" type="button" onclick="fn_goDateSearch();">Search</button>
    </div>
    
</div>


<hr>

<div>
    <div class="serarch_Div">
        <form:select class="form-select type-select" path="reportBoardFirstType" id="bigType">
            <option value="0" disabled selected hidden="hidden">분류</option>
            <c:if test="${!empty firstTypeList}">
                <c:forEach var="firstTypeList" items="${firstTypeList}" varStatus="status">
                    <c:if test="${firstTypeList ne 2}">
                        <form:option value="${firstTypeList}">
                            <c:if test="${firstTypeList eq 1}">a</c:if>
                            <c:if test="${firstTypeList eq 5}">b</c:if>
                            <c:if test="${firstTypeList eq 6}">c</c:if>
                            <c:if test="${firstTypeList eq 7}">d</c:if>
                            <c:if test="${firstTypeList eq 8}">e</c:if>
                            <c:if test="${firstTypeList eq 9}">f</c:if>
                            <c:if test="${firstTypeList eq 10}">g</c:if>
                            <c:if test="${firstTypeList eq 11}">h</c:if>
                            <c:if test="${firstTypeList eq 12}">i</c:if>
                        </form:option>
                    </c:if>
                </c:forEach>
            </c:if>
        </form:select>
        
     
        <script>fn_typeNewSelect()</script>
    </div>
    
    <div class="text_Search_Div">
        <form:input class="form-control" type="text" path="searchKeyword" placeholder="Text Search" id="searchKeyword"/>
        <button class="btn btn-primary" type="button" id="searchKeywordBtn" onclick="fn_goTextSearch();">Search</button>
     </div>
</div>

<div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">No.</th>
          <th scope="col">제목</th>
          <th scope="col">날짜</th>
          <th scope="col" class="txCClass">조회수</th>
        </tr>
      </thead>
      
      <tbody>
        <c:if test="${!empty reportBoardList}">
        <c:set var="today" value="<%=new java.util.Date()%>"/>
            <c:forEach var="reportBoardList" items="${reportBoardList}" varStatus="status">
                <fmt:parseDate var="strFullDate" value="${fn:replace(fn:substring(reportBoardList.reportBoardUpdateDate, 0, 10),'-','')}" pattern="yyyyMMdd" />
                <fmt:formatDate value="${strFullDate}" pattern="yyyyMMdd" var="strDate"/>
                <fmt:formatDate var="now" type="date" value="${today}" pattern="yyyyMMdd"/>
                
                <tr class="table-light">
                    <c:choose>
                        <c:when test="${strDate+3 >= now}">
                            <td class="col-md-1"><p class="reportContent" name="${reportBoardList.reportBoardSeq}"><c:out value="${reportBoardList.reportBoardSeq}"/></p></td>
                            <td class="col-md-6"><p class="reportContent" name="${reportBoardList.reportBoardSeq}"><c:out value="${reportBoardList.reportBoardSubject}"/><button type="button" class="btn btn-danger newClass">NEW</button></p></td>
                        </c:when>
                        
                        <c:otherwise>
                            <td class="col-md-1"><p class="reportContent" name="${reportBoardList.reportBoardSeq}"><c:out value="${reportBoardList.reportBoardSeq}"/></p></td>
                            <td class="col-md-6"><p class="reportContent" name="${reportBoardList.reportBoardSeq}"><c:out value="${reportBoardList.reportBoardSubject}"/></p></td>
                        </c:otherwise>
                    </c:choose>
                    
                    <td class="col-md-2"><c:out value="${fn:substring(reportBoardList.reportBoardUpdateDate, 0, 16)}"/></td>
                    <td class="col-md-1 txCClass"><c:out value="${reportBoardList.reportBoardHits}"/></td>
                </tr>
            </c:forEach>
        </c:if>
        <c:if test="${empty reportBoardList}">
            <tr>
                <td colspan="4" class="no_data txCClass">조회된 내역이 없습니다.</td>
            </tr>
        </c:if>
      </tbody>
    </table>

</div>

<c:if test="${sessionScope.TYPE_SESSION == 1 }">
    <div class="write_Div">
        <button type="button" class="btn btn-primary" onclick="fn_goWrite(); return false;">글쓰기</button>
    </div>
</c:if>

<div class="paging paging_Div">
     <ul class="pagination">
        <ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_paging" />
        <form:hidden path="pageIndex" />
    </ul>
</div>
</form:form>

<script>


 
$(function() {
    datepickerCalendar();
});

</script>

Since I've already made the modification, only variables remain in the contents of the small type. From what I see, I think we can change the small type to big type, but even if we proceed with the change, the bulletin board list cannot be classified as desired. Please help me how to proceed with the modification.

web css jsp jquery javascript
0 Answers
Related