• jsp获取数据 jsp直接获取后端数据 获取input选中的值 单选 没 checked属性

    1. let str0='${showList}';
    2. let str1=${showList};

    然后可以通过JSON.parse() 转

    获取input选中的值

    1. 				//goodsType 按类别    goods按货品
    2. 				var oneType= $("input[ name='criteria1' ] ").val();
    3. 				//count按数量  totalprice按费用
    4. 				var twoType = $("input[ name='criteria2' ] ").val();

    获取的是 下面红框中的值 

    1.  
    2. 		<script language="javascript">
    3.  
    4. 		    function querytr(){
    5. 		   		var startDate = document.getElementById("startDate");
    6. 		    	var endDate = document.getElementById("endDate");
    7. 		    	if(startDate.value != "" && endDate.value!= "" && (startDate.value > endDate.value)){
    8. 		    		parent.win.generalAlert("起始日期不能大于终止日期");
    9. 		    		return false;
    10. 		    	}
    11. 				document.all.query.click();
    12. 			}
    13. 		    function exptr(){
    14. 		    	var startDate = document.getElementById("startDate");
    15. 		    	var endDate = document.getElementById("endDate");
    16. 		    	if(startDate.value != "" && endDate.value!= "" && (startDate.value > endDate.value)){
    17. 		    		parent.win.generalAlert("起始日期不能大于终止日期");
    18. 		    		return false;
    19. 		    	}
    20. 				document.all.exp.click();
    21. 			}
    22.  
    23. 			// function fc(startDate,endDate){
    24. 				// Ext.Ajax.request({
    25. 				// 	method : 'POST',
    26. 				// 	url: 'servlet/wareStockOutCountAnalyseChartServlet',
    27. 				// 	params:{startDate:startDate,endDate:endDate},
    28. 				//     success: function(request){
    29.     			// 				if(request.responseText != ""){
    30.     			// 					var data = request.responseText;
    31.     			// 					chart(data);
    32.     			// 				}
    33.    				// 			}
    34. 				// });
    35. 			// }
    36.  
    37. 			// function chart(data){
    38. 				// if(document.forms[0].criteria1.value== "" || document.forms[0].criteria1.value== "goods"){
    39. 				// 	var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=无数据', "ChartId", "1000", "400");
    40. 				// }else if(document.forms[0].criteria2.value== ""){
    41. 				// 	var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=无数据', "ChartId", "1000", "400");
    42. 				// }else if(document.forms[0].criteria2.value== "count"){
    43. 				// 	var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=无数据', "ChartId", "1000", "400");
    44. 				// }else{
    45. 				// 	var chart = new FusionCharts('js/fc/Pie2D.swf?ChartNoDataText=无数据', "ChartId", "1000", "400");
    46. 				// }
    47. 				//
    48. 	            // chart.addParam("wmode","Opaque");
    49. 	            // chart.setDataXML(data);
    50. 	            // chart.render('Chart');
    51. 			// }
    52.  
    53. 			function fcPicture(){
    54. 				let title = "";
    55. 				let dataY = [];
    56. 				let dataX = [];
    57. 				let str0='${showList}';
    58. 				let showList = str0.replace(/[\\]/g,'/');
    59. 				// console.log(showList ,"出库情况统计");
    60. 				//goodsType 按类别    goods按货品
    61. 				var oneType= $("input[ name='criteria1' ] ").val();
    62. 				//count按数量  totalprice按费用
    63. 				var twoType = $("input[ name='criteria2' ] ").val();
    64. 				if(oneType === "goodsType"){
    65. 					//按类别 + 按数量;
    66. 					title = "货品分类出库数量统计(前十)";
    67. 					let arr = JSON.parse(showList)
    68. 					if(twoType === "count"){
    69. 						arr.forEach((item,index)=>{
    70. 							dataY.push(item[2]);
    71. 							dataX.push(item[3])
    72. 						})
    73. 					}else{
    74. 						//按类别 + 按费用  ---- 饼图
    75. 						bingPicture();
    76. 						return
    77. 					}
    78.  
    79. 				}else{
    80. 					// 按货品 + 按数量;
    81. 					title = "货品出库数量统计(前十)";
    82. 					let arr = JSON.parse(showList)
    83. 					if(twoType === "count"){
    84. 						arr.forEach((item,index)=>{
    85. 							dataY.push(item[2]);
    86. 							dataX.push(item[7])
    87. 						})
    88. 					}else{
    89. 						//按货品 + 按费用
    90. 						title = "货品出库费用统计(前十)";
    91. 						arr.forEach((item,index)=>{
    92. 							dataY.push(item[2]);
    93. 							dataX.push(item[9])
    94. 						})
    95. 					}
    96. 				}
    97. 				// console.log(oneType,twoType,"111111111111111111")
    98. 				let chartDom = document.getElementById('Chart');
    99. 				let myChart = echarts.init(chartDom);
    100. 				let option = {
    101. 					backgroundColor: 'white',
    102. 					title: {
    103. 						text: title,
    104. 						left: 'center',
    105. 						top: "20",
    106. 						// padding: [10, 0, 0, 50],
    107. 						textStyle: {
    108. 							color: "#000",
    109. 							fontFamily: "Alibaba PuHuiTi",
    110. 							fontSize: 14,
    111. 							fontWeight: 600,
    112. 							// padding: [0, 0, 0, 35]
    113. 						},
    114. 					},
    115. 					tooltip: { show: false },
    116. 					grid: { left: 10, top: 50, bottom: 20, right: 80, containLabel: true },
    117. 					xAxis: {
    118. 						type: 'value',
    119. 						boundaryGap: false,
    120. 						// max: 20, // Math.ceil(max / 4) * 5 || 10
    121. 						axisLine: { show: true, lineStyle: { color: '#ccc' } },
    122. 						axisTick: { show: false },
    123. 						axisLabel: { color: '#999' },
    124. 						splitLine: { lineStyle: { color: ['#CEEDFF'], type: [5, 8], dashOffset: 3 } },
    125. 						min:0,
    126. 						max:dataX.length === 0 ? 1000 :null
    127. 					},
    128. 					yAxis: {
    129. 						type: 'category',
    130. 						data: dataY,
    131. 						axisLine: { show: true, lineStyle: { color: '#ccc' } },
    132. 						axisTick: { length: 3 },
    133. 						axisLabel: { fontSize: 14, color: '#666', margin: 16, padding: 0 },
    134. 						inverse: true,
    135. 					},
    136. 					series: [
    137. 						{
    138. 							name: '数量',
    139. 							type: 'bar',
    140.  
    141. 							itemStyle: {
    142. 								color: '#52A8FF',
    143. 								color: function (params) {
    144. 									// 定义一个颜色集合
    145. 									let colorList = [
    146. 										'#52A8FF',
    147. 										'#00B389',
    148. 										'#FFA940',
    149. 										'#FF5A57',
    150. 										'#29EFC4',
    151. 										'#F8AEA4',
    152. 										'#FFC53D',
    153. 										'#009982',
    154. 										'#C099FC',
    155. 										'#F5855F',
    156. 										'#52A8FF',
    157. 										'#00B389',
    158. 										'#FFA940',
    159. 										'#FF5A57',
    160. 										'#29EFC4',
    161. 										'#F8AEA4',
    162. 										'#FFC53D',
    163. 										'#009982',
    164. 										'#C099FC',
    165. 										'#F5855F',
    166. 									];
    167. 									// 对每个bar显示一种颜色
    168. 									return colorList[params.dataIndex];
    169. 								},
    170. 							},
    171. 							barMaxWidth: 20,
    172. 							label: { show: true, position: 'right', offset: [0, 2], fontSize: 16 },
    173. 							data: dataX,
    174. 						},
    175. 					],
    176. 				};
    177. 				option && myChart.setOption(option);
    178. 			}
    179.  
    180. 			function bingPicture(){
    181. 				let str0='${showList}';
    182. 				let showList = str0.replace(/[\\]/g,'/');;
    183. 				// console.log(showList ,"按类别 + 按费用");
    184. 				let arr0 = JSON.parse(showList);
    185. 				let arr=[];
    186. 				let total =0;
    187. 				arr0.forEach((item,index)=>{
    188. 					let obj={};
    189. 					// console.log(item,"888888888888")
    190. 					obj.name= item[2];
    191. 					obj.value = item[4];
    192. 					arr.push(obj);
    193. 					total+=item[4]
    194. 				})
    195. 				// console.log(arr,"777777777777777777777")
    196. 				let  title="货品分类出库费用统计(合计:" + total.toFixed(2) + "元)";
    197. 				// let  title="货品分类出库费用统计";
    198. 				// let color = ['#ffc140', '#d151d8', 'red'];
    199. 				let option = {
    200. 					backgroundColor: 'white',
    201. 					// color: color,
    202. 					grid: {
    203. 						left: '5%',
    204. 						right: '5%',
    205. 						top: '20%',
    206. 						containLabel: true,
    207. 					},
    208. 					title: {
    209. 						text: title,
    210. 						show: true, // 是否显示标题,默认 true。
    211. 						padding: [10, 0, 15, 0],
    212. 						textStyle: {
    213. 							color: "#23527c",
    214. 							fontSize: 14,
    215. 							fontFamily: "Alibaba PuHuiTi",
    216. 							fontWeight: 600,
    217. 						},
    218. 						left: 'center',
    219. 					},
    220. 					tooltip: {
    221. 						show: true,
    222. 						trigger: 'item',
    223. 						//{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
    224. 						formatter: "{b} : {c} ({d}%)",
    225. 						backgroundColor: "rgba(1, 13, 19, 0.5)",
    226. 						borderWidth: 0,
    227. 						textStyle: {
    228. 							color: "rgba(212, 232, 254, 1)",
    229. 							// fontSize: fontChart(0.24),
    230. 						},
    231. 						// extraCssText: "z-index:2"
    232. 					},
    233.  
    234.  
    235. 					series: [
    236. 						{
    237. 							//   name: 'Access From',
    238. 							type: 'pie',
    239. 							radius: '50%',
    240. 							center: ['50%', '60%'],
    241. 							data: arr,
    242.  
    243. 							label: {
    244. 								padding: [
    245. 									15,
    246. 									0,
    247. 									0,
    248. 									0
    249. 								],
    250. 								color: "#4E5969",
    251. 								fontSize: 14,
    252. 								formatter: "{b|{b}}: {d|{c}} 元\n",
    253. 								rich: {
    254. 									b: {
    255. 										fontSize: 14,
    256. 										color: "#4E5969"
    257. 									},
    258. 									d: {
    259. 										fontSize: 14,
    260. 										fontWeight: 500,
    261. 										// fontFamily: "DINAlternate-Bold, DINAlternate",
    262. 										color: "#4E5969"
    263. 									}
    264. 								}
    265. 							},
    266.  
    267. 							emphasis: {
    268. 								itemStyle: {
    269. 									shadowBlur: 10,
    270. 									shadowOffsetX: 0,
    271. 									shadowColor: 'rgba(0, 0, 0, 0.5)'
    272. 								},
    273.  
    274. 							}
    275. 						}
    276. 					]
    277. 				};
    278. 				let chartDom = document.getElementById('Chart');
    279. 				let myChart = echarts.init(chartDom);
    280. 				option && myChart.setOption(option);
    281. 			}
    282.  
    283. 			function setCriteria(criteria,radioObj){
    284. 				if("goodsType" == criteria || "goods" == criteria){
    285. 					document.forms[0].criteria1.value = criteria;
    286. 				}else{
    287. 					document.forms[0].criteria2.value = criteria;
    288. 				}
    289. 				var arr = document.getElementsByName(radioObj.name);
    290. 				for(var i = 0;i<arr.length;i++){
    291. 					arr[i].value = "0";
    292. 				}
    293. 				radioObj.value = "1";
    294. 			}
    295.  
    296. 			function initRadio(){
    297. 				if(document.forms[0].criteria1.value == 'goodsType'){
    298. 					document.getElementById('radio1').checked = "checked";
    299. 				}
    300. 				if(document.forms[0].criteria1.value == 'goods'){
    301. 					document.getElementById('radio2').checked = "checked";
    302. 				}
    303. 				if(document.forms[0].criteria2.value == 'count'){
    304. 					document.getElementById('radio3').checked = "checked";
    305. 				}
    306. 				if(document.forms[0].criteria2.value == 'totalprice'){
    307. 					document.getElementById('radio4').checked = "checked";
    308. 				}
    309. 				// fc()
    310. 				fcPicture()
    311. 			}
    312.  
    313. 		</script>
    314. 		<style>
    315. 			#Chart{
    316. 				width: 100%;
    317. 				height: 500px;
    318. 			}
    319. 		</style>
    320.  
    321. 	</head>
    322.  
    323. 	<body
    324. 		onload="initRadio();">
    325. 		<div class="container-fluid">
    326. 			<span class="container-title"><span id="title">您现在所在的位置：查询统计 &gt
    327. 					出库情况分析</span> </span>
    328. 			<div class="continer-box">
    329. 				<div class="innerpage">
    330. 					<html:form action="wareStockOutCountAnalyse.do"
    331. 						enctype="multipart/form-data">
    332. 						<html:submit property="query" value="query" style="display:none" />
    333. 						<html:submit property="exp" value="exp" style="display:none" />
    334. 						<html:hidden property="criteria1" />
    335. 						<html:hidden property="criteria2" />
    336. 						<html:hidden property="pageType" />
    337. 						<div class="search-box">
    338. 							<span class="search-title">查询条件
    339. 								<a href="javascript:void(0);" class="close-up"></a>
    340. 							</span>
    341. 							<div class="seach-text clearfix">
    342. 								<div class="box clearfix">
    343. 									<span>条件：</span>
    344. 									<div class="form-r">
    345. 										<input type="radio" id="radio1" name="groupName1" value="0"
    346. 											onclick="setCriteria('goodsType',this)" />
    347. 										按类别
    348. 										<input type="radio" id="radio2" name="groupName1" value="1"
    349. 											onclick="setCriteria('goods',this)" />
    350. 										按货品
    351. 									</div>
    352. 								</div>
    353.  
    354. 								<div class="box clearfix">
    355. 									<span>条件：</span>
    356. 									<div class="form-r">
    357. 										<input type="radio" id="radio3" name="groupName2" value="1"
    358. 											onclick="setCriteria('count',this)" />
    359. 										按数量
    360. 										<input type="radio" id="radio4" name="groupName2" value="0"
    361. 											onclick="setCriteria('totalprice',this)" />
    362. 										按费用
    363. 									</div>
    364. 								</div>
    365. 								<div class="box box-time clearfix">
    366. 									<span>出库日期：</span>
    367. 									<div class="form-r">
    368. 										<div class="time-q">
    369. 											<div class="form-group">
    370. 												<div class="input-group date form_date" data-date=""
    371. 													data-date-format="" data-link-field="dtp_input2"
    372. 													data-link-format="yyyy-mm-dd">
    373. 													<html:text property="startDate" styleId="startDate" styleClass="form-control"
    374. 														readonly="true"  />
    375. 													<span class="input-group-addon"> <span
    376. 														class="glyphicon glyphicon-calendar"> <img
    377. 																src="img_new/3-12_03.png"> </span> </span>
    378. 												</div>
    379. 											</div>
    380. 										</div>
    381. 										<span>~</span>
    382. 										<div class="time-h">
    383. 											<div class="form-group">
    384. 												<div class="input-group date form_date" data-date=""
    385. 													data-date-format="" data-link-field="dtp_input2"
    386. 													data-link-format="yyyy-mm-dd">
    387. 													<html:text property="endDate" styleId="endDate" styleClass="form-control"
    388. 														readonly="true" />
    389. 													<span class="input-group-addon"> <span
    390. 														class="glyphicon glyphicon-calendar"> <img
    391. 																src="img_new/3-12_03.png"> </span> </span>
    392. 												</div>
    393. 											</div>
    394. 										</div>
    395. 									</div>
    396. 								</div>
    397. 								<div class="box clearfix">
    398. 									<span>部门：</span>
    399. 									<div class="form-r">
    400. 										<html:select property="depId" styleClass="selectpicker">
    401. 											<logic:notEmpty name="depms">
    402. 												<html:options collection="depms" property="id"
    403. 													labelProperty="name" />
    404. 											</logic:notEmpty>
    405. 										</html:select>
    406. 									</div>
    407. 								</div>
    408. 				             		<div class="btn-right">
    409. 									<a  class="btn btn-seach" href="#n" onClick="querytr();">查询</a>
    410. 									</div>
    411. 							</div>
    412. 						</div>
    413.  
    414. 									<div id='Chart' align="center">
    415. 									</div>
    416. 						<div class="result-table">
    417. 							<span class="table-title"><i>出库情况分析</i>
    418. 								<div class="btn-right">
    419. 									<a class="btn btn-grey" href="#n" onClick="exptr();">导出</a>
    420. 								</div>
    421. 							</span>
    422. 							<div class="table-box">
    423. 								<table width="100%" class="dg" border="0">
    424. 									<col class="dgl"></col>
    425. 									<c:choose>
    426. 										<c:when test="${fn:length(wareStockInList[0]) == 10}">
    427. 											<tr class="dgh">
    428. 												<th>
    429. 													货品编码
    430. 												</th>
    431. 												<th>
    432. 													货品名称
    433. 												</th>
    434. 												<th>
    435. 													规格型号
    436. 												</th>
    437. 												<th>
    438. 													颜色
    439. 												</th>
    440. 												<th>
    441. 													容量
    442. 												</th>
    443. 												<th>
    444. 													品牌
    445. 												</th>
    446. 												<th>
    447. 													出库总数量
    448. 												</th>
    449. 												<th>
    450. 													单位
    451. 												</th>
    452. 												<th>
    453. 													出库总价(元)
    454. 												</th>
    455. 											</tr>
    456. 											<logic:notEmpty name="wareStockInList">
    457. 												<logic:iterate id="wareStockIn" name="wareStockInList"
    458. 													indexId="rowID">
    459. 													<tr>
    460. 														<td class="companyname">
    461. 															${wareStockIn[1]}
    462. 														</td>
    463. 														<td class="companyname">
    464. 															${wareStockIn[2]}
    465. 														</td>
    466. 														<td class="companyname">
    467. 															${wareStockIn[3]}
    468. 														</td>
    469. 														<td class="companyname">
    470. 															${wareStockIn[4]}
    471. 														</td>
    472. 														<td class="companyname">
    473. 															${wareStockIn[5]}
    474. 														</td>
    475. 														<td class="companyname">
    476. 															${wareStockIn[6]}
    477. 														</td>
    478. 														<td class=jine>
    479. 															${wareStockIn[7]}
    480. 														</td>
    481. 														<td class="companyname">
    482. 															${wareStockIn[8]}
    483. 														</td>
    484. 														<td class="jine">
    485. 															<fmt:formatNumber pattern="#,##0.00">${wareStockIn[9]}</fmt:formatNumber>
    486. 														</td>
    487. 													</tr>
    488. 												</logic:iterate>
    489. 											</logic:notEmpty>
    490. 										</c:when>
    491. 										<c:otherwise>
    492. 											<tr class="dgh">
    493. 												<th>
    494. 													分类编号
    495. 												</th>
    496. 												<th>
    497. 													分类名称
    498. 												</th>
    499. 												<th>
    500. 													出库总数量
    501. 												</th>
    502. 												<th>
    503. 													出库总价(元)
    504. 												</th>
    505. 											</tr>
    506. 											<logic:notEmpty name="wareStockInList">
    507. 												<logic:iterate id="wareStockIn" name="wareStockInList"
    508. 													indexId="rowID">
    509. 													<tr>
    510. 														<td class="companyname">
    511. 															${wareStockIn[1]}
    512. 														</td>
    513. 														<td class="companyname">
    514. 															${wareStockIn[2]}
    515. 														</td>
    516. 														<td class="jine"">
    517. 															${wareStockIn[3]}
    518. 														
    519. 														">
    520. 															0.00">${wareStockIn[4]}
    521. 														
    522. 													
    523. 												
    524. 											
    525. 										
    526. 									
    527. 									">
    528. 										
    529. 											0 5 0 5;" colspan="11" align="center">
    530. 												无记录！
    531. 											
    532. 										
    533. 									
    535. 								
    536.
  • ">
  • size!=0 && !(wareStockOutCountAnalyseForm.criteria1 eq 'goodsType')}">
  • ">wareStockOutCountAnalyseForm
  • <%@ include file="/common/page.jsp"%>

  • 相关阅读:
    C语言 变量的存储和引用，内部和外部函数
    npm安装错误大全
    C++ STL(十) --------- 位图模拟实现
    【ES6 03】变量解构赋值
    Windows-Oracle19c 安装详解-含Navicate远程连接配置 - 同时连接Oracle11g和Oracle19c
    日语基础复习 Day 16
    基于java电子存证系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
    Spring5应用之AOP概念详解
    元数据的前世今生
    cube-studio 部署过程
  • 原文地址：https://blog.csdn.net/weixin_50885665/article/details/134074148