前端js代码实例

 

三级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>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用ResponsiveVoice.JS将网站中的选定文本转换为语音 ###总结 用于浏览器的文本到语音扩展,感谢ResponsiveVoice.js的API。 该功能很简单。 当你选择一个文本,文本说话。 TTS(文本到语音)功能来自ResponsiveVoiceJS。 所以如果你觉得这个扩展是有用的,请感谢原始API提供者http://responsivevoice.org 要打开/关闭此扩展程序,请点击浏览器工具栏按钮上的扬声器按钮。 默认情况下,这个扩展是被禁用的。所以请点击浏览器工具栏上的扬声器图标 ### 供电 - ResponsiveVoiceJS语音数据[http://responsivevoice.org/] - guessLanguage.js用于检测所选文本的语言[https://github.com/richtr/guessLanguage.js] ### 注意 请注意,有一些语言与多个相关的声音,如英语。 您可以配置哪些语音与这些文本首选。 对于英语:   - 英国女英文(默认)   - 英国英语男性   - 美国英语女性   - 澳大利亚女性 葡萄牙语:   - 巴西葡萄牙女性   - 葡萄牙女性(默认) 西班牙语:   - 西班牙女性(默认)   - 西班牙拉丁美洲女性 对于塞尔维亚 - 克罗地亚语:   - 黑山男性   - Serbo-Croatian男(默认)   - 波斯尼亚男 对于罗马尼亚语:   - 摩尔多瓦男性   - 罗马尼亚男(默认) 另外,自动文本语言检测不能识别用“Hatian Creole”写的文本。 因此,如果您想听到Hatian Creole的声音,请禁用“自动检测语言”选项并手动设置语言。 ###支持的声音 最初的ResponsiveVoiceJS API支持:   - 南非荷兰语男性   - 阿尔巴尼亚男   - 阿拉伯男性   - 亚美尼亚男性   - 澳大利亚女性   - 波斯尼亚男   - 巴西葡萄牙女性   - 加泰罗尼亚语男性   - 中国女性   - 克罗地亚男性   - 捷克女性   - 丹麦女性   - Deutsch女性   - 荷兰女性   - 世界语男性   - 芬兰女性   - 法国女性   - 希腊女性   - Hatian克里奥尔人女性   - 印地文女性   - 匈牙利女性   - 冰岛男性   - 印度尼西亚女性   - 意大利女性   - 日本女性   - 韩国女性   - 拉丁女性   - 拉脱维亚男性   - 马其顿男   - 摩尔多瓦男性   - 黑山男性   - 挪威女性   - 波兰女性   - 葡萄牙女性   - 罗马尼亚男性   - 俄罗斯女性   - 塞尔维亚男性   - 塞尔维亚克罗地亚男性   - 斯洛伐克女性   - 西班牙女性   - 西班牙拉丁美洲女性   - 斯瓦希里语男性   - 瑞典女性   - 坦米尔男   - 泰国女性   - 土耳其女性   - 英国女英文   - 英国英语男性   - 美国英语女声(默认语音)   - 越南男性   - 威尔士男性 支持语言:English,日本語
微信小程序商铺前端关键的js代码示例如下: 1. 获取商铺信息: ```javascript // 获取商铺信息 wx.request({ url: 'https://api.example.com/shop', method: 'GET', success: function(res) { // 将商铺信息存储在data中 that.setData({ shopInfo: res.data }); } }); ``` 2. 获取商品列表: ```javascript // 获取商品列表 wx.request({ url: 'https://api.example.com/products', method: 'GET', success: function(res) { // 将商品列表存储在data中 that.setData({ productList: res.data }); } }); ``` 3. 加入购物车: ```javascript // 加入购物车 addToCart: function(event) { var productId = event.currentTarget.dataset.id; // 发起加入购物车请求 wx.request({ url: 'https://api.example.com/add-to-cart', method: 'POST', data: { productId: productId }, success: function(res) { // 加入购物车成功,弹出提示 wx.showToast({ title: '成功加入购物车', icon: 'success', duration: 2000 }); } }); } ``` 4. 支付订单: ```javascript // 支付订单 payOrder: function(orderId) { // 发起支付请求 wx.request({ url: 'https://api.example.com/pay', method: 'POST', data: { orderId: orderId }, success: function(res) { // 支付成功,跳转到支付成功页面 wx.navigateTo({ url: '/pages/pay-success/pay-success' }); } }); } ``` 以上是微信小程序商铺前端关键的js代码示例,包括获取商铺信息、获取商品列表、加入购物车和支付订单等功能的实现。这些代码能够帮助前端开发者快速开发出商铺小程序的基本功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值