2. 程式人生 > >select下拉框之資料回顯

select下拉框之資料回顯

阿新 • • 發佈：2019-02-01

估計這是最簡單的一種方法了

<script language="javascript">

setTimeout("$('select#menuLevel').val('${menuLevel}')", 100);

</script>

  <td style="width:150px;height:10%;">
                            <label>測站編碼</label>
                           
                        <select id="stcd" name="stcd" value="${stcd}"

>      / /value="${stcd}"這個在資料回顯的時候非常重要，特別是ajax這樣的
<option value="" >請選擇</option>

<c:forEach items="${sessionScope.rainstations}" var="item2">

<option value="${item2.stcd}"> ${item2.stcd}</option>


</c:forEach>

</select>
                        </td>

jsp部分程式碼：

 <td style="width: 100%;height: 10%;">
            <form  id="queryForm">


                <table style="width:98%;color:#000;margin-left: 10px;">
                    <tr>
                        <td style="width:150px;height:10%;">
                            <label>測站編碼</label>
                           
                        <select id="stcd" name="stcd" value="${stcd}">

<option value="" >請選擇</option>

<c:forEach items="${sessionScope.rainstations}" var="item2">

<option value="${item2.stcd}"> ${item2.stcd}</option>


</c:forEach>

</select>
                        </td>
                         <td style="display:show();">
                            <label>測站編碼:</label>
                            <input type="text" id="stcd2"  name="stcd2" value="${stcd2}"/>
                        </td>
                         <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>開始時間:</label>
                            <input type="text" id="tmbegin" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" name="tmbegin" value="${tmbegin}"/>
                        </td>
                       <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>結束時間:</label>
                            <input type="text" id="tmend" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" name="tmend" value="${tmend}"/>
                        </td>
                    <td style="width: 5%;height:10%;">
                           <!--<div class="btn query_btn" onclick="javaScript:$('#queryForm').submit();"/>  --> 
                          <div class="btn query_btn" onclick="submitall();"/>
                        
                        </td>
                    <td align="left" style="width: 10%">
                            <c:forEach items="${operate}" var="oper"><c:if test="${oper.operateType=='ADD'}"><div class="btn add_btn"  model="add" title="新增使用者" /></c:if></c:forEach>
                        </td> 
                        
                       
                        <td style="width:5%;height:10%;color:#000;"> <div class="btn add_btnf"  model="add1" title="雨量過程線圖表" onclick="getrainchart();"/></td>
                    </tr>
                </table>
            </form>
        </td>

點選查詢同時執行controller裡兩個方法，下面顯示的表單直接執行queryrain方法，上面的圖表通過ajax執行rainmnpic方法，這裡面涉及到一個問題，那就是點選查詢時候的效果和剛開始點選雨量過程線時的結果是一樣的，如果沒有加value="${}"這項，測站編碼始終是先載入到選擇，這樣剛開始載入時時載入全部資料的，所以當選擇測站編碼不為空時，下面的表單載入具體的測站編碼的資料，而上面的圖表載入的是全部的資料。但是加上value="${}"這項後，表單和圖表都是同時載入具體選擇的測站編碼的資料的。故問題就是這樣解決的。


controller裡：

// 雨情資料查詢
@RequestMapping(value = "queryrain")
public ModelAndView reservoirservice(
@RequestParam(value = "stcd", required = false, defaultValue = "") String stcd,
@RequestParam(value = "pageIndex", required = false, defaultValue = "0") Integer pageIndex,
@RequestParam(value = "pageSize", required = false, defaultValue = "10") Integer pageSize,
HttpServletRequest request, HttpServletResponse response) {
HashMap queryParams = new HashMap();
PageInfo pageInfo = new PageInfo();
queryParams.put("stcd", stcd);
queryParams.put("pageInfo", pageInfo);

int totalRow = queryrainService.queryRaincount(queryParams);

pageInfo.setPageSize(5);

pageInfo.setTotalRow(totalRow);
pageInfo.setTotalPageSize((int)Math.ceil(totalRow*1.0/pageInfo.getPageSize()));
pageInfo.setStartPageIndex(pageIndex);
pageInfo.setResult(queryrainService.queryRain(queryParams));
PageUtils.set(pageInfo, "queryrain.do", queryParams);
request.getSession().setAttribute("rainstations", stationservice.queryStation(null)); 

return new ModelAndView("queryrain", queryParams);


}

