LArea插件的使用

时间:2023-02-12 12:56:48

楼主菜鸟一枚,开发微信端三级滑动遇到的N多技术问题,与大家分享,话不多说,先上效果图:

LArea插件的使用

LArea插件的使用,前端部分参考如下:LArea插件的使用

LArea插件的使用

关于PHP插件使用,请往下看:

 
1.首先在前端页面引入js样式和插件库,设置隐藏域,input标签中获取id值
 
LArea插件的使用
 
 
2. 用POST方式获取隐藏值,如:area_id :17,258,2820,PHP后台获取id值,此地址为3级id地址
 
LArea插件的使用
 
3.使用自定义数据源,获取数据表中的三级地址
自定义数据源js库    <script src="js/Area.js"></script>

'keys': {
id: 'id', 对应的id
name: 'name' 对应的name属性
}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
'type': 1, //数据源类型
'data': LAreaData //数据源 type:为数据源类型,JS中引用的Area库 type:1类型, data:LAreData是JS库中定义的JS数组名称,具体格式如下: var LAreaData = [{
"id": "1",
"name": "\u5317\u4eac",
"pid": "0",
"child": [{
"id": "36",
"name": "\u5317\u4eac\u5e02",
"pid": "1",
"child": [{"id": "37", "name": "\u4e1c\u57ce\u533a", "pid": "36"}, {
"id": "38",
"name": "\u897f\u57ce\u533a",
"pid": "36"
}, {"id": "41", "name": "\u671d\u9633\u533a", "pid": "36"}, {
"id": "42",
"name": "\u4e30\u53f0\u533a",
"pid": "36"
}, {"id": "43", "name": "\u77f3\u666f\u5c71\u533a", "pid": "36"}, {
"id": "44",
"name": "\u6d77\u6dc0\u533a",
"pid": "36"

  

LArea插件的使用

说明:楼主JS中的自定义数据源是通过PHP后台读取数据表中的数据,然后通过循环遍历再转为JSON格式,再将JSON数据存在JS文件中,这样降低了远程服务器的IO开销,减小数据库的压力,增加查询的速度,如图:

LArea插件的使用

或者通过JS绑定id触发ajax事件来异步调用数据,楼主不太建议使用该方法;

LArea插件的使用