jsp随笔-工作使用-直播功能

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>&nbsp;&nbsp;

 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>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值