// 載入雨量資料圖表
@RequestMapping(value = "rainmnpic")
public void rainmnpic(//@RequestParam(value = "stcd", required = false, defaultValue = "") String stcd,
HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> queryParams = new HashMap<String, Object>();
String stcd=request.getParameter("stcd");
JSONObject json = new JSONObject();
if(stcd.equals("quanbu")|isNull(stcd)){

json.put("data", queryrainService.queryRain(null));

}else{
queryParams.put("stcd", stcd);
json.put("data", queryrainService.queryRain(queryParams));
}
System.out.println("json:"+json);
try {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
json.put("status", "1");
json.put("info", "查詢成功!");
out.write(json.toString());

} catch (IOException e) {
logger.error(e.getLocalizedMessage());
}
return ;
}

js裡面的部分程式碼：

function getrainchart2(){//把圖形函式放在ajax函式裡，使用它的獲取值
 var data2=new Array() ;var data3 = new Array();var data1 =new Array() 
 var data11 =new Array() ;var data22 =new Array() ;//把ajax裡定義的變數賦給全域性變數（ajax不好寫全域性變數）
 var data33 = new Array();var time=new Array();
 var times = new Array();
var  year=new Array();var month=new Array();var date=new Array();var hours=new Array();var minutes=new Array();var seconds=new Array();var nanos=new Array();
//var stcd1=$(btn).parent().parent().children("td").eq(0).find("select").val();
//var tmbegin1=$(btn).parent().parent().children("td").eq(1).find("input").val();
//var tmend1=$(btn).parent().parent().children("td").eq(2).find("input").val();
 
var stcd=$("#stcd").val();
var tmbegin=$("#tmbegin").val();
var tmend=$("#tmend").val();
vardata = {
    stcd:stcd,
    tmbegin:tmbegin,
    tmend:tmend
};
  var itemId=$("#stationType").val();
var url = "";var name="";var kk="";

url =  "rainmnpic.do";
name="雨量過程線(單位:mm)";
kk="雨量資料";

$.ajax({


type : "post",
   data:data,
url : url,
async: false,
success : function(msg){


var allchart = JSON.parse(msg).data;
//var mm =new Array();
//mm[0]=allchart[0].tm.month+1;
for (var i = 0; i < allchart.length; i++) {
//mm[0]=allchart[0].tm.month+1;
//alert("2"+allchart[0].tm.year-100+"-"+"0"+mm[0]+"-"+allchart[0].tm.date);
 year[i] = "2"+allchart[i].tm.year-100; 
 
     month[i] = allchart[i].tm.month + 1 < 10 ? "0" + (allchart[i].tm.month + 1) : allchart[i].tm.month + 1;
    
     date[i] = allchart[i].tm.date  < 10 ? "0" + (allchart[i].tm.date) : allchart[i].tm.date;
    
     hours[i] = allchart[i].tm.hours  < 10 ? "0" + (allchart[i].tm.hours) : allchart[i].tm.hours;
    
     minutes[i] = allchart[i].tm.minutes  < 10 ? "0" + (allchart[i].tm.minutes) : allchart[i].tm.minutes;
   
    seconds[i] = allchart[i].tm.seconds < 10 ? "0" + (allchart[i].tm.seconds) : allchart[i].tm.seconds;
   
    // alert(year[0]+"-"+month[0]+"-"+date[0]+" "+hours[0]+":"+minutes[0]+":"+seconds[0]);
    times[i]=year[i]+"-"+month[i]+"-"+date[i]+" "+hours[i]+":"+minutes[i]+":"+seconds[i];
//alert("時間1："+times[0]);
    data1.push(allchart[i].stcd);
        data22[i]=(allchart[i].rain);
        //data33[i].push(year[i]+"-"+month[i]+"-"+date[i]+" "+ hours[i]+":"+minutes[i]+":"+second[i]);
        //data33[i].push(year[i]+"-"+month[i]+"-"+date[i]);
        //data33[i].push(year[i]);
               data2[i]=data22[i];
                data3[i]=data33[i]




       
}



     




}
});


 
// 路徑配置
require.config({
paths : {
echarts : './scripts/echarts-2.2.7/build/dist'
}
});


require([ 'echarts', 'echarts/chart/bar' ,'echarts/chart/line' ], function(ec) {


var myChart = ec.init(document.getElementById('mainss2'));


var option = { 
title : {
       text: name,
       textStyle:{
           fontSize: 18,
           fontWeight: 'bolder',
           color: '#0A8ECE'
       } 
   },
tooltip : {
show : true
},
legend : {
data : [ kk ],
itemWidth : 20
},
dataZoom : {

//y:50,
handleSize:4,
       show : true,
       realtime : true,
       start : 0,
       end : 100
   },
   toolbox: {
       show : true,
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : true,
xAxis : [ {

type : 'category',

data :times

} ,{

type : 'category',

data :data1,

}],


yAxis : [ {name:'',
type : 'value'
} ],
series : [ {
barMinHeight:10,
barMaxWidth:40,

"name" : kk,
"type" : "bar",




"data":data2,
markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'},
//       function(){
//      int i=0;var res=new Array();int k=2;
//      for( i=0;i<data2.size();i++){
//               res[i]=  {name:data1[i],value: data2[i],  xAxis: times[i], yAxis:data2[i]};
//         for( k=0;k<data2.size();k++){
//               res[k]=res[k-1]+res[k-2]+",";
//         }  
//      }
//               return res;
//                }     
                 ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           }
       

} ]
};

myChart.setOption(option);
});
 
  }
