帝国CMS7.2实现地区三级联动并且前台可地区筛选的插件教程

时间：2016-01-29 23:17:00

分类：帝国教程

今天cms大学给大家分享一款帝国cms的三级联动插件，优势是可以自己设定区域，修改相关地区数据，接下来我们看一下使用步骤。

第一步：后台添加三个数据表字段

字段名：pro   字段标识：省    输入表单替换html代码为如下代码：  

折叠XML/HTML 代码
  1. <select name="pro"></select>  

字段名：city  字段标识：市    输入表单替换html代码：

折叠XML/HTML 代码
  1. <select name="city"></select>  

字段名：area  字段标识：县    输入表单替换html代码：

折叠XML/HTML 代码
  1. <select name="area"></select>  

第二步：建立完毕后，在到 管理系统模型  设置上边添加的三个字段设为 提交项，可添加、修改、列表显示、内容页显示、结合项，并生成相应的表单！

 

第三步：打开e/admin/AddNews.php   把以下代码粘贴到  结尾的随便位置即可

 

折叠XML/HTML 代码
  1. <script type="text/javascript" src="selects.js"></script>  
  2. <script type="text/javascript" src="data_china.js"></script>  
  3. <script type="text/javascript">  
  4. var s = selects;  
  5. //获取对象  
  6. var p = document.getElementsByName('pro')[0];//省  
  7. var c = document.getElementsByName('city')[0];//市  
  8. var a = document.getElementsByName('area')[0];//区  
  9. //绑定数据  
  10. s.bind(p,province);  
  11. s.bind(c,city);  
  12. s.bind(a,area);  
  13. //确定从属关系  
  14. s.parent(p,c);  
  15. s.parent(c,a);  
  16. //设置默认值  
  17. s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});  
  18. s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});  
  19. s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});  
  20. </script>  

 另外，也可以把上述代码放到相应模型的输入表单里，比修改文件更方便一些。

第四步：下载附件两个JS文件上传到e/admin/文件夹，此处为UTF-8编码格式，如果需要gbk或其他编码请自己转码。

执行到这里，我们已经可以在后台添加信息时选择地区联动了。

但前台页面上还没有地区选择功能，我们可以在需要的页面添加如下代码，来实现地区的筛选，此处利用了帝国cms的结合项来进行筛选。

折叠XML/HTML 代码
  1. <script type="text/javascript" src="[!--news.url--]js/selects.js"></script>  
  2.        <script type="text/javascript" src="[!--news.url--]js/data_china.js"></script>  
  3.             
  4.                <form method="get" action="[!--news.url--]e/action/ListInfo.php">  
  5.                <input value="10" type="hidden" name="mid">  
  6.               <input value="17" type="hidden" name="classid">  
  7.               <input value="1" type="hidden" name="ph">  
  8.               <input value="12" type="hidden" name="tempid">  
  9.                    
  10.                 <select name="pro"></select>  
  11.                  <select name="city"></select>  
  12.                  <select name="area"></select>  
  13.                  <INPUT value="确定" type="submit" name="提交">  
  14.                 </FORM>  
  15.             <script type="text/javascript">  
  16. var s = selects;  
  17. //获取对象  
  18. var p = document.getElementsByName('pro')[0];//省  
  19. var c = document.getElementsByName('city')[0];//市  
  20. var a = document.getElementsByName('area')[0];//区  
  21. //绑定数据  
  22. s.bind(p,province);  
  23. s.bind(c,city);  
  24. s.bind(a,area);  
  25. //确定从属关系  
  26. s.parent(p,c);  
  27. s.parent(c,a);  
  28. //设置默认值  
  29. s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});  
  30. s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});  
  31. s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});  
  32. </script>  

至此我们的设置就完成了，这里尤其要注意的就是引入的js文件路径一定要正确，否则会造成功能无法使用哟！

在前台的筛选表单里边有几个参数，大家需要注意：四个默认字段中mid指的是模型ID，classid是栏目ID，tempid是筛选列表所使用的模板ID（列表页模板），ph是使用结合项，ph参数是必须等于1的，表示使用结合项，否则不能筛选

下面是使用筛选功能的页面示例，大家可以参考。

1451399043688259.jpg

 

地区联动插件.rar
文件类型: .rar 点击下载地区联动插件.rar (20.47 KB)

 

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.