下拉框数据有好几万，使用懒加载提升性能。

最新推荐文章于 2025-02-14 14:03:16 发布

慕容留白

最新推荐文章于 2025-02-14 14:03:16 发布

阅读量3.1k

点赞数

分类专栏：专业技能

本文链接：https://blog.youkuaiyun.com/ftft8888/article/details/100340389

版权

专业技能专栏收录该内容

10 篇文章

订阅专栏

页面写法

 <div class="col-md-6">
                             		  <div class="form-group">
                                            <label class="col-md-4 control-label">关联数据</label>
                                            <div class="col-md-8 padding-top-7">
                                                <select id="relationalLawyerId" name="relationalLawyerId"
                                                        class="form-control select2" style="width: 100%;" currentNum="2">
                                                </select>
                                            </div>
                                        </div>
                                    </div>

2.js代码

var selectConfigLawyer = {
        placeholder: "请选择",
        ajax: {
            url: "你的分页url",
            delay: 250,
            data: function (params) {
                params.offset = 30;
                params.page = params.page || 1;
                return {
                    name: params.term,
                    pageNum: params.page,
                    pageSize: params.offset
                };
            },
            cache: true,
            processResults: function (res, params) {
                if (res.code == "1" && res.data != null && res.data.length > 0) {
                    var length = res.data.length;
                    var users = res.data;
                    var options = [];
                    for (var i = 0, len = users.length; i < len; i++) {
                        var option = {
                            "id": users[i]["id"],
                            "text":users[i]["cnName"]
                        };
                        options.push(option);
                    }
                    return {
                        results: options,
                        pagination: {
                            more: length >= 30
                        }
                    };
                }
            }
        }
    }

3.使用方法：$("#relationalLawyerId").select2(selectConfigLawyer)
这个时候你们可能会碰到，要是我弹出的模带框里这个需求怎么办，好像不适用了。这是htmldom元素加载的问题，这样写就行了。

 // 弹出框里需要重写聚焦函数
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $("#relationalLawyerId").select2(selectConfigLawyer)
    };

需要重新聚焦参数