/**
 * 繫結事件
 * 
 * @return
 */
function bindChangeEvent() {

$("#stcd").live("change", function() {

var stcd = $(this).val();


});

}



function submitall(){


$("#queryForm").submit();

getrainchart2();
}

資料回顯，就是把查詢條件先給controller然後再返回到jsp裡：

  jsp:

 <form  id="queryForm" method="post">
                <table style="width:98%;color:#000;margin-left: 10px;">
                    <tr>
                        <td style="width:150px;height:10%;">
                            <label>測站編碼</label>
                           
                        <select id="stcd" name="stcd" value="${stcd}">
<option value="" selected="selected">請選擇</option>

<c:forEach items="${stationstcd}" var="item2">

<option value="${item2.stcd}">${item2.stnm}(${item2.stcd})</option>
</c:forEach>
</select>
                        </td>
                         
                         <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>開始時間:</label>
                            <input type="text" id="tmbegin"  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" name="tmbegin" value="${tmbegin}"/>
                        </td>
                       <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>結束時間:</label>
                            <input type="text" id="tmend" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate"  name="tmend" value="${tmend}"/>
                        </td>
                    <td style="width: 5%;height:10%;">
                           <div class="btn query_btn" onclick="javaScript:$('#queryForm').submit();"/>  
                        <!--  <div class="btn query_btn" onclick="submitall();"/>--> 
                        
                        </td>
                    <td align="left" style="width: 10%">
                            <c:forEach items="${operate}" var="oper"><c:if test="${oper.operateType=='ADD'}"><div class="btn add_btn"  model="add" title="新增使用者" /></c:if></c:forEach>
                        </td> 
                        
                       
                        <td style="width:5%;height:10%;color:#000;"> <div class="btn add_btnf"  model="add1" title="雨量過程線圖表" onclick="getrainchart();"/></td>
                    </tr>
                </table>
            </form>

contorller:

