网站首页 文章专栏 php+layui 实现前端平滑的三级联动

php+layui 实现前端平滑的三级联动

编辑时间:2021-03-09 18:00:12 作者:苹果 浏览量:6382


    前言:之前做后端跟前端对接三级联动时,都是前端每切换一次父级就要请求一次后端接口,出现了很多不必要的多次请求。闲来无事,借助layui组建,实现只请求一次完成多次平滑切换的功能。


三级联动前端部分,直接采用layui提供的代码:

           <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">网点地址</div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                <option value="">请选择省</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                <option value="">请选择市</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                <option value="">请选择区</option>
              </select>
            </div>
          </div>
 <script src="http://adminapi.fdt.cc/lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xcity.js"></script>
<script>
  layui.use(['form','code'], function(){
    form = layui.form;
    $('#start').xcity();
    //请求后端
ajax('请求后端地址', '', function (data) {
    provinceList = data.data;
    $('#start').xcity();
});
  });
</script>

xcity.js文件内容为:

$.fn.xcity = function (pName, cName, aName) {

    this.p = $(this).find('select[lay-filter=province]');

    this.c = $(this).find('select[lay-filter=city]');

    this.a = $(this).find('select[lay-filter=area]');

    this.cityList = [];

    this.reaList = [];

    this.showP = function (provinceList) {

        this.p.html('');

        is_pName = false;
        for (var i in provinceList) {
            if (pName == provinceList[i].id) {
                is_pName = true;
                this.cityList = provinceList[i].child;
                this.p.append("<option selected value='" + provinceList[i].id + "'>" + provinceList[i].name + "</option>")
            } else {
                this.p.append("<option value='" + provinceList[i].id + "'>" + provinceList[i].name + "</option>")
            }
        }
        if (!is_pName) {
            this.cityList = provinceList[0].child;
        }
    }

    this.showC = function (cityList) {
        if (this.cityList == undefined) {
            this.c.html('');
            return;
        }
        this.c.html('');

        is_cName = false;
        for (var i in cityList) {
            if (cName == cityList[i].id) {
                is_cName = true;
                this.areaList = cityList[i].child;
                this.c.append("<option selected value='" + cityList[i].id + "'>" + cityList[i].name + "</option>")
            } else {
                this.c.append("<option value='" + cityList[i].id + "'>" + cityList[i].name + "</option>")
            }
        }
        if (!is_cName) {
            this.areaList = cityList[0].child;
        }
    }

    this.showA = function (areaList) {
        this.a.html('');

        for (var i in areaList) {

            if (aName == areaList[i]) {
                this.a.append("<option selected value='" + areaList[i].id + "'>" + areaList[i].name + "</option>")
            } else {
                this.a.append("<option value='" + areaList[i].id + "'>" + areaList[i].name + "</option>")
            }
        }
    }

    this.showP(provinceList);
    this.showC(this.cityList);
    this.showA(this.areaList);
    var form = layui.form;
    form.render('select');
    form.on('select(province)', function (data) {
        var pName = data.value;
        $(data.elem).parents(".x-city").xcity(pName);
    });

    form.on('select(city)', function (data) {
        var cName = data.value;
        var pName = $(data.elem).parents(".x-city").find('select[lay-filter=province]').val();
        $(data.elem).parents(".x-city").xcity(pName, cName);
    });
    form.render('select');
    return this;
};
var provinceList = [];



对应的后端接口返回数据格式为:

["id" => 1,
    "name" => "名称",
    "child" => [
        "id" => 1,
        "name" => "子级名称",
        "child" => [
            "id" => 1,
            "name" => "第三级名称",
        ]
    ]
];

    出自:何冰华个人网站

    地址:https://www.hebinghua.com/

    转载请注明出处


来说两句吧
最新评论