layui[扩展组件]-xmSelect下拉多选 （分页，aja

layui[扩展组件]-xmSelect下拉多选 （分页，ajax）

遇到问题：

1、请求两次

2、分页不成功

3、回传数据格式 字符串转数组

解决思路：

1、按照官网教程：https://maplemei.gitee.io/xm-select/#/component/install

2、数据格式为数组

3、//remoteSearch: true 注释这行代码（解决请求两次问题 ）

4、pageRemote: true(分页)

5、字符串转数组

var arr = "100203,100204,100206";

strArr = arr.split(","); 

var newArr = []

 newArr.push({name: strArr[i], value: strArr[i],});  

demo1.setValue(newArr) 

贴代码：

var demo1 = xmSelect.render({

        el: '#demo1',

        toolbar: {

            show: true,

            showIcon: true,

        },

        filterable: true,

        paging: true,

        pageSize: 15,

        // remoteSearch: true,

        pageRemote: true,

        //数据处理

        remoteMethod: function (val, cb, show, pageIndex) {

            //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页

            $.ajax({

                url: "",

                type: 'POST',

                crossOrigin: true,

                dataType: 'json',

                cache: false,

                async: true,

                data: {

                    keywords: val,

                    page: pageIndex,

                    rows: 15

                },

                success: function (data) {

                    var TotalCount = data.totalCount;

                    var Pages = Math.ceil(TotalCount / 15);

                    console.log(Pages)

                    var res = data.data;

                    setTimeout(function () {

                        //需要回传一个数组

                        cb(res, Pages)

                    }, 100)

                },

                error: function (data) {

                    //这里是error的处理

                    cb([], 0);

                    updateAlert("调用异常！");

                }

            });

        },

        on: function(data){

            //arr:  当前多选已选中的数据

            //监听，选中的数据数量，为空则另一个字段可编辑，不为空则另一个字段可编辑

            var arr = data.arr;

            console.log(arr);

            if(arr!=""){

                document.getElementById('level').setAttribute("disabled", true);

            }else{

                document.getElementById('level').removeAttribute("disabled");

            }

        },

    });

    //var arr = "100203,100204,100206";   //字符串转带参数的数组

    var arr = ' ';//这里写入回传的参数

    if (arr != '') {

        strArr = arr.split(",");

        var newArr = []

        for (var i = 0; i < strArr.length; i++) {

            newArr.push({name: strArr[i], value: strArr[i],});

        }

        demo1.setValue(newArr)

    }

image image image