中国省市区三级联动 和树状显示

前端框架layui
所用组件 treetable & interact
组件下载地址 https://fly.layui.com/extend/
显示效果

aaaaa.png

插件使用方法看组件地址里的文档
主要是该json数据格式，
这是从数据库取得的数据，

[{"id":110000,"pid":0,"title":"北京市"},{"id":110100,"pid":110000,"title":"市辖区"},{"id":110101,"pid":110100,"title":"东城区"},{"id":110102,"pid":110100,"title":"西城区"},{"id":110105,"pid":110100,"title":"朝阳区"},{"id":110106,"pid":110100,"title":"丰台区"},{"id":110107,"pid":110100,"title":"石景山区"},{"id":110108,"pid":110100,"title":"海淀区"},....]

js里期待的数据格式

var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];

所以需要转换一下 （重点）

var data = "{{ $area }}"     //后台返回的数据，如第一段代码所示
data = data.replace(/"/g,'"');
data = JSON.parse(data)

转换后的数据

aeee.png

建议：因为地区表几乎不更新，所以取该数据一次储存为文件，之后每次从文件取
php代码demo

 public function areaList()
    {   
        // $myfile = fopen("map.txt", "w") or die("Unable to open file!");
        // $txt = $all_area;
        // fwrite($myfile, $txt);
        // fclose($myfile);
        //优先取文件
        if (file_exists('all_area.txt')) {
           $all_area = file_get_contents('all_area.txt');
        } else {
            $area = new AreaModel;
            $all_area = $area->getAllArea();
            $all_area = json_encode($all_area);//所有省市区
        }
        return view('admin.area.area',['area'=>$all_area]);
    }

注意 当数据较大时 该插件全部展开和全部收起 方法会耗较多资源导致页面崩溃

树状显示end

---

三级联动
主要时数据格式转换
demo

layui.extend({
      interact: 'src+'/three/interact' // 
    })
    layui.use(['interact','layer',],function(){
        var interact = layui.interact;
        var layer = layui.layer;
        $ = layui.jquery;
        // var data1=[{"id":1,"pid":0,"title":"广东"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"广州市"},{"id":5,"pid":1,"title":"佛山市"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
        var old_province = "{{ $user_addr['province'] }}"?"{{ $user_addr['province'] }}":0;
        var old_city = "{{ $user_addr['city'] }}"?"{{ $user_addr['city'] }}":0;
        var old_district = "{{ $user_addr['district'] }}"?"{{ $user_addr['district'] }}":0;
        var data = "{{ $area }}"
        data = data.replace(/"/g,'"');
        data = JSON.parse(data)
        //console.log(data);
        //return;
        interact.render({
            elem : '.test-region1',
            title : '我的地址',
            data : data,
            name : 'region1',
            selected : [old_province,old_city,old_district],
            hint : ['省份','市','县/区'],
        });

页面显示效果

ddddd1.png

fffffff.png

end

这里不能上传文件，给张截图把，不过还是推荐一下这张中国地区表。有省市区组合名（省得自己拼），经纬度，拼音，

area.png

地区表链接：https://pan.baidu.com/s/1cbnpm-FiyaHq2A3nsHO69Q
提取码：m7qh