前端js代码实例

最新推荐文章于 2023-04-04 21:46:32 发布
转载 最新推荐文章于 2023-04-04 21:46:32 发布 · 986 阅读 · 1

本文介绍了一种基于Java的三级联动下拉菜单实现方法，并详细解释了如何通过前端JavaScript进行动态数据请求及页面元素更新。此外，还展示了如何实现表格列的自定义显示与隐藏功能，以及导出列表的操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

三级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" onclick="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>

ResponsiveVoice.js:让你的网页能说话
a181001_的博客
05-18 1036
ResponsiveVoice.js 是一个轻量级的 JavaScript 库，支持多种语言的语音合成功能。它允许开发者通过简单的 API 调用将文本转换为语音，并提供了丰富的配置选项，如语音类型、语速、音调等。支持多种语言和语音（英语、法语、西班牙语、德语等）简单易用的 API无需服务器端处理支持回调函数跨浏览器兼容。
js前端完整项目源码开放
08-09
前端代码，适合学习前端技术初学者，也希望各位前辈能指点江山。
前端必备JS开发16个经典实例
04-12
前端必备JS开发16个经典实例 ,资源为教学视频，格式为MPG4.
6种常见的地标识别算法整理和总结
华为云官方博客
04-19 2761
摘要：地标识别，基于深度学习及大规模图像训练，支持上千种物体识别及场景识别，广泛应用于拍照识图、幼教科普、图片分类等场景。本文将为大家带来6种关于地标识的算法整理和总结。
JS代码案例
FairyKunKun的博客
06-29 359
1. 初始化复选框function () { //初始化一个数组用来存储后续所选择的表中的一行的信息 if ( !FR.checkBoxes ) { FR.checkBoxes = new Array (); } var length = FR.checkBoxes.length; FR.checkBoxes[len] = this;}2. 填报页面添加function () { //添加初始化后所产生的数组添加勾选上的数据 var joi
好程序员web前端分享js实现实战案例
weixin_33757911的博客
04-12 553
好程序员web前端分享js实现实战案例，实际开发中有要求用户一些行为每天一次，次日开始重新回复功能，一般前端都是通过cookie来记住用户的操作，然后进行判断当日是否还有机会，这时候需要给存储的cookie值一个有效期，让次日自动失效，重新计数，代码如下： cookie = {/** 获取cookie*/get: function (name) {var cookieName = encodeU...
Android的WebView与H5前端JS代码交互的实例代码
08-29
Android WebView 与 H5 前端 JS 代码交互是移动应用开发中的一项重要技术，本篇文章将介绍 Android 的 WebView 与 H5 前端 JS 代码交互的实例代码，解决了 Android 应用程序中 WebView 与 H5 前端 JS 代码之间的交互...
前端实例代码
10-10
测试使用，完整的前端标签与js脚本，下载双击即可执行
前端GoJs使用实例代码分享
01-30
参考引入版本GoJS v2.2.22 （go.js文件没上传过来，引入2.x的就可以）
原生js基于canvas实现一个简单的前端截图工具代码实例
10-16
本文介绍了一个使用原生JavaScript和HTML5 canvas元素实现的简单前端截图工具的代码实例。这个工具能够让用户在浏览器端截取网页的一部分区域，并以图像形式显示出来。以下是该工具实现的关键技术点： 1. HTML结构...
javascript 案例
m0_67195464的博客
04-06 1099
目录案例一：展示文字案例二：图片转换案例三：随机数 案例一：展示文字 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>展示文字</title> </head> <body onload="fa()"> <div id="da"> </div> </body> <script
前端项目实例整理
10-27
前端项目代码实例，都是常用的代码效果集合，绝对让你很方便的搭建前端效果。
JS入门代码实例
07-20
JS入门代码实例 包含选项卡、字符串连接、阻止冒泡、DOM节点...
js案例代码
12-10
js写的一些案例
JavaScript前端开发案例教程-源代码.rar
07-02
JavaScript前端开发案例教程，包含本书中所有实例源代码
非常漂亮的100个前端案例
06-04
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到。
js实例练习代码
BasePerson的博客
11-25 563
JaveScript 案例 输入三个值比大小 var a=prompt('请输入数值：') var b=prompt("请输入数值：") var c=prompt('请输入数值：') function maxMin(max,min,mid){ if(max>min&&max>mid){ alert(max+'大') ...
js与html常用操作,前端常用的JavaScript操作（代码实例）
weixin_32586767的博客
06-16 164
本篇文章给大家带来的内容是关于前端常用的JavaScript操作(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.删除字符串中指定的一段字符例：删除"10km"中的kmvar str = "10km"//方法一：var res = str.replace('km', '')//方法二：var res = str.split('km').join('')//join方法...
前端学习当中的一些js案例
weixin_46247854的博客
04-04 425
js的小案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值