LArea插件的使用

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

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

 

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

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

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

3.使用自定义数据源，获取数据表中的三级地址

<script src="js/Area.js"></script>
<script src="js/LArea.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    var area1 = new LArea();
    area1.init({
        'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
</script>

 

自定义数据源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开销，减小数据库的压力，增加查询的速度，如图：

    public function all_area() {
        $area_ls = $this->area->ls(array('find' => 'area_id as id,area_name as name,pid'),1);
        $area_tree = array();
        $area_ls_temp = array();
        foreach ( $area_ls as $al_key => $sl_val){
            $area_ls_temp[$sl_val['pid']][] = $sl_val;
        }
        foreach ($area_ls_temp[0] as $al_key1 => $al_val1) {
            $temp = $al_val1;
            $temp['child'] = $area_ls_temp[$al_val1['id']];
            foreach ($temp['child'] as $t_key => $t_val) {
                $temp['child'][$t_key]['child'] = $area_ls_temp[$t_val['id']];
            }
            $area_tree[] = $temp;
        }
        echo json_encode($area_tree);
    }

 

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

 

【PHPer技术栈】专注后端开发，倡导开源文化，做一个好玩、有趣、有灵魂的PHPer工程师，欢迎大家关注！