if(!isNull(tmbegin1)){
queryParams.put("tmbegin", tmbegin1);
  }else{
queryParams.put("tmbegin", nowtime1);
 
    }
      if (!isNull(tmend1)){
queryParams.put("tmend", tmend1);
       }else{
        queryParams.put("tmend", nowtime2);
       
       }

相關推薦

select下拉框之資料回顯

估計這是最簡單的一種方法了 <script language="javascript"> setTimeout("$('select#menuLevel').val('${menuLevel}')", 100);</script>   <

select下拉框數據回顯

return urn items 查詢 val servle all div per 前臺頁面 <select class="select" name="operatorId" id="operatorId" style="height: 21px;" >

模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）

bbb n) nowrap pac inner sel cte spl innerhtml 最近需要一個下拉多選，本來想偷懶的，所以在網上百度了一番，最終還是發現沒有一個符合自己要求的，所以我自己寫了一個插件。下面是GIF動態效果圖展示 相信大家已經看到效果了，接下來

select下拉框之JS/JQuery詳細操作

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

select下拉框之年份很多時

後臺程式碼： int endYear=2050; int beginYear=1980;ArrayList list=new ArrayList();for(int i=endYear;i>=b

select下拉框的資料方式

每一天都是新的，知識的不斷更新，要求我們有不斷學習的能力。不止於眼前，專屬於心。 這幾天我所寫的select下拉框資料一般表現為三種方式：常規下拉框（資料拿過來直接用）、編輯頁面下拉框（進行資料的判斷，相等被選中）、兩表從屬關係的下拉框（資料要進行從屬判定，子類自動歸屬於父

select下拉框之預設選中問題

  <select id="add_projectbudget_pstcd" name="add_projectbudget_pstcd">     <option value="

多個下拉框聯動及回顯（Jquery）

應用場景如下： 程式碼實現如下： <%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="

select下拉框之去掉重複

window.onload =function(){select1();select2();     }function select1() {   var opts = document.getElementById('add_stdevice_code').option

select下拉框資料回顯,option去重

select下拉框資料回顯: 方法1 document.getElementById("province").value="${province}";   document.getElementById("province").options[${province}].s

省市區三級聯動select下拉框，下拉框資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

解決element ui select下拉框不回顯資料問題

<el-select v-model="commonForm.status" clearable placeholder="請選擇"> <el-option v-for="

對select下拉框的回顯資料的處理

                                                               一：目前在spring MVC 中使用的，---------------可以                                    

關於單選框、下拉框、複選框的資料回顯問題以及全選和全不選

在列表顯示的介面中通常都有編輯操作，進行編輯操作時通常就牽涉到資料的回顯問題，本文中編輯介面和新增介面是在同一個介面。 頁面中使用了jstl中的c標籤，所以要先引用： <%@ taglib prefix="c" uri="http://java.sun.com/js

select下拉框回顯的幾種方法

第一種： jsp程式碼： <selectid="csrqnf"name="csrqnf"id="selecte"class="shortselect"value="${nfResult}">                               

select下拉框回顯的幾種方式

第一種： jsp程式碼： <selectid="csrqnf"name="csrqnf"id="selecte"class="shortselect"value="${nfResult}">                               

select下拉框，選擇其中一個，然後進行查詢，完成之後，頁面上的select框不回顯當前查詢時選中的值

開發十年，就只剩下這套架構體系了！ >>>   

SpringMVC之ajax+select下拉框交互常用方式

ret val hash In new type dex chain ucc <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert

layui select下拉框改變之 change 監聽事件

 在layui中使用 jquery 觸發select 的 change事件無效   使用layui.use監聽select事件           <select lay-filter="dem

bootstrap-select下拉框模糊搜尋和動態繫結資料

前言 今天做專案的時候，需要對下拉框做一個模糊搜尋，就想到了bootstrap-select外掛， 在運用中遇到的問題進行總結下。 引入 引入bootstrap和bootstrap-select檔案 <link rel="stylesheet