给商品模型添加搜索设定
来源：互联网 发布：淘宝装修用什么版本? 编辑：程序博客网 时间：2024/06/07 14:17
请先看看京东的商品搜索。
通常都有基础搜索属性及高级搜索属性。为了区分这两个，特意给每一个可以搜索的属性添加上一个功能。
效果图如下：
拖曳排序：
后台数据交换格式：
代码如下：
<%@ page import="Easis.util.DataTable" %><%@ page import="Easis.util.DataRow" %><%@ page import="Easis.Common.StringUtil" %><%@ page import="Easis.util.PagerResult" %><%@ page import="com.eweb.Controller.admin.Shop.ModuleController" %><%@ page import="com.alibaba.fastjson.JSON" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><% /************************************ 初始化参数--给予默认值 ************************************/ ModuleController.SearchSettingViewObject detailview = (ModuleController.SearchSettingViewObject) request.getAttribute("obj"); ModuleController.ViewItem model = detailview.model;%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7"/> <title> <%=detailview.model.name%> - 搜索条件设定 </title> <%@include file="/WEB-INF/jsp/global/padmin.css.jsp" %> <%@include file="/WEB-INF/jsp/global/admin.js.jsp" %> <link type="text/css" rel="stylesheet" href="/static/UI/jquery-ui-1.11.0/jquery-ui.min.css"> <script src="/static/UI/jquery-ui-1.11.0/jquery-ui.min.js"></script> <style type="text/css">html { _overflow-y: scroll }</style></head><body><div class="subnav"> <div class="content-menu ib-a blue line-x"> <a class="add fb" href="javascript:void(0);"><em>模型管理</em></a> <a href='javascript:;' class="on"><em><%=detailview.model.name%>搜索条件设定</em></a> <span>|</span> <a href='javascript:history.back(-1);'><em>返回上一页</em></a> <!--<span>|</span> <a href=''><em></em></a>--> </div></div><div class="pad-10"> <form action="" method="post" id="myform"> <fieldset> <legend>基本信息</legend> <table width="100%" class="table_form"> <tr style="display: none;"> <th>主键：</th> <td> <input id="txt_id" type="hidden" name="model.id" value="<%=model.id%>"/> 【隐藏字段】 <span tipsfor="tips_model_id"></span> </td> </tr> <tr> <th width="80">模型名称：</th> <td class="y-bg"><%=model.name%></td> </tr> <tr> <th width="80">属性列表：</th> <td class="y-bg"> <span style="background-color:#638421;padding-right:10px;"> </span>表示该属性可用于搜索，<span style="background-color: #999999;padding-right: 10px;"> </span>表示该属性不可用于搜索。 </td> </tr> <tr> <th width="80"> </th> <td class="y-bg"> <div id="attrList" class="tagsinput"></div> </td> </tr> <tr> <th width="80">基础搜索：</th> <td class="y-bg"> <input type="button" value="编辑" onclick="_editBaseAttrList();" class="button"> </td> </tr> <tr> <th width="80"> </th> <td class="y-bg"> <div id="baseSearchAttrList" class="tagsinput"></div> </td> </tr> <tr> <th width="80">高级搜索：</th> <td class="y-bg"> <input type="button" value="编辑" onclick="_editAdAttrList();" class="button"> </td> </tr> <tr> <th width="80"> </th> <td class="y-bg"> <div id="advancedSearchAttrList" class="tagsinput"></div> </td> </tr> </table> </fieldset> <div class="bk15"></div> <!-- <fieldset> <legend>FTP服务器</legend> <table width="100%" class="table_form"> <tr> <th width="80">服务器地址：</th> <td class="y-bg"><input type="text" class="input-text" name="host" id="host" size="30"/></td> </tr> </table> </fieldset> <div class="bk15"></div> --> <input type="button" class="button" id="dosubmit" name="dosubmit" onclick="saveToServer();" value="保存修改"/> </form></div><script type="text/javascript"> var _attrList=<%=JSON.toJSONString(detailview.attrList)%>;//当前资料的json数组。 var _baseSearchAttrList=[];//基础搜索属性列表。 var _advancedSearchAttrList=[];//高级搜索属性列表 function _resetAttrList(){ var arr2=_attrList.sort(function(a,b){ var _a_orders=(a["usedInSearch"]?0:1)*9999+(a["enabled"]?0:1)*9999+parseInt(a.orders); var _b_orders=(b["usedInSearch"]?0:1)*9999+(b["enabled"]?0:1)*9999+parseInt(b.orders); return _a_orders-_b_orders; }); _attrList=arr2; var html=[]; var _str_baselist=""; for(var i=0;i<_baseSearchAttrList.length;i++){ _str_baselist+=",,"+_baseSearchAttrList[i]["id"]+",,"; } var _str_adlist=""; for(var i=0;i<_advancedSearchAttrList.length;i++){ _str_baselist+=",,"+_advancedSearchAttrList[i]["id"]+",,"; } for(var i=0;i<_attrList.length;i++){ var item=_attrList[i]; if(_str_baselist.indexOf(",,"+item["id"]+",,")!=-1||_str_adlist.indexOf(",,"+item["id"]+",,")!=-1){ continue; } var _str_item=""; //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' + //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>'; if(item["enabled"]==false||item["usedInSearch"]==false){ _str_item='<span class="tag" arrindex="'+i+'" style="background-color: #999999;" >'+item["name"]+'</span>'; } else{ _str_item='<span class="tag" arrindex="'+i+'"><span class="tag_title" >'+item["name"]+'</span></span>'; } html.push(_str_item); } $("#attrList").html(html.join("")); } var _hashAttrList={};//建立一个对象用于存放相关key值对。 (function(){ for(var i=0;i<_attrList.length;i++){ var item=_attrList[i]; _hashAttrList["key"+item["id"]]=item; } })(); _resetAttrList(); function _resetBaseAttrList(){ var arr2=_baseSearchAttrList.sort(function(a,b){ var _a_orders=(a["suborders"]==undefined?parseInt(a.orders):parseInt(a["suborders"])); var _b_orders=(b["suborders"]==undefined?parseInt(b.orders):parseInt(b["suborders"])); return _a_orders-_b_orders; }); _baseSearchAttrList=arr2; var html=[]; for(var i=0;i<_baseSearchAttrList.length;i++){ var item=_baseSearchAttrList[i]; var _str_item=""; //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' + //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>'; _str_item='<span class="tag" arrindex="'+i+'"><span class="tag_title" >'+item["name"]+'</span></span>'; html.push(_str_item); } $("#baseSearchAttrList").html(html.join("")); } _resetBaseAttrList(); function _resetAdvancedAttrList(){ var arr2=_advancedSearchAttrList.sort(function(a,b){ var _a_orders=(a["suborders"]==undefined?parseInt(a.orders):parseInt(a["suborders"])); var _b_orders=(b["suborders"]==undefined?parseInt(b.orders):parseInt(b["suborders"])); return _a_orders-_b_orders; }); _advancedSearchAttrList=arr2; var html=[]; for(var i=0;i<_advancedSearchAttrList.length;i++){ var item=_advancedSearchAttrList[i]; var _str_item=""; //'<li arrindex="'+i+'" attrid="'+item["id"]+'" attrname="'+item["name"]+'" attrorders="'+item["orders"]+'" attrcolor="'+item["color"]+'"><span class="option_text">'+item["name"]+'(排序:'+item["orders"]+')</span>' + //'<a onclick="javascript:editSingleSelectOption(this);">编辑</a><a onclick="javascript:deleteSingleSelectOption(this);" >删除</a></li>'; _str_item='<span class="tag" arrindex="'+i+'"><span class="tag_title" >'+item["name"]+'</span></span>'; html.push(_str_item); } $("#advancedSearchAttrList").html(html.join("")); } _resetAdvancedAttrList();</script><script type="text/javascript"> function _editBaseAttrList(){ var _str_baselist=""; for(var i=0;i<_baseSearchAttrList.length;i++){ _str_baselist+=",,"+_baseSearchAttrList[i]["id"]+",,"; } var _str_adlist=""; for(var i=0;i<_advancedSearchAttrList.length;i++){ _str_baselist+=",,"+_advancedSearchAttrList[i]["id"]+",,"; } var html_leftList=[]; for(var i=0;i<_attrList.length;i++ ){ var id=_attrList[i]["id"]; if((_str_adlist.indexOf(",,"+id+",,")!=-1||_str_baselist.indexOf(",,"+id+",,")!=-1)||_attrList[i]["usedInSearch"]==false){ continue; } var item=_attrList[i]; var _str='<option value="'+item["id"]+'">'+item["name"]+'</option>'; html_leftList.push(_str); } var html_rightList=[]; for(var i=0;i<_baseSearchAttrList.length;i++){ var item=_baseSearchAttrList[i]; html_rightList.push('<option value="'+item["id"]+'">'+item["name"]+'</option>'); } var str_tpl=[]; str_tpl.push("<div class=\"lr_container\"> "); str_tpl.push(" <div class=\"lr_select_side\"> "); str_tpl.push(" <p>待选区</p> "); str_tpl.push(" <select id=\"selectL\" name=\"selectL\" multiple=\"multiple\" class=\"lr_select\"> "); str_tpl.push(html_leftList.join("")); str_tpl.push(" </select> "); str_tpl.push(" </div> "); str_tpl.push(" <div class=\"lr_select_opt\"> "); str_tpl.push(" <p id=\"toright\" title=\"添加\" onclick='_moveToRight();'>></p> "); str_tpl.push(" <p id=\"toleft\" title=\"移除\" onclick='_moveToLeft();'><</p> "); str_tpl.push(" </div> "); str_tpl.push(" <div class=\"lr_select_side\"> "); str_tpl.push(" <p>已选区</p> "); str_tpl.push(" <select id=\"selectR\" name=\"selectR\" multiple=\"multiple\" class=\"lr_select\"> "); str_tpl.push(html_rightList.join("")); str_tpl.push(" </select> "); str_tpl.push(" </div> "); str_tpl.push("</div>"); art.dialog({ title:"添加及移除基础搜索属性", content:str_tpl.join(""), okVal:"确定", lock:true, ok:function(){ _saveSelectResult("base"); return true; }, cancelVal:"取消", cancel:function(){} }); } function _moveToRight(){ var selectL=$("#selectL"); var selectedListL=selectL.find("option:selected"); if(selectedListL.length<=0){ return; } var selectR=$("#selectR"); selectedListL.each(function(){ $(this).remove().appendTo(selectR); }); } function _moveToLeft(){ var selectL=$("#selectL"); var selectR=$("#selectR"); var selectedListR=selectR.find("option:selected"); if(selectedListR.length<=0){ return; } selectedListR.each(function(){ $(this).remove().appendTo(selectL); }); } function _saveSelectResult(type){ var selectL=$("#selectL"); var selectR=$("#selectR"); var selectedListR=selectR.find("option"); if(type=="base"){ _baseSearchAttrList=[]; } else if(type="advanced"){ _advancedSearchAttrList=[]; } selectedListR.each(function(){ var id=$(this).val(); if(type=="base"){ _baseSearchAttrList.push(_hashAttrList["key"+id]); } else if(type="advanced"){ _advancedSearchAttrList.push(_hashAttrList["key"+id]); } }); if(type=="base"){ _resetAttrList(); _resetBaseAttrList(); } else if(type=="advanced"){ _resetAttrList(); _resetAdvancedAttrList(); } return; } function _editAdAttrList(){ var _str_baselist=""; for(var i=0;i<_baseSearchAttrList.length;i++){ _str_baselist+=",,"+_baseSearchAttrList[i]["id"]+",,"; } var _str_adlist=""; for(var i=0;i<_advancedSearchAttrList.length;i++){ _str_baselist+=",,"+_advancedSearchAttrList[i]["id"]+",,"; } var html_leftList=[]; for(var i=0;i<_attrList.length;i++ ){ var id=_attrList[i]["id"]; if((_str_adlist.indexOf(",,"+id+",,")!=-1||_str_baselist.indexOf(",,"+id+",,")!=-1)||_attrList[i]["usedInSearch"]==false){ continue; } var item=_attrList[i]; var _str='<option value="'+item["id"]+'">'+item["name"]+'</option>'; html_leftList.push(_str); } var html_rightList=[]; for(var i=0;i<_advancedSearchAttrList.length;i++){ var item=_advancedSearchAttrList[i]; html_rightList.push('<option value="'+item["id"]+'">'+item["name"]+'</option>'); } var str_tpl=[]; str_tpl.push("<div class=\"lr_container\"> "); str_tpl.push(" <div class=\"lr_select_side\"> "); str_tpl.push(" <p>待选区</p> "); str_tpl.push(" <select id=\"selectL\" name=\"selectL\" multiple=\"multiple\" class=\"lr_select\"> "); str_tpl.push(html_leftList.join("")); str_tpl.push(" </select> "); str_tpl.push(" </div> "); str_tpl.push(" <div class=\"lr_select_opt\"> "); str_tpl.push(" <p id=\"toright\" title=\"添加\" onclick='_moveToRight();'>></p> "); str_tpl.push(" <p id=\"toleft\" title=\"移除\" onclick='_moveToLeft();'><</p> "); str_tpl.push(" </div> "); str_tpl.push(" <div class=\"lr_select_side\"> "); str_tpl.push(" <p>已选区</p> "); str_tpl.push(" <select id=\"selectR\" name=\"selectR\" multiple=\"multiple\" class=\"lr_select\"> "); str_tpl.push(html_rightList.join("")); str_tpl.push(" </select> "); str_tpl.push(" </div> "); str_tpl.push("</div>"); art.dialog({ title:"编辑高级搜索", content:str_tpl.join(""), okVal:"确定", lock:true, ok:function(){ _saveSelectResult("advanced"); return true; }, cancelVal:"取消", cancel:function(){} }); }</script> <script type="text/javascript"> //拖曳排序 $(document).ready(function(){ $("#baseSearchAttrList" ).sortable({ update: function(event, ui) { //.log("排序结束"); var _dom=$("#baseSearchAttrList"); var _orders=0; _dom.find("li").each(function(){ var _arrindex=parseInt($(this).attr("arrindex")); _baseSearchAttrList[_arrindex].suborders=_orders; _orders++; }); } });$( "#baseSearchAttrList" ).disableSelection(); $( "#advancedSearchAttrList" ).sortable({ update: function(event, ui) { //.log("排序结束"); var _dom=$("#advancedSearchAttrList"); var _orders=0; _dom.find("li").each(function(){ var _arrindex=parseInt($(this).attr("arrindex")); _advancedSearchAttrList[_arrindex].suborders=_orders; _orders++; }); } });$( "#advancedSearchAttrList" ).disableSelection(); });</script><script type="text/javascript"> var saveData={ moduleid:0, baselist:[],//item为{id:0,suborders:0} adlist:[]//item为{id:0,suborders:0} }; function saveToServer(){ saveData.moduleid=$("#txt_id").val(); saveData.baselist=[]; saveData.adlist=[]; for(var i=0;i<_baseSearchAttrList.length;i++){ var item=_baseSearchAttrList[i]; var id=item["id"]; var suborders=item["suborders"]==undefined?0:item["suborders"]; saveData.baselist.push({ id:id, suborders:suborders }); } for(var i=0;i<_advancedSearchAttrList.length;i++){ var item=_advancedSearchAttrList[i]; var id=item["id"]; var suborders=item["suborders"]==undefined?0:item["suborders"]; saveData.adlist.push({ id:id, suborders:suborders }); } layer.alert(""+JSON.stringify(saveData)); }</script></body></html> 0 0
- 给商品模型添加搜索设定
- ecshop二次开发 给商品添加自定义字段
- 【数据库】给商品表添加上属性
- 搜索添加历史记录和商品详情
- Magento如何通过url参数给购物车添加商品?
- Ecshop二次开发：给商品添加自定义字段（三）
- ECSHOP 给添加/编辑商品页面的菜单设置权限
- Ecshop二次开发：给商品添加自定义字段（三）
- ECShop——给商品详情页添加字段
- 给Compass搜索添加高亮(highlight)
- 给easyui datagrid添加搜索栏
- 给easyui datagrid 添加搜索条件
- 给ubuntu的firefox添加“百度搜索”
- 给搜索框添加回车事件
- 搜索，商品列表，商品详情
- unity3d 给模型添加刚体后下坠
- 如何给网站搜索添加关键字和搜索文本
- 带着项目学PHP第九讲 - 如何给ecshop的wap版本首页和商品页添加商品图片
- Android中应用界面主题Theme使用方法和页面定时跳转应用
- PHP模块 Memcached功能多于Memcache
- ACE中的TCP通讯
- 解决VTune错误The Data Cannot be displayed, there is no viewpoint available for data
- 使用GDAL库中的RPC校正问题
- 给商品模型添加搜索设定
- The nature of C++
- 新书《Linux就是这个范儿》预售
- linux 端口使用情况
- java线程间通讯
- 下标运算符的重载
- 搜狗输入法不错，附带的进程需要一个个把exe文件重命名
- 是否完全面向对象？
- AE调用GP工具
