layui框架使用 xmselect 数据异步加载,可搜索数据 监听选择动作

需求描述:

    1.实现xmselect的单选框
    2.异步加载下拉选择的基础数据
    3.并监听点击选中动作并执行相应的操作
//初始化页面执行
$(document).ready(function(){
    //科室数据(编辑的时候使用;进入页面有一个默认选中选项,此处会用到这个)    
    var ks = "对应下面所说的value值";
    //初始化    
    var demo1 = xmSelect.render({
        //绑定元素
        el: '#ks',
        //监听选中选项动作
        on: function(data){
            //当前选中数据
            var arr = data.arr;
            if(arr !='' && arr !=undefined){
                //操作逻辑
            }
        }
        //工具栏
        toolbar: {show:true,list: ['CLEAR']},
        filterable: false,
        //分页数据设置
        paging: true,
        pageSize: 5,
        pageRemote: true,
        //开启单选
        radio: true,
        //数据处理
        remoteMethod: function (val, cb, show, pageIndex) {
            //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
            $.ajax({
                url: '异步请求地址',
                type: 'POST',
                crossOrigin: false,
                dataType: 'json',
                cache: false,
                async: false,
                data: {
                    name: val,//搜索条件
                    page: pageIndex,//页码
                    ks:ks//编辑时使用(结合后面selected:true表示默认选中  selected:false   表示默认不选中,就可以实现在编辑的时候,一进入页面就会有默认选中的值)
                },

                //接收回传参数
                success: function (data) {
                    var count = data.count;
                    var Pages = Math.ceil(count / 5);
                    var res = data.data;
                    setTimeout(function () {
                        //需要回传一个数组
                        cb(res, Pages)
                    }, 100)
                },

                error: function (data) {
                    //这里是error的处理
                    cb([], 0);
                }
            });
        },
    });
})

 

异步请求返回数据格式:

返回参数:value(相当于下拉数据主键:比如id)   特别注意:xmselect中一定数组中的一定是value:name对应出现,否则会出现一个神奇的现象:点击选中一个,结果全选中,这是因为数组中没有value作为key的数组,组件就会认为返回的所有数据(多个数组)是一个单数组

所以正确的格式是:

数组格式:

数组详情:

注释:selected:true  表示默认选中  selected:false   表示默认不选中

layui框架使用 xmselect 数据异步加载,可搜索数据 监听选择动作_第1张图片

你可能感兴趣的:(layui,javascript,前端,ajax,php)