LArea插件的使用

Posted 2020-10-11 PHPer技术栈

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

 

 

LArea插件的使用，前端部分参考如下：

 

关于php插件使用，请往下看：

 

1.首先在前端页面引入js样式和插件库，设置隐藏域，input标签中获取id值

 

 

 

2. 用POST方式获取隐藏值，如：area_id :17，258,2820,PHP后台获取id值，此地址为3级id地址

 

 

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"

 

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

 

 

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