需求描述: 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 表示默认不选中