js商品筛选功能

最新推荐文章于 2021-03-10 00:44:01 发布
最新推荐文章于 2021-03-10 00:44:01 发布
阅读量471 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/100309001
版权 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.util.StringUtil" %>
<%@ page import="com.util.VeDate" %>
<%@page import="com.util.*"%>
<%@page import="cn.com.victorysoft.eaf.authority.exposure.AppUser"%>
<!-- 兴通费用分析，月度成本分析，按成本分 -->
<%
AppUser user = (AppUser)session.getAttribute("_userInfo");
String depid = user.getAppOrg().getOrgnaCode();
String username = UserUtil.getLoginName(request);
String ny = StringUtil.null2blank(request.getParameter("ny"));
if(ny.equals("")){
   ny =YwUtil.getMaxYdfxNy();
   if(ny.equals("")){
      ny = VeDate.getNy();
   }
}

String dwListJson = YwUtil.ajaxGetDwList(depid,username);//这个就是返回所有单位的
boolean isJyglb = false;//是否经营管理部
isJyglb = UserUtil.isRole(username, "AFAF30D396A641EBA59026D95AFF3703");
%>
<!DOCTYPE html>
<html>
<head>
<title>月度成本分析</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@include file="/common/commonJs.jsp"%>
<script type="text/javascript"
   src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
html,body {
   height: 100%;
   width: 100%;
}

.progressbar-value .progressbar-text {
   background-color: #66CC33;
   color: #000000;
}
#box dl {
   /*height: 50px;*/
   /*line-height: 50px;*/
   border-bottom: 1px dashed #dadada;
   margin: 0 20px;
   }
 #box dt {float: left;color: #8a8a8a;}

#box dd {float: left;color: #252525;margin: 0 10px;font-size: 14px;cursor: pointer;}
#box dd.active {color: #c4284d;font-weight: bold;}
#box dl.select {
   /*background: #efefef;*/
   margin: 0;padding: 0 20px;}
#box dl.select dd {border: 1px solid #c4284d;height: 25px;line-height: 25px;
   /*margin-top: 13px;*/
   padding: 0 10px 0 10px;border-radius: 3px;background-color: #fff;}
#box dl.select dd span {width: 20px;height: 20px;display: inline-block;text-align: center;line-height: 20px;background: #c4284d;color: #fff;margin-left: 10px;cursor: pointer;border-radius: 5px;}
#selectResult dd{ position: relative; top: -5px;}
</style>
</head>
<body class="easyui-layout">
      <div  id="toolbar1" >
         <input type="hidden" id="hid_year"/>
         <input type="hidden" id="hid_month"/>
         <input type="hidden" id="hid_dep"/>

         <input type="hidden" id="ny"/>
         <input type="hidden" id="dwid"/>
         <div id="box">
            <table style="width: 100%;">
               <tr>
                  <td style="width: 40%;">
                             <dl id="syear">
                                 <dt>年份：</dt>

                             </dl>
                  </td>
                  <td style="width: 60%;">

                             <dl id="smonth">
                                 <dt>月份：</dt>
                             </dl>
                  </td>
               </tr>
            </table>

                    <dl id="sdep">
                        <dt>部门：</dt>
                    </dl>
            <table style="width: 100%;">
               <tr>
                  <td style="width: 40%;">
                             <dl id="selectResult" class="select" style="border-bottom-width: 0px;">
                                 <dt>已选条件：</dt>
                             </dl>
                  </td>
                  <td style="width: 60%;">
                           <a href="javascript: queryPagination();" class="easyui-linkbutton" plain="true" iconCls="icon-search" >查询</a>
                     <%if(isJyglb){ %>
                     <a href="javascript: createData();" class="easyui-linkbutton" plain="true" iconCls="icon-reload" >数据重新生成</a>
                     <%}%>
                  </td>
               </tr>
            </table></div>
      </div>
