1.状态功能
<div class="form-group">
<label for="" class="col-md-3 control-label" style="text-align: right; width: 35%; margin-left: 15px;"> 状态分类</label>
<div class="col-md-6">
<select class="form-control" id="selectStatus" name="selectStatus" style="width: 150px;">
<option value="" id="selected" selected="selected">
全部
</option>
<option value="0" <c:if test="${selectStatus eq '0'}">selected = "selected"</c:if>>
预告
</option>
<option value="1" <c:if test="${selectStatus eq '1'}">selected = "selected"</c:if>>
直播中
</option>
<option value="2" <c:if test="${selectStatus eq '2'}">selected = "selected"</c:if>>
直播结束
</option>
</select>
</div>
</div>
2.序号
<th style="width: 5%;text-align:center;">
<label>序号</label>
</th>
<td align="center">${NO.index+1 }</td>
3.显示
<td align="center">
<c:if test="${values.showStatus eq '1'}"> 显示</c:if>
<c:if test="${values.showStatus eq '0'}"> 隐藏</c:if>
</td>
4.时间显示
一.单纯的格式化显示
<td align="center">
<fmt:formatDate value="${values.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
二.时间的判断显示
a.yyyy-MM-dd HH:mm:ss
<td align="center">
<fmt:formatDate var="start" value="${values.liveStartTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
<fmt:formatDate var="end" value="${values.liveCloseTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss " var="now"/>
<c:if test="${now le start}">预告中</c:if>
<c:if test="${now ge start && now le end}">直播中</c:if>
<c:if test="${now ge end}">直播结束</c:if>
</td>
b.yyyy-MM-dd HH
时间段的查询
<!-- 追加注册时间查询 -->
<div class="form-group" style="margin-left: -15px;margin-top: 10px">
<label for="" class="col-md-3 control-label"style="margin-left: 32px;">
操作时间
</label>
<div class="col-md-6" style="margin-top: -38px;margin-left: 80px;width: 360px;">
<input type="text" id="startTime" name="startTime" class="form-control Wdate"
value="${query.startTime }" style="width: 150px;height: 30px;cursor: hand;"
onClick="WdatePicker()" autocomplete="off">
<span>至</span>
<input type="text" id="endTime" name="endTime" class="form-control Wdate"
value="${query.endTime}" style="width: 150px;height: 30px;cursor: hand;"
onClick="WdatePicker()" autocomplete="off">
</div>
</div>
<button type="submit" class="btn btn-primary">查询</button>
c.附加-String转Date出现的报错解决
//解决保存时String转Date出现的报错
@InitBinder
public void initBinder(WebDataBinder binder) {
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
dateFormat.setLenient(false);
binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
}
三.时间的输入
<tr>
<td align="right"><label for="" class=" control-label"><fontcolor="red">*</font>直播开始时间: </label>
</td>
<td colspan="2">
<input type="text" id="liveStartTime" name="liveStartTime" class="form-control Wdate"
style="width: 200px;height: 30px;cursor: hand;" value="<fmt:formatDate value="${values.liveStartTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
onClick="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss'})" autocomplete="off">
</td>
</tr>
5.返回上一级
<input class="btn btn-primary f1 mr10" type="button" value=返回 onclick="window.history.back()">
6.图
url路径
//操作完成后的信息提示
$(document).ready(
function() {
if ('${msg}' != '') {
cpp_alert_pop_reload('${msg}');
}
//初始化图片组件
initUploadOneImg("${ctx}/file/upload","${webPath}");
});
1.图的显示
<tr>
<th style="text-align: right;width: 150px; ">封面图:</th>
<td>
<!-- 浏览图片 -->
<input type="file" class="img-file inputxt input-txt" style="display: none"/>
<!-- 图片参数 -->
<input type="hidden" class="img-val" name="liveImg" id="liveImg" value="${values.liveImg}"/>
<!-- 图片回显 -->
<div class="img-show img-show_logo avatars" data-img="${values.liveImg}">
<img class="img-show_logo" src="" style="display: none;"/>
</div>
</td>
</tr>
2.图的上传
<tr>
<th style="text-align: right;width: 150px; ">封面图:</th>
<td>
<!-- 浏览图片 -->
<input type="file" class="img-file inputxt input-txt" style="display: none"/>
<!-- 图片参数 -->
<input type="hidden" class="img-val" name="liveImg" id="liveImg"/>
<!-- 图片回显 -->
<div class="img-show img-show_logo avatars">
<img class="img-show_logo" src="" style="display: none;"/>
</div>
</td>
</tr>
7.按钮 || 链接 || 提交
// 保存
function update() {
var msgInfo = "请先修正以下信息后再操作:<br/>";
var bo = true;
var liveTitle = $("#liveTitle").val();
var liveStartTime = $("#liveStartTime").val();
var liveCloseTime = $("#liveCloseTime").val();
var sort = $("#sort").val();
//ar oldName = '<%--${categoryBrandDto.name --%>}';
if(liveTitle == ""){
msgInfo += "直播名称不能为空!<br/>";
bo= false;
}
if(bo && liveStartTime == ""){
msgInfo += "直播开始时间不能为空!<br/>";
bo= false;
}
if(bo && liveCloseTime == ""){
msgInfo += "直播结束不能为空!<br/>";
bo= false;
}
if(bo && sort == ""){
msgInfo += "直播排序不能为空!<br/>";
bo= false;
}
if(bo){
// 提交保存信息
$("#mgFrm")[0].submit();
}else{
$.dialog.alert(msgInfo);
}
}
8.子窗口获取数据填入
父窗口-方法一
调用不起函数——使用
<script>
function selectGoods(c){
var api = frameElement.api, W = api;
$.dialog( {
title : '选择上架商品',
focus : false,
content : 'url:${ctx}/specialLiveInfo/goodsList',
width : '900px',
height : '600px',
left :'60%',
top: '54%',
close : function() {
// 调用子窗口方法,得到选择中菜单项值,将值传给页面函数进行显示处理
var sel_value = this.content.selValue();
if(sel_value != null){
if (c==1){
fn1(sel_value);
}
if (c==2){
fn2(sel_value);
}
if (c==3){
fn3(sel_value);
}
if (c==4){
fn4(sel_value);
}
}
},
parent:api
});
}
// 根据返回的选定内容,进行页面处理(说明:参数名必须为sel_value)
function fn1(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId1").val(goodsId);
/*$("#goodsName1").val(goodsName);
$("#totalGoodsStock1").val(totalGoodsStock);
$("#marketPrice1").val(marketPrice);
$("#shopName1").val(shopName);*/
}
}
}
// 根据返回的选定内容,进行页面处理(说明:参数名必须为sel_value)
function fn2(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId2").val(goodsId);
}
}
}
function fn3(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId3").val(goodsId);
}
}
}
function fn4(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId4").val(goodsId);
}
}
}
</script>
父窗口方法二
<script>
//类型
function selectGoods(c){
var url = "${ctx}/specialLiveInfo/goodsList";
if(c==1){
cpp_dialog_pop_fn("选择商品","1250px","640px",url,fn1,"50%","39%");
}else{
cpp_dialog_pop_fn("选择商品","1250px","640px",url,fn2,"50%","39%");
}
}
// 根据返回的选定内容,进行页面处理(说明:参数名必须为sel_value)
function fn1(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId1").val(goodsId);
$("#goodsName1").val(goodsName);
$("#totalGoodsStock1").val(totalGoodsStock);
$("#marketPrice1").val(marketPrice);
$("#shopName1").val(shopName);
}
}
}
// 根据返回的选定内容,进行页面处理(说明:参数名必须为sel_value)
function fn2(sel_value){
// 将选择的值赋值给父窗口(本页面)的文本框
if(typeof(sel_value) != "undefined"){
var sels = sel_value.split("@@");
var goodsId = sels[0];
var marketPrice = sels[1];
var totalGoodsStock = sels[2];
var goodsName = sels[3];
var shopName = sels[4];
if(sels[0] !=""){
$("#goodsId2").val(goodsId);
$("#goodsName2").val(goodsName);
$("#totalGoodsStock2").val(totalGoodsStock);
$("#marketPrice2").val(marketPrice);
$("#shopName2").val(shopName);
}
}
}
</script>
<script type="text/javascript">
// 获取选择菜单的值,并传递给主窗口
function xuanze(obj,obj1,obj2,obj3,obj4){
$("#selValue").val(obj+"@@"+obj1+"@@"+obj2+"@@"+obj3+"@@"+obj4);
// 关闭窗口
cpp_close();
}
// 获取选中的海关编码(说明:获取选择的内容方法名必须为selValue(),否则报错。)
function selValue(){
var hs_code = $("#selValue").val();
return hs_code;
}
</script>
9.分页
</form>
<!-- 分页 -->
<div class="pages">
<%@ include file="/common/page.jsp"%>
</div>
<!-- 分页 -->
</body>
10.推荐首页
滑动按钮显示
<script src="${ctx}/static/js/js.js"></script>
<script src="${ctx}/static/js/lc_switch.js" type="text/javascript"></script>
<link rel="stylesheet" href="${ctx}/static/style/lc_switch.css">
<td align="center">
<c:if test="${values.isIndexReco == '0'}">
<input id="isIndexReco${values.id}" name="isIndexReco${values.id}" type="checkbox" value="${values.id}" class="isIndexReco_check" autocomplete="off"/>
</c:if>
<c:if test="${values.isIndexReco == '1'}">
<input id="isIndexReco${values.id}" name="isIndexReco${values.id}" type="checkbox" value="${values.id}" class="isIndexReco_check" checked="checked" autocomplete="off"/>
</c:if>
</td>
js
//推荐首页
$('.isIndexReco_check').lc_switch();
$('body').delegate('.isIndexReco_check', 'lcs-statuschange', function () {
var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
console.log('field changed status: ' + status);
});
//推荐
$('body').delegate('.isIndexReco_check', 'lcs-on', function () {
var id=$(this).val();
$.ajax({
type:"get",
url:"${ctx }/specialLiveInfo/recommended",
data:{id:id,isIndexReco:"1"},
async:false,
success:function(data){
},
error:function(){
cpp_alert("请求超时")
}
});
});
//取消推荐
$('body').delegate('.isIndexReco_check', 'lcs-off', function () {
var id=$(this).val();
$.ajax({
type:"get",
url:"${ctx }/specialLiveInfo/recommended",
data:{id:id,isIndexReco:"0"},
async:false,
success:function(data){
},
error:function(){
cpp_alert("请求超时")
}
});
});
java
/**
* 推荐首页
*/
@GetMapping("/recommended")
public String recommended (SpecialLiveinfoQueryDto specialLiveInfoDto){
SpecialLiveinfoDto infoDto = specialLiveinfoService.findById(specialLiveInfoDto);
Subject currentUser = SecurityUtils.getSubject();
Object principal = currentUser.getPrincipal();
AdminUserDto adminUser= (AdminUserDto) principal;
infoDto.setUpdateTime(new Date());
infoDto.setUpdateUser(adminUser.getUserName());
infoDto.setIsIndexReco(specialLiveInfoDto.getIsIndexReco());
specialLiveinfoService.update(infoDto);
return Result.success().getMsg();
}
11.清空
/*
* 清除
*/
function cle(){
$("#goodsName").val("");
$("#id").val("");
}
12.ajax回传接受
案例一
// 保存
function update(){
var msgInfo = "请先修正以下信息后再操作:<br/>";
var bo = false;
var catName = $("#catName").val();
var parentCode = $("#parentCode").val();
var remarks = $("#remarks").val();
if(catName == ""){
msgInfo += "类目名称不能为空!<br/>";
bo = true;
}
if(parentCode == ""){
msgInfo += "父级类目不能为空!<br/>";
bo = true;
}
if(remarks != ""){
if(remarks.length >95){
msgInfo += "类目描述不能超过95个字!<br/>";
bo = true;
}
}
if(bo){
// 调用提示框
cpp_alert(msgInfo);
return ;
}else{
$("#mgFrm")[0].submit();
}
if(oldCatName != catName){
// 检查类别名称是否存在
$.ajax({
type:"post",
url:"${ctx}/category/valideteCategoryName",
data:{catName:catName},
async:false,
success:function(data){
if(data == "yes"){
cpp_alert("类目名称已经存在!");
}else {
// 提交保存信息
$("#mgFrm")[0].submit();
}
}
});
}else{
$("#mgFrm")[0].submit();
}
}
/**
* 推荐首页
*/
@GetMapping("/recommended")
public String recommended (SpecialLiveinfoQueryDto specialLiveInfoDto){
SpecialLiveinfoDto infoDto = specialLiveinfoService.findById(specialLiveInfoDto);
Subject currentUser = SecurityUtils.getSubject();
Object principal = currentUser.getPrincipal();
AdminUserDto adminUser= (AdminUserDto) principal;
infoDto.setUpdateTime(new Date());
infoDto.setUpdateUser(adminUser.getUserName());
infoDto.setIsIndexReco(specialLiveInfoDto.getIsIndexReco());
specialLiveinfoService.update(infoDto);
return Result.success().getMsg();
}
案例二
/**
* @Author: WangChuanXuan
* @Description: 删除品类
* @Date: 17:00 2020/6/18
**/
@PostMapping(value="deleteCategory")
public void deleteCategory(SpecialLiveTypeDto specialLiveTypeDto, HttpServletRequest request, HttpServletResponse response) throws IOException {
try{
Result result = specialLiveTypeService.deleteCategory(specialLiveTypeDto);
if(result.getCode() == 0){
response.getOutputStream().print("yes");
response.getOutputStream().close();
}else{
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(result.getData().toString());
response.getWriter().close();
}
}catch (Exception e){
response.getOutputStream().print("no");
response.getOutputStream().close();
log.error(e.getMessage());
}
}
//删除类目
function dele() {
var url = "${ctx}/specialLive/deleteCategory";
cpp_confirm_two("确定将该类目删除?","mgFrm",url);
}
function cpp_confirm_two(conent, frmId, url) {
$.dialog.confirm(conent, function() {
// from方式提交
$("#" + frmId).attr("action", url);
$("#" + frmId).ajaxSubmit(function (data) {
if(data == "yes"){
cpp_alert_reload("删除成功!");
}else if(data == "no"){
cpp_alert_reload("删除失败!");
}else{
cpp_alert(data);
}
});
}, function() {
// ...不做处理
});
}
案例三
/**
* 推荐首页
*/
@GetMapping("/recommended")
public String recommended (SpecialLiveinfoQueryDto specialLiveInfoDto){
SpecialLiveinfoDto infoDto = specialLiveinfoService.findById(specialLiveInfoDto);
Subject currentUser = SecurityUtils.getSubject();
Object principal = currentUser.getPrincipal();
AdminUserDto adminUser= (AdminUserDto) principal;
infoDto.setUpdateTime(new Date());
infoDto.setUpdateUser(adminUser.getUserName());
infoDto.setIsIndexReco(specialLiveInfoDto.getIsIndexReco());
specialLiveinfoService.update(infoDto);
return Result.success().getMsg();
}
//取消推荐
$('body').delegate('.isIndexReco_check', 'lcs-off', function () {
var id=$(this).val();
$.ajax({
type:"get",
url:"${ctx }/specialLiveInfo/recommended",
data:{id:id,isIndexReco:"0"},
async:false,
success:function(data){
},
error:function(){
cpp_alert("请求超时")
}
});
});
13复选框
案例一:删除
<th style="width: 5%;text-align:center;">
<label><input type="checkbox" name="checka" id="checka" onclick="checkAll(this.checked)" style="margin:-2px 5px 0 0;vertical-align:middle;" /></label>
</th>
<c:if test="${!empty pager.list}">
<c:forEach items="${pager.list }" var="values" varStatus="NO">
<tr>
<td style="width: 5%" align="center"><input type="checkbox" name="checkId" id="checkId" value="${values.id}"/></td>
Controller层次:
//删除功能
@PostMapping("/delete")
public ModelAndView delete(HttpServletRequest request) throws Exception {
String liveTitle = request.getParameter("liveTitle");
String[] ids = request.getParameterValues("checkId");
specialLiveinfoService.delete(ids);
return new ModelAndView("redirect:liveInfoList?liveTitle="+ URLEncoder.encode(liveTitle,"UTF-8"));
}
重定向
return new ModelAndView("redirect:liveInfoList");
ServiceImpl层
@Override
public void delete(String[] ids) {
SpecialLiveinfoDeleteDto param = new SpecialLiveinfoDeleteDto();
List<Integer> list = new ArrayList<>();
for (String id : ids) {
Integer liveInfoId = Integer.parseInt(id);
list.add(liveInfoId);
}
param.setIds(list);
param.setIsDel("1");
specialLiveInfoDao.delete(param)
}
<!--更新刪除-->
<update id="delete" parameterType="com.greenchoice.search.api.dto.SpecialLiveinfoDeleteDto" >
update t_special_live_info
<if test="isDel!= null">
set is_del = #{isDel}
</if>
where id in
<foreach collection="ids" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</update>