三级select下拉动态更新:
@RequestMapping(value = "manage", method = { RequestMethod.GET, RequestMethod.POST })
public String manage(HttpServletRequest request, ModelMap context) {
CommonResult<JSONArray> result = new CommonResult<>();
try{
List<CategoryInfo> categoryInfos = categoryService.getFirstCategory();
result.addModel("category0", categoryInfos);
this.toVm(result, context);
}catch (Exception e){
logger.error("PriceWarnRemindManagerController manage",e);
}
return "/warn/manage";
}
@RequestMapping(value = "getCategory1", method = { RequestMethod.GET, RequestMethod.POST }) @ResponseBody public Map<String,Object> getCateGory1(HttpServletRequest request, ModelMap context) { Map<String,Object> mapData = new HashMap<String,Object>(); try{ String category0 = request.getParameter("category0"); if(category0.length()<=0){ return mapData; } CategoryInfo categoryRep = new CategoryInfo(); categoryRep.setFid(Integer.valueOf(category0)); categoryRep.setCataClass(1); List<CategoryInfo> categoryInfos = categoryService.getSecondAndThirdCategory(categoryRep); mapData.put("category1", categoryInfos); }catch (Exception e){ logger.error("PriceWarnRemindManagerController getCateGory1",e); } return mapData; } @RequestMapping(value = "getCategory2", method = { RequestMethod.GET, RequestMethod.POST }) @ResponseBody public Map<String,Object> getCateGory2(HttpServletRequest request, ModelMap context) { Map<String,Object> mapData = new HashMap<String,Object>(); try{ String category1 = request.getParameter("category1"); if(category1.length()<=0){ return mapData; } CategoryInfo categoryRep = new CategoryInfo(); categoryRep.setFid(Integer.valueOf(category1)); categoryRep.setCataClass(2); List<CategoryInfo> categoryInfos = categoryService.getSecondAndThirdCategory(categoryRep); mapData.put("category2", categoryInfos); }catch (Exception e){ logger.error("PriceWarnRemindManagerController getCateGory2",e); } return mapData; }
<td>商品品类:</td> <td style="width: 436px;" > <select id="category0" name="category0" style="width:128px;" > <option value="">请选择</option> #foreach($item in $category0) <option value="$item.id">$item.name</option> #end </select> <select id="category1" name="category1" style="width:128px" > <option value="">请选择</option> </select> <select id="category2" name="category2" style="width:128px"> <option value="">请选择</option> </select> </td>
$("#category0").change(function(){ var selected=$(this).children('option:selected').val() var ca11 = $("#category1"); var ca12 = $("#category2"); ca11.empty(); ca12.empty(); $.ajax({ type: "POST", url: "/price/monitor/getCategory1", data:"category0="+selected, success: function (data) { var category1 = data.category1; var ca1 = $("#category1"); ca1.empty(); ca1.append("<option value=''>请选择</option>"); var ca122 = $("#category2"); ca122.empty(); ca122.append("<option value=''>请选择</option>"); if (category1) { for(var i=0 ;i<category1.length;i++){ ca1.append("<option value='"+category1[i].id+"'>"+category1[i].name+"</option>"); } return true; } else { return false; } } }); }); $("#category1").change(function(){ var selected=$(this).children('option:selected').val() var ca12 = $("#category2"); ca12.empty(); $.ajax({ type: "POST", url: "/price/monitor/getCategory2", data:"category1="+selected, success: function (data) { var category2 = data.category2; var ca1 = $("#category2"); ca1.empty(); ca1.append("<option value=''>请选择</option>"); if (category2) { for(var i=0 ;i<category2.length;i++){ ca1.append("<option value='"+category2[i].id+"'>"+category2[i].name+"</option>"); } return true; } else { return false; } } }); }); });
“全选”,点击操作和选中执行操作
$(function (){ $('input[name="selectall"]').click(function(){ //alert(this.checked); if($(this).is(':checked')){ $('input[name="checkBox"]').each(function(){ //此处如果用attr,会出现第三次失效的情况 $(this).prop("checked",true); }); }else{ $('input[name="checkBox"]').each(function(){ $(this).removeAttr("checked",false); }); } }); });
<th><span><input type="checkbox" name="selectall"/>全选</span></th>
…
<td> <div class="checkbox"> <input type="checkbox" name="checkBox" id="$!item.id" value=""> </div> </td>
var chks=$("input:checked");
var warnList = []; for(var i=0;i<chks.length;i++){ var id = chks[i].getAttribute("id"); if(id!=null){ warnList.push({"id":id}); } }
$.ajax({ type: "POST", url: "/warn/remind/batchReaded", data:JSON.stringify(warnList), dataType:"json", contentType:"application/json", success: function (data) { if(data.success){ alert("操作成功!"); window.location.reload(); }else{ alert("操作失败:"+data.msg); } } });
@RequestMapping(value = "batchReaded", method = { RequestMethod.GET, RequestMethod.POST }) @ResponseBody public Map<String,Object> delSkusSubmit(HttpServletRequest request, ModelMap context,@RequestBody MPSkuPriceAndWarn[] warnList) { Map<String,Object> mapData = new HashMap<String,Object>(); ………….. return mapData; }
密码隐藏处理
<td style="width: 200px"> <div style="clear:both"> <div style="display:inline-block">****</div><button class="btn querySalt" style="float:right;" type="button" itemid="$!item.salt">查看</button></div> </td> <td style="width: 350px"> <div style="clear:both"> <div style="display:inline-block">****</div><button class="btn secretKey" style="float:right;" type="button" itemid="$!item.secretKey">查看</button></div></td>
var a = true; var b = true; j('.querySalt').click(function() { debugger; var contractNumber = j(this).attr('itemid'); var xx = "****"; if(a){ a = false; j(this).prev().html(xx); }else{ a = true; j(this).prev().html(contractNumber); } }); j('.secretKey').click(function() { debugger; var contractNumber = j(this).attr('itemid'); var xx = "****"; if(b){ b = false; j(this).prev().html(xx); }else{ b = true; j(this).prev().html(contractNumber); } });
筛选“列”,展示查询(额外overflow-y:scroll是纵轴滚动条)
<tr> <td><span>选择列:</span></td> <td colspan="3" > <div style="border: 1px solid #ddd;width: 1000px;overflow-y:scroll;height: 100px;"> <table> <tr> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="1" checked >一级品类</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="2" checked >二级品类</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="3" checked >三级品类</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="4" >一级部门</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="5" >二级部门</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="6" >三级部门</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="7" >采销erp</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="8" checked >品牌</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="9" >市场价</label></td> </tr> <tr> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="10" >仓报价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="11" >进货价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="12" checked >后台京东价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="13" checked >京东红字价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="14" checked >大客实时价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="20" checked >大客实时价毛利率</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="15" checked >协议价</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="21" checked >协议价毛利率</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="16" checked >vip价区间</label></td> </tr> <tr> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="22" checked >vip价毛利率</label></td> <td><label style="display: inline"><input type="checkbox" name="tag" itemid="18" checked >极光价</label></td> <td colspan="7"><label style="display: inline"><input type="checkbox" name="tag" itemid="19" checked >商城平均价</label></td> </tr> </table> </div> </td> </tr>
function queryList() { window.location.reload(); } function queryDataList(pageNo) { if (!pageNo) { pageNo = 1; } var first = $("#category0").children('option:selected').val(); var second = $("#category1").children('option:selected').val(); var third = $("#category2").children('option:selected').val(); var brandId = $("#brandInput1").val(); var timeStart = $("#timeStart").val(); var skuId = $("#skuIds").val(); var tags = ""; $('input[name="tag"]').each(function(){ if($(this).is(':checked')){ tags = tags + $(this).attr("itemid")+","; } }); if(tags!=""&&tags.length>0){ tags = tags.substr(0,tags.length-1); } if(!checkParam(skuId)){ alert("商品SKU格式不对!"); return; } var page = pageNo; var url = '/price/monitor/list'; var param = { cateCd1:first, cateCd2:second, cateCd3:third, brandId:brandId, updateEndTime:timeStart, page : page, skuId:skuId, tags:tags }; var pageSize = jQuery("#JPageSize_queryDataList").val(); if (pageSize && !isNaN(pageSize)) { param['pageSize'] = pageSize; } gUtils.fGetHtml(url, 'dl', param, '数据加载中...'); } queryDataList();
@RequestMapping(value = "list", method = { RequestMethod.GET, RequestMethod.POST }) public String list(HttpServletRequest request, ModelMap context) { PageQuery pageQuery = new PageQuery(request, 20); try{ pageQuery.addQueryParam("pageNo", pageQuery.getParams().get("page")); pageQuery.addQueryParam("pageSize", org.apache.commons.lang3.StringUtils.isBlank(request.getParameter("pageSize"))?20:Integer.valueOf(request.getParameter("pageSize"))); pageQuery.setCurrentPageNo(Integer.valueOf(request.getParameter("page"))); pageQuery.setPageSize(org.apache.commons.lang3.StringUtils.isBlank(request.getParameter("pageSize"))?20:Integer.valueOf(request.getParameter("pageSize"))); logger.info("mpSkuPriceService.getPriceMonitorListByPage "+ JSON.toJSONString(pageQuery)); CommonResult<List<PriceMonitorVo>> result = mpSkuPriceService.getPriceMonitorListByPage(pageQuery); result.addModel("tags",request.getParameter("tags"));//作为manager页到list页的列索引传输 if(StringUtils.isEmpty(request.getParameter("tags"))){//默认没有数据时候显示的列索引 result.addModel("tags","1,2,3,8,12,13,14,20,15,21,16,22,18,19"); } this.toVm(result, context); }catch (Exception e){ logger.error("PriceMonitorManagerController list",e); } return "/monitor/list"; }
<input id="tags" type="hidden" value="$!tags">
<script language="javascript"> $(function (){ var tags = $("#tags").val(); var allArr=["1","2","3","4","5","6", "7","8","9","10","11","12", "13","14","15","16","18","19","20","21","22"];//总的所有索引 var arr = tags.split(','); if(arr.length>0){ for (var j=0;j<allArr.length;j++){ for (var i=0;i<arr.length;i++){ if(allArr[j]==arr[i]){ var column = arr[i]+""; $("."+column).show(); } } } } if(allArr.length>0){ var minArr = minus(arr,allArr); if(minArr.length>0){ for (var i=0;i<minArr.length;i++){ var column = minArr[i]+""; $("."+column).hide(); } } } }); //2个集合的差集 在arr不存在 function minus(arr,arrNew) { var result = new Array(); var obj = {}; for (var i = 0; i < arr.length; i++) { obj[arr[i]] = 1; } for (var j = 0; j < arrNew.length; j++) { if (!obj[arrNew[j]]) { obj[arrNew[j]] = 1; result.push(arrNew[j]); } } return result; }; </script>
下拉框选择
var applyOrderStatus=$("#applyOrderStatus").children('option:selected').val();
导出列表
<a class="btn btn-primary" id="exportList" href="" target="iframeContent"><i class="fa fa-list" aria-hidden="true"></i>导出列表</a>
<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
$("iframe[name=iframeContent]").on("load", function() {
var responseText = $("iframe")[0].contentDocument.body.innerHTML;
debugger;
var json = JSON.parse(responseText);
if(json.length>0){
if(json["success"]){
}else{
if(json["msg"]==""){
alert("导出列表失败!");
}else{
alert(json["msg"]);
}
}
}
});
void function(j) {
j('#exportList').click(function() {
var first = $("#category0").children('option:selected').val();
var second = $("#category1").children('option:selected').val();
var third = $("#category2").children('option:selected').val();
var brandId = $("#brandInput1").val();
var updateEndTime = $("#timeStart").val();
var skuIds = $("#skuIds").val();
$("#exportList").attr("href","/price/monitor/exportList?skuIds="+skuIds+
"&cateCd1="+first+
"&cateCd2="+second+
"&cateCd3="+third+
"&brandId="+brandId+
"&updateEndTime="+updateEndTime);
});
}(jQuery);
controller用Map<String,object>返回
页面多个tab
<ul id="myTab1" class="nav nav-tabs" style="height: 50px;">
<li class="active"><a href="#base" data-toggle="tab">基本信息</a></li>
<li><a href="#productImage" data-toggle="tab" οnclick="queryImageList()">商品图片</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="base"></div>
<div class="tab-pane fade" id="special"></div>
</div>