<table id="dg" style="width:100%;height:100%"></table>
</body>
<script type="text/javascript">
   var dwid = '<%=depid%>';
   var dwListJson = <%=dwListJson%>;
   var ny = '<%=ny%>';

   $(function () {
      //加载年
      for (var i=2018;i<=new Date().getFullYear();i++){
         $("#syear").append("<dd data-from=\"hid_year\" data-val=\""+i+"\">"+i+"</dd>");
      }
      var months=["01","02","03","04","05","06","07","08","09","10","11","12"];
      //加载月
      for (var i=0;i<months.length;i++){

         $("#smonth").append("<dd data-from=\"hid_month\" data-val=\""+months[i]+"\">"+months[i]+"</dd>");
      }
      //加载部门
      for (var i=0;i<dwListJson.length;i++){
         var item=dwListJson[i];
         $("#sdep").append("<dd data-from=\"hid_dep\" data-val=\""+item.ORGNA_CODE+"\">"+item.ORGNA_NAME+"</dd>");
      }
      //注册事件
      var dls = document.querySelectorAll('dl:not(#selectResult)');
      var selected = document.querySelector('#selectResult');

      for (var i = 0; i < dls.length; i++) {
         dls[i].mark = false;
         select(i);
      }
      //选择默认-年-月-部门
      $("#syear").find("[data-val='"+new Date().getFullYear()+"']").click();
      var mt=new Date().getMonth()+1;
      $("#smonth").find("[data-val='"+(mt<10?("0"+mt):mt+"")+"']").click();
      $("#sdep").find("[data-val='"+dwid+"']").click();
      //选择默认值
      setSearchValue();
      console.log("第一次加载的数据："+$('#ny').val());
      console.log("第一次加载的数据："+dwid);
      //加载数据
      $("#dg").datagrid({
         queryParams:{
            ny:$('#ny').val(),
            dwid:dwid
         },
         url:"<%=basePath%>bbxmxx_ajaxQueryYdfxByParam.action",
         loadMsg:"数据加载中，请稍后.....",
         pagination:true,//显示分页
         striped:true,//隔行换色
         fit:true,//自动补全
         pageSize:300,
         fitColumns:false,
         title:"月度成本分析",
         singleSelect:true,
         rownumbers:true,
         toolbar:"#toolbar1",
         columns:[[
            {field:'SSBM',title:'ssbm',width:250,align:'left',halign:'center',hidden:true},
            {field:'BMZ',title:'bmz',width:250,align:'left',halign:'center',hidden:true},
            {field:'ZBID',title:'指标名称',width:250,align:'left',halign:'center',hidden:true},
            {field:'ZBMC',title:'指标名称',width:250,align:'left',halign:'center'},
            {field:'CURBENY',title:'本月(万元)',width:100,align:'right',halign:'center',
               formatter:function(value,row,index){
                  if(value ==null){
                     value = '';
                  }

                  // 20190612 新模式
                  if(row.ZBID    =='YDFX0010'){//如果是产值收入

                     return "<a href='javascript:void(0);' οnclick=\"showCz('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";

                  }else if(row.ZBID=='YDFX0120'){//如果是产品运费
                     return "<a href='javascript:void(0);' οnclick=\"showCpyf('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0030'){//如果是材料费
                     return "<a href='javascript:void(0);' οnclick=\"showClf('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0040'||row.ZBID=='YDFX0050'||row.ZBID=='YDFX0020'||row.ZBID=='YDFX0240'||row.ZBID=='YDFX0120'||row.ZBID=='YDFX0100'){
                     return value;
                  }else if(row.ZBID=='YDFX0060'){//2019-08-27  取消固定和后勤
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','0');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0070'){//如果是固定工资
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','1');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0080'){//如果是后勤人员工资
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','2');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0250'){//产品出库
                     return "<a href='javascript:void(0);' οnclick=\"showCpck('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0260'){//项目结算
                     return "<a href='javascript:void(0);' οnclick=\"showXmjs('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID =="YDFX0280"){
                     if(parseFloat(value)<0){
                        return "0";
                     }else{
                        return value;
                     }

                  }else{
                     return "<a href='javascript:void(0);' οnclick=\"showOther('"+$('#ny').val()+"','"+dwid+"','"+row.SSBM+"','"+row.ZBMC+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }

                  /*

                        //旧模式
                        else if(row.ZBID   =='FX0010'){//如果是产值收入

                            return "<a href='javascript:void(0);' οnclick=\"showCz('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                       }else if(row.ZBID =='FX0102'){//如果是计件工资

                             return "<a href='javascript:void(0);' οnclick=\"showJjgz('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }else if(row.ZBID=='FX0451'){//如果是产品运费

                           return "<a href='javascript:void(0);' οnclick=\"showCpyf('"+$('#ny').val()+"','"+dwid+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }else if(row.ZBID=='FX0150'){//如果是材料费

                           return "<a href='javascript:void(0);' οnclick=\"showClf('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }else if(row.ZBID=='FX0200'||row.ZBID=='FX0250'){
                            return value;
                        }else if(row.ZBID=='FX0103'){//如果是固定工资

                          return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','1');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }else if(row.ZBID=='FX0101'){//如果是后勤人员工资

                          return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','2');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }else{
                          return "<a href='javascript:void(0);' οnclick=\"showOther('"+$('#ny').val()+"','"+dwid+"','"+row.SSBM+"','"+row.ZBMC+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                        }*/

               }},
            {field:'PREBENY',title:'同期(万元)',width:100,align:'right',halign:'center'},
            {field:'BENYDB',title:'增减值(万元)',width:100,align:'right',halign:'center',formatter:BYZJZFormatter},
            {field:'CURBYCZB',title:'本月产值比(%)',width:100,align:'right',halign:'center',formatter:BYCZBFormatter},
            {field:'PREBYCJB',title:'同期产值比(%)',width:100,align:'right',halign:'center',formatter:TQCZBFormatter},
            {field:'BYCZB',title:'比例增减(%)',width:100,align:'right',halign:'center',formatter:YBLZJFormatter},
            {field:'CURBNLJ',title:'本年至今(万元)',width:100,align:'right',halign:'center',formatter:function(value,row,index){
                  if(value ==null){
                     value = '';
                  }else if(row.ZBID =='YDFX0010'){
                     return "<a href='javascript:void(0);' οnclick=\"showCz('"+$('#ny').val()+"','"+dwid+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0120'){//如果是产品运费
                     return "<a href='javascript:void(0);' οnclick=\"showCpyf('"+$('#ny').val()+"','"+dwid+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0030'){//如果是材料费
                     return "<a href='javascript:void(0);' οnclick=\"showClf('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0040'||row.ZBID=='YDFX0050'||row.ZBID=='YDFX0020'||row.ZBID=='YDFX0240'||row.ZBID=='YDFX0280'||row.ZBID=='YDFX0120'||row.ZBID=='YDFX0100'){
                     return value;
                  }else if(row.ZBID=='YDFX0060'){// 2019-08-27 取消固定工资和后勤人员工资
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','0','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0070'){//如果是固定工资
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','1','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0080'){//如果是后勤人员工资
                     return "<a href='javascript:void(0);' οnclick=\"showGdgz('"+$('#ny').val()+"','"+dwid+"','"+row.ZBMC+"','2','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0250'){//产品出库
                     return "<a href='javascript:void(0);' οnclick=\"showCpck('"+$('#ny').val()+"','"+dwid+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else if(row.ZBID=='YDFX0260'){//项目结算
                     return "<a href='javascript:void(0);' οnclick=\"showXmjs('"+$('#ny').val()+"','"+dwid+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }else{
                     return "<a href='javascript:void(0);' οnclick=\"showOther('"+$('#ny').val()+"','"+dwid+"','"+row.SSBM+"','"+row.ZBMC+"','curbnlj');\"  class='easyui-linkbutton' plain='true' iconCls='icon-edit' >"+value+"</a>";
                  }
               }},
            {field:'PREBNLJ',title:'去年同期(万元)',width:100,align:'right',halign:'center'},
            {field:'BNLJDB',title:'增減值(万元)',width:100,align:'right',halign:'center',formatter:NZJZFormatter},
            {field:'CURNLCZB',title:'本年产值比(%)',width:100,align:'right',halign:'center',formatter:BNCZBFormatter},
            {field:'PRENLCJB',title:'同期产值比(%)',width:100,align:'right',halign:'center',formatter:BNTQCZBFormatter},
            {field:'NLCZB',title:'比例增減(%)',width:100,align:'right',halign:'center',formatter:NBLZJFormatter}
         ]],
         rowStyler: function (index, row) {
            if (row.ZBID =='YDFX0010' || row.ZBID =='YDFX0020'||row.ZBID =='YDFX0240'||row.ZBID =='YDFX0250'||row.ZBID =='YDFX0260'||row.ZBID == 'YDFX0270'||row.ZBID =='YDFX0280' ||row.ZBID =='YDFX0290') {
               return 'background-color:orange;font-weight:bold;font-size:30px';
            }
         }
      });
      function select(n) {
         var dds = dls[n].querySelectorAll('dd');
         var prev = null;
         var dd = null;

         for (var i = 0; i < dds.length; i++) {
            dds[i].onclick = function () {
               //给当前点击的添加一个高亮
               //prev && (prev.className = '');

               if (prev) {
                  prev.className = ''
               }

               this.className = 'active';

               prev = this;


               //创建dd标签
               var parent = this.parentNode;

               if (!parent.mark) {
                  dd = document.createElement('dd');
                  dd.innerHTML = this.innerHTML;
                  dd.setAttribute("data-val", this.getAttribute("data-val"));
                  dd.setAttribute("data-from", this.getAttribute("data-from"));
                  selected.appendChild(dd);

                  parent.mark = true;

               } else {
                  dd.setAttribute("data-val", this.getAttribute("data-val"));
                  dd.setAttribute("data-from", this.getAttribute("data-from"));
                  dd.innerHTML = this.innerHTML;
               }
               setSearchValue();
               // var span = document.createElement('span');
               // var This = this;
               // span.innerHTML = 'X';
               // span.onclick = function () {
               //
               //     selected.removeChild(dd);
               //     This.className = '';
               //     parent.mark = false;
               // };
               // dd.appendChild(span);
            };
         }
      }
   });
   //取值核心，把值丢到隐藏域里面
   function setSearchValue() {

      $("#selectResult dd").each(function () {
         var dataFrom = $(this).attr("data-from");
         var dataVal = $(this).attr("data-val");
         console.log(dataFrom + ":" + dataVal);
         $("#" + dataFrom).val(dataVal)
      });
      $("#ny").val($("#hid_year").val()+""+$("#hid_month").val());
      $("#dwid").val($("#hid_dep").val());

      //queryPagination();
   }
</script>

<script type="text/javascript">




// $('#dwid').combobox({
//     data:dwListJson,
//     valueField:'ORGNA_CODE',
//     textField:'ORGNA_NAME',
//     editable:false,
//     onSelect:function(data){
//        dwid = data.ORGNA_CODE;
//     }
// });



function createData(){
   var dw = $("#dwid").val();

   if(dw ==""||dw==null){
      $.messager.alert('提示','请先选择单位','info');
      return false;
   }

   $.ajax({
       url:"<%=basePath%>bbxmxx_ajaxUpdateYdfxData.action",
       dataType:"json",
       async:true,
       data:{"dw":dw},
       type:"post",
       success:function(req){
          if(req=="1"){
             $.messager.alert('提示','数据生成成功','info');
             queryPagination();
          }else{
             $.messager.alert('提示','请重新生成数据','info');
          }
       }
   });

}


function queryPagination(){
   console.log("查询加载的数据："+$('#ny').val());
   console.log("查询加载的数据："+$("#dwid").val());
   $('#dg').datagrid('load',{
       ny:$('#ny').val(),
       dwid:$("#dwid").val()
   });
}
//打开产值明细窗口
function showCz(ny,dwid,type){
var url = '<%=basePath%>bbxmxx_goQueryYdfxczMxList.action?ny='+ny+'&dwid='+dwid+'&type='+type;
   openSelectWindow(url,'产值明细列表',900,500);
}
//打开材料费明细窗口
function showClf(ny,dwid,zbmc,type){
zbmc = zbmc.substr(zbmc.indexOf('、')+1,zbmc.length );
var url = '<%=basePath%>bbxmxx_goQueryYdfxClfMxList.action?ny='+ny+'&dwid='+dwid+'&type='+type;
   openSelectWindow(url,zbmc+'明细列表',700,650);
}
//打开产品运费明细窗口
function showCpyf(ny,dwid,type){
var url = '<%=basePath%>bbxmxx_goQueryYdcpyfMxList.action?ny='+ny+'&dwid='+dwid+'&type='+type;
   openSelectWindow(url,'运费明细列表',700,500);
}
//打开计件工资明细窗口
function showJjgz(ny,dwid){
var url = '<%=basePath%>bbxmxx_goQueryYdJjgzMxList.action?ny='+ny+'&dwid='+dwid;
   openSelectWindow(url,'计件工资明细列表',700,500);
}

//打开固定工资明细窗口
function showGdgz(ny,dwid,zbmc,lx,type){
zbmc = zbmc.substr(zbmc.indexOf('、')+1,zbmc.length );
var url = '<%=basePath%>bbxmxx_goQueryYdfxGdgzMxList.action?ny='+ny+'&dwid='+dwid+'&lx='+lx+'&type='+type;
   openSelectWindow(url,zbmc+'明细列表',900,600);
}


//打开产品出库界面
function showCpck(ny,dwid,type){
   var url = '<%=basePath%>queryinfo_goQueryPckYdfxInfo.action?ny='+ny+'&dwid='+dwid+'&type='+type;
   openSelectWindow(url,'产品出库明细列表',900,600);
}

//打开项目结算信息
function showXmjs(ny,dwid,type){
   var url = '<%=basePath%>queryinfo_goQueryXmjsxxInfo.action?ny='+ny+'&dwid='+dwid+'&type='+type;
   openSelectWindow(url,'项目结算信息明细列表',1100,600);
}

function showOther(ny,dwid,sxlb,zbmc,type){
zbmc = zbmc.substr(zbmc.indexOf('、')+1,zbmc.length );

if(type==undefined){
   type = '';
}
var url = '<%=basePath%>bbxmxx_goQueryYdOtherMxList.action?ny='+ny+'&dwid='+dwid+'&sxlb='+sxlb+'&type='+type;
   openSelectWindow(url,zbmc+'明细列表',700,500);
}
function BYZJZFormatter(value,row,index){
   if(value!=null&&value>0){
      return '<span style="color:#228B22">'+value+'</span>';
   }else if(value!=null&&value<0){
      return '<span style="color:red">'+value+'</span>';
   }
}

function NZJZFormatter(value,row,index){
   if(value!=null&&value>0){
      return '<span style="color:#228B22">'+value+'</span>';
   }else if(value!=null&&value<0){
      return '<span style="color:red">'+value+'</span>';
   }
}

function YBLZJFormatter(value,row,index){
   if(value!=null&&value>0){
      return '<span style="color:#228B22">'+value+'%'+'</span>';
   }else if(value!=null&&value<0){
      return '<span style="color:red">'+value+'%'+'</span>';
   }
}

function NBLZJFormatter(value,row,index){
   if(value!=null&&value>0){
      return '<span style="color:#228B22">'+value+'%'+'</span>';
   }else if(value!=null&&value<0){
      return '<span style="color:red">'+value+'%'+'</span>';
   }
}

function BYCZBFormatter(value,row,index){
   debugger;
   if(value!=undefined){
      return value+"%";
   }
}

function TQCZBFormatter(value,row,index){
   if(value!=undefined){
      return value+"%";
   }
}
function BNCZBFormatter(value,row,index){
   if(value!=undefined){
      return value+"%";
   }
}
function BNTQCZBFormatter(value,row,index){
   if(value!=undefined){
      return value+"%";
   }
}

function SSBMFormatter(value,row,index){
   if(row.ZBID=="YDFX0290"){
      return "YJSZ";
   }else{
      return value;
   }
}
</script>
</html>

 

 

Teln_小凯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js价格筛选商品案例
m0_62371650的博客
08-17 557
js价格筛选商品案例
【JavaScript】原生JS实现多条件筛选
'Ablaze 的专栏
11-11 5253
我在学JS初始看到的教程基本都是JS二级联动查询、三级联动查询；如下图： 但有时并不需要级联查询，如购买商品时： 今天我以慕课网前端样式作为参考做了下面的Demo，基于原生JS<div id="direction"> <strong>方向：</strong> <span class="active">全部</span> <span>前端</span> <span
PHP商城属性筛选商品,【PHP开源产品】Ecshop的商品筛选功能实现分析之一
weixin_39837139的博客
03-10 451
一、首先，说明一下为什么要对category.php文件进行分析。原因如下：①个人对商城类商品筛选功能的实现比较好奇；②对商城中关于商品的数据表设计比较感兴趣。(该功能涉及到与数据库的交互，而且与数据库中数据表的设计好坏有一定的联系)；③多条件(属性)筛选功能在现今的很多网站都需要用到，很广泛(如：一般商城网、团购网、房产网、信息分类网站等等)。希望达到的目的是：①能够对多条件筛选功能有一个初步的...
原生js代码实现商品筛选方法
qq_37295890的博客
12-04 1049
实现步骤 1、根据数据结构生成HTML结构（利用dom操作） 2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数 3、点击a标签，把a标签的内容添加在对象中，同时添加样式 4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列） 5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式 第一种方法 &lt;script&gt; window.onload...
原生js实现商品筛选功能
10-16
【原生JS实现商品筛选功能】是Web开发中常见的需求，尤其在电商网站中，能够帮助用户快速定位符合自己需求的商品。以下是对该功能的详细解释： 1. **数据结构**： 数据以JSON格式存储商品筛选条件，例如品牌、尺寸...
JS实现商品筛选功能
10-19
主要为大家详细介绍了JS实现商品筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js列表商品条件筛选代码
06-24
在JavaScript编程领域，商品列表的条件筛选功能是电商网站中不可或缺的一部分。这个"js列表商品条件筛选代码"针对的是如何高效、便捷地实现用户在浏览商品列表时进行各种条件筛选的功能，例如按照价格、品牌、销量等...
angular实现商品筛选功能
08-31
在本文中，我们将深入探讨如何使用Angular框架实现商品筛选功能，包括数据定义、渲染、排序以及搜索等核心组件。Angular是一款强大的前端JavaScript框架，它基于MVVM（Model-View-ViewModel）模式，允许开发者构建可...
jquery 实现筛选功能。
01-04 8256
商品属性筛选商品的属性筛选 是一个十分常见的功能，通常是同一类型的属性只能选择一个。例如 价格范围，或者品牌，为了使选择的内容看上去更直观 ，一般都会将选择项列出，并拥有点击取消 选择 ，点击同类替换的功能。 在下面给出两个完整实现。实现1：使用jquery 的appendTo 让点击的元素加入到列出项里面 （同时检测列出项是否有同一类的元素，有则替换出来，使它返回原列表），在列出项里面点击元素
京东商品筛选功能
03-12
仿京东产品筛选功能的实现 能够给使用者提供一些思路和方向
仿淘宝筛选模块功能
热门推荐
sd4000784的专栏
01-09 1万+
仿淘宝筛选模块总结： 需求： 1、 点击一个商品后，显示出该商品的筛选条件（因为符合此id号的商品有海量数据，要找到自己想要的，就需要给出筛选条件。） 2、 点击筛选条件后、该筛选条件框会隐藏、显示出符合该商品的内容、再点击筛选条件、在隐藏该条件框、最后列出符合筛选条件的数据。 3、 只用这一个页面来接受和传递数据。 要做数据来回传递，且只用一个页面。相当于淘宝买衣服筛选模块
JS实现商品筛选（3）
lhw135864的专栏
02-19 2355
这一次要分享的是以前写过的tab切换+分页，只是这次以面向对象的形式写出来。代码是基于jquery的，当然你也可以用原生JS来实现，不过得封装一些函数，不然甚是麻烦。 先说tabs组件，基于简单的考虑，我这个组件，只需要传两个参数，一个是触发器的元素数组，一个是切换内容的元素数组。个人感觉更好的，应该是要再传一个外层容器的ID，因为有时候可能触发器的class值会有重复的使用。当然，我的代码已经
php 多级分类筛选功能详解
大泽的博客
01-06 3842
强调：本来是想写一个ajax的筛选了，分配数据之后的分页确出了一些问题，所以就写了一个常规的。其实这个功能并不是很复杂，就是一个查数据的过程，但是还是有一些考验前端的知识掌握。 先上后台代码： namespace Home\Controller; use Think\Controller; class IndexController extends Controller { p
解答，类似京东的商品筛选功能的实现，电子商城的产品筛选功能是怎么实现的？...
wangxiaohigh
11-30 616
数据表结构 1、属性表(attributeid ,....) 2、商品表(productid ,.....) 3、属性值表(attributevalueId,attributeId,......) 4、商品_属性值表(productid attributevalue)(关键表) 先添加商品分类， 添加商品分类后，添加该商品分类的属性。 如添加衣服分类，该分类有颜色、尺码属性。 再如...
angularJs中筛选功能-angular.filter-1
w4979的博客
11-28 919
以下介绍为自己在使用angular-filter时，简单总结的用法。 开始 1.你可以使用4中不同的方法来安装angular-filter： 克隆或创建这个存储库 通过bower：通过在你的终端执行：$ bower install angular-filter 通过npm：通过在你的终端执行：$ npm install angular-filter 通过cdnjs： http://www.cdn...
js仿淘宝条件筛选
暖心少年
05-29 3149
链接：https://pan.baidu.com/s/1tL2ndyfaq0US2r_tvZ0Ryw 密码：ruaw
用JavaScript写出具有搜索和筛选功能的界面
最新发布
05-26
好的，下面是一个简单的示例代码，实现了搜索和筛选功能： HTML部分： ```html <!DOCTYPE html> 搜索和筛选 商品列表 搜索商品名称"> 全部 电子产品">电子产品 家具">家具 服装">服装 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值