五步让你的帝国拥有三级联动下拉菜单[超详细教程]
你还在为帝国没有联动菜单功能而发愁呢,现在不用愁了,有了 [YeeH 无限级联动类] 便可随心所欲,本教程是针对整合到帝国的针对性教程,若想更了解 [YeeH无限级联动类],可以访问教程最后的网站查看详细介绍及教程。
特别注意: YeeH无限级联动类默认是UTF-8编码,请在使用前将JS文件转换成您需要的编码。
第一步:下载最新版的 [YeeH无限级联动类],我们只需要提取Build文件中的data_china.js和selects.js到你的网站随意目录准备调用。
第二步:打开后台管理 - 数据表管理 - 管理字段 - 增加如下三个字段
字段名:pro 标识:地区(省) 输入投稿表单替换html代码:<select name="pro"></select> 字段名:city 标识:地区(市) 输入投稿表单替换html代码:<select name="city"></select> 字段名:area 标识:地区(县) 输入投稿表单替换html代码:<select name="area"></select>
第三步,管理系统模型 - 修改该系统模型 - 把刚才新添加的三个字段设置为录入项等属性,并且勾选自动生成表单模版,录入和投稿都要选。
第四步,还是修改系统模型 ,这时候把下面已经生成的录入表单模版代码复制出来到你习惯的编辑器中编辑,比如DW或Editplus,在顶部增加JS调用代码,这时候就是要调用从build文件中提取的JS文件,你是不是已经放到你的站点目录了呢,那么记住你的路径,添加如下代码:
<script type="text/javascript" src="/路径/selects.js"></script> <script type="text/javascript" src="/路径/data_china.js"></script> | 然后在代码尾部增加如下代码,这是一段PHP代码+JS代码,用来判断是添加信息还是编辑信息的,添加信息的时候显示请选择地区,那么编辑信息的时候当然要读取数据库中已经添加的地区设置喽。
<? if(empty($r[pro])) { ?>
<script type="text/javascript"> var s = selects; //获取对象 var p = document.getElementsByName('pro')[0];//省 var c = document.getElementsByName('city')[0];//市 var a = document.getElementsByName('area')[0];//区 //绑定数据 s.bind(p,province); s.bind(c,city); s.bind(a,area); //确定从属关系 s.parent(p,c); s.parent(c,a); //设置默认值 </script> <? }
else { ?> <script type="text/javascript"> var s = selects; //获取对象 var p = document.getElementsByName('pro')[0];//省 var c = document.getElementsByName('city')[0];//市 var a = document.getElementsByName('area')[0];//区 //绑定数据 s.bind(p,province); s.bind(c,city); s.bind(a,area); //确定从属关系 s.parent(p,c); s.parent(c,a); //设置默认值 s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'}); s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'}); s.selected(a,{text:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'}); </script> <? } ?> | 第五步,将代码粘贴回去,然后提交,从此以后千万不能再勾选自动生成表单模版了,不然你还要重新修改,提交完成了么,好,激动人心的时刻到了,去你的信息管理里面添加一条信息,看看是否已经有了非常牛X的地区三级联动了呢,添加信息以后再编辑这个信息,看看地区联动那里是不是直接显示你刚才设置的地区呢。
OK 教程就到这,我说的真的非常非常的详细了,如果你还是看不懂,那我没招了哈哈。
最新版 YeeH 无限级联动类下载地址:
http://bbs.phome.net/showthread-31-65637-0.html
更详细 YeeH 无限级联动类教程地址:
http://www.yeeh.org/demo/selects/
有问题回帖我会解答。
成功应用案例
http://www.tlren.com
随便注册一个企业会员,然后增加企业招聘信息,就可以看到我的两个联动类同 |
|
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理