帝國7.5版本實現地區三級聯動并且前后臺可進行地區的篩選功能插件

?帝國cms仿站 ????|???? ?2019-10-31

  給大家分享一款帝國cms的三級聯動插件,優勢是可以自己設定區域,修改相關地區數據,接下來我們看一下使用步驟。

  第一步:后臺添加三個數據表字段

  字段名:pro 字段標識:省 輸入表單替換html代碼為如下代碼:

  1. <select name="pro"></select>

  字段名:city 字段標識:市 輸入表單替換html代碼:

  1. <select name="city"></select>

  字段名:area 字段標識:縣 輸入表單替換html代碼:

  1. <select name="area"></select>

第二步:建立完畢后,在到 管理系統模型  設置上邊添加的三個字段設為 提交項,可添加、修改、列表顯示、內容頁顯示、結合項,并生成相應的表單!

 

第三步:打開e/admin/AddNews.php   把以下代碼粘貼到  結尾的隨便位置即可

 

 
  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的結合項來進行篩選。

 

 
  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的,表示使用結合項,否則不能篩選

下面是使用篩選功能的頁面示例,大家可以參考。  js文件聯系我們

星聯仿站網專業提供CMS建站,定制網站、仿站、SEO技術、網站技術處理,網站運營一條龍服務!歡迎咨詢星聯仿站網!聯系電話:19961388207 微信:lin_Keeg QQ:446435227

打賞

取消

感謝您的支持,我會繼續努力的!

掃碼支持
掃碼打賞,感謝您對我們的支持!

打開支付寶掃一掃,即可進行掃碼打賞哦

專注于 帝國cms技術/dedecms技術,分享從這里開始,精彩與您同在