[select2] Ajax分页获取数据

1. 设置select元素ID.

2. 配置API地址,如果需要身份认证,就添加headers.

3. 后端需要返回

  results,形如 [ { id:"option的值" , text:"option的显示文本" } ].

  ItemCount , 数据总数.

复制代码
        $('select元素ID').select2({
            placeholder: '',
            allowClear: true,
            ajax: {
                url: "API地址",
                delay: 500,
                headers: {
                    'Authorization': 'Bearer ' + "Token值"
                },
                data: function (params) {
                    var query = {
                        searchText: params.term,
                        page: params.page || 1
                    }
                    return query;
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 10) < data.ItemCount
                        }
                    }
                }
            }
        });
复制代码

 

 Select2选中事件,后端返回的results中,除了id,text还可以带其他数据.

 有些情况下需要通过选中数据带出其他数据,可以使用e.params.data['属性名'] 把需要的数据获取出来,填充到其他元素中.

   // 选中事件
        $("select元素ID").on("select2:select", function (e) {
            // e.params.data['属性名'];
        });

 

posted @   WikiChen  阅读(215)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示