织梦多条件筛选功能实现(dede联动搜索)
用织梦实现筛选的功能，其实主要就是运用到了织梦的高级搜索功能，然后用ajax去post替换掉本来的结果就可以了。
其实筛选的话，主要有两个问题需要解决，一个是前台的筛选实现，一个是后台根据前台的点击，反馈出相应的结果。
于是在网上搜索了N多的资料了之后，先实现前台的功能，就是你点了之后会有一个筛选的效果出来，当然，也只是一个效果。具体可以参照：jquery仿京东筛选效果。下面就一步一步用织梦来实现这样的功能。
京东的图片如下
首先我们先在后台自定义模型
看到参照网站的图片，可以发现商品的话，主要有下面的几个字段：品牌，价格，尺寸，平台，显卡这五个字段。
其中品牌、平台、显卡为option类型，价格为整数类型，尺寸为小数类型，添加模型的时候，记得勾上[使字段可以在列表的底层模板中获得(自定义字段默认仅能在文档模板显示，启用此选项将使列表查询变慢，如无必要请不要选择)]
下面根据我们设置的这些字段，开始直接调用。假如我们的模板目录为/templets/jingdong，那么我们开始在这个文件夹里面新建三个文件，名称分别为filter.htm、filter.js、以及filter.css。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://HdhCmsTestw3.org/TR/html4/loose.dtd" > <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" > <link href= "/templets/jingdong/filter.css" rel= "stylesheet" type= "text/css" /> <script src= "http://code.jquery测试数据/jquery-latest.js" type= "text/javascript" ></script> <script src= "/templets/jingdong/filter.js" type= "text/javascript" ></script> <title>织梦仿京东筛选</title> </head> <body> <div id= "filter" > <dl> <dt>品牌：</dt> <dd> <div><a>全部</a></div> </dd> <dd> <div><a>惠普(hp)</a></div> </dd> <dd> <div><a>联想(Lenovo)</a></div> </dd> <dd> <div><a>联想(ThinkPad)</a></div> </dd> <dd> <div><a>宏基(acer)</a></div> </dd> <dd> <div><a>华硕</a></div> </dd> <dd> <div><a>戴尔</a></div> </dd> <dd> <div><a>三星</a></div> </dd> <dd> <div><a>索尼</a></div> </dd> <dd> <div><a>东芝</a></div> </dd> <dd> <div><a>Gateway</a></div> </dd> <dd> <div><a>微星</a></div> </dd> <dd> <div><a>海尔</a></div> </dd> <dd> <div><a>清华同方</a></div> </dd> <dd> <div><a>富士通</a></div> </dd> <dd> <div><a>苹果(Apple)</a></div> </dd> <dd> <div><a>神舟</a></div> </dd> <dd> <div><a>方正</a></div> </dd> <dd> <div><a>优雅</a></div> </dd> </dl> <dl> <dt>价格：</dt> <dd> <div><a>全部</a></div> </dd> <dd> <div><a>1000-2999</a></div> </dd> <dd> <div><a>3000-3499</a></div> </dd> <dd> <div><a>3500-3999</a></div> </dd> <dd> <div><a>4000-4499</a></div> </dd> <dd> <div><a>4500-4999</a></div> </dd> <dd> <div><a>5000-5999</a></div> </dd> <dd> <div><a>6000-6999</a></div> </dd> <dd> <div><a>7000-9999</a></div> </dd> <dd> <div><a>10000以上</a></div> </dd> </dl> <dl> <dt>尺寸：</dt> <dd> <div><a>全部</a></div> </dd> <dd> <div><a>8.9英寸及以下</a></div> </dd> <dd> <div><a>11英寸</a></div> </dd> <dd> <div><a>12英寸</a></div> </dd> <dd> <div><a>13英寸</a></div> </dd> <dd> <div><a>14英寸</a></div> </dd> <dd> <div><a>15英寸</a></div> </dd> <dd> <div><a>16英寸-17英寸</a></div> </dd> </dl> <dl> <dt>平台：</dt> <dd> <div><a>全部</a></div> </dd> <dd> <div><a>AMD Brazos APU平台</a></div> </dd> <dd> <div><a>Intel Sandy Bridge平台</a></div> </dd> <dd> <div><a>Intel平台</a></div> </dd> <dd> <div><a>AMD平台</a></div> </dd> </dl> <dl> <dt>显卡：</dt> <dd> <div><a>全部</a></div> </dd> <dd> <div><a>独立显卡</a></div> </dd> <dd> <div><a>集成显卡</a></div> </dd> <dd> <div><a>核芯显卡</a></div> </dd> </dl> </div> </body> </html>然后把面的代码复制进去,现在把filter.css以及flter.js也分别复制好.
@charset "gb2312" ; /* CSS Document */ #filter { width:620px; height:auto; margin-left:auto; margin-right:auto; font-size:12px; } #filter dl { padding:0; margin-top:0; margin-bottom:0; clear:both; padding:4px 0; } #filter dt, dd { display:block; float:left; width:auto; padding:0; margin:3px 0; } #filter dt { height:14px; padding-bottom:4px; font-weight:bold; color:#333333; } #filter dd { color:#005AA0; margin-right:8px; } #filter a { cursor:pointer; } .seling { background-color:#005AA0; color:#FFFFFF; } .seled { background-color:#005AA0; color:#FFFFFF; } // JavaScript Document $( function () { //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。 $( "#filter a" ).hover( function () { $(this).addClass( "seling" ); }, function () { $(this).removeClass( "seling" ); } ); //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大) $( "#filter dt+dd a" ).attr( "class" , "seled" ); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)， 不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/ //为filter下的所有a标签添加单击事件 $( "#filter a" ).click( function () { $(this).parents( "dl" ).children( "dd" ).each( function () { //下面三种方式效果相同（第三种写法的内部就是调用了find()函数，所以，第二、三种方法是等价的。） //$(this).children("div").children("a").removeClass("seled"); //$(this).find("a").removeClass("seled"); $( 'a' ,this).removeClass( "seled" ); }); $(this).attr( "class" , "seled" ); alert(RetSelecteds()); //返回选中结果 }); alert(RetSelecteds()); //返回选中结果 }); function RetSelecteds() { var result = "" ; $( "#filter a[class='seled']" ).each( function () { result += $(this).html()+ "\n" ; }); return result; }如果步骤按照上面的步骤来操作的话这时候直接打开filter.htm已经可以看到效果了，那么下面要做的就是在织梦里面，用织梦的东西往里面去套。
查看更多关于织梦多条件筛选功能实现(dede联动搜索) - DeDecms的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did5836