做下拉多选时候,formselects和我要回显查询的数据异步问题,但是官方文档的数据赋值之后没有回调
在数据赋值之后再回调渲染选中的信息
这些是官方给出的信息
/**
* 1.多选数据赋值
*
* formSelects.data(ID, type, config);
*
* @param ID xm-select的值
* @param type 'local' | 'server', 本地数据或者远程数据
* @param config 配置项
* arr 本地数据数组
* url 远程数据链接
* keyword 远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置
* linkage 是否为联动多选
* linkageWidth 联动多选没级宽度
*/
//以下代码可以在console中运行测试, 结果查看基础示例第一个
var formSelects = layui.formSelects;
两种形式渲染数据
//local模式
formSelects.data('select1', 'local', {
arr: [
{"name": "分组-1", "type": "optgroup"},
{"name": "北京", "value": 1},
{"name": "上海", "value": 2},
{"name": "分组-2", "type": "optgroup"},
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
});
//server模式
formSelects.data('select1', 'server', {
url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
keyword: '水果'
});
下边是选中赋值操作,粘贴的官方的
<div class="layui-form">
<select name="city" xm-select="example2_2">
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">天津</option>
</select>
<js>
layui.formSelects.value('example2_2', []); //赋值空数组, 清空所有
layui.formSelects.value('example2_2', [1, 2]); //赋值 北京,上海
layui.formSelects.value('example2_2', [5], true); //追加赋值 天津
layui.formSelects.value('example2_2', [1], false); //删除 已选择 [北京]
</js>
</div>
下边是我自己写的
formselects.config('select_base_cityname', {
keyName: 'title',//自定义返回数据中name的key, 默认 name
keyVal: 'id',//自定义返回数据中value的key, 默认 value
},true);
formselects.data('select_base_cityname', 'server', {
url: '/website/enterlake/scenerytags_listselect',
})
翻看formSelects-v4.js代码找到调用的这个data方法
Select4.prototype.data = function (id, type, config) {
if (!id || !type || !config) {
common.log('id: ' + id + ' param error !!!');
return this;
}
if (!common.check(id)) {
common.log('id: ' + id + ' not render !!!');
return this;
}
this.value(id, []);
this.config(id, config);
if (type == 'local') {
common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');
} else if (type == 'server') {
var datas = common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');//这里调用的ajax方法,原理就是在ajax的success方法之后回调
}
return this;
};
然后找到common.ajax发现有很多传参,只是上面的方法没有传回调参数
Common.prototype.ajax = function (id, searchUrl, inputValue, isLinkage, linkageWidth, isSearch, successCallback, isReplace) {
var _this5 = this;
var reElem = $('.' + PNAME + ' dl[xid="' + id + '"]').parents('.' + FORM_SELECT);
if (!reElem[0] || !searchUrl) {
return;
}
var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;
var ajaxData = $.extend(true, {}, ajaxConfig.data);
ajaxData[ajaxConfig.searchName] = inputValue;
//是否需要对ajax添加随机时间
//ajaxData['_'] = Date.now();
$.ajax({
type: ajaxConfig.type,
headers: ajaxConfig.header,
url: searchUrl,
data: ajaxConfig.dataType == 'json' ? JSON.stringify(ajaxData) : ajaxData,
success: function success(res) {
if (typeof res == 'string') {
res = JSON.parse(res);
}
ajaxConfig.beforeSuccess && ajaxConfig.beforeSuccess instanceof Function && (res = ajaxConfig.beforeSuccess(id, searchUrl, inputValue, res));
if (_this5.isArray(res)) {
var newRes = {};
newRes[ajaxConfig.response.statusName] = ajaxConfig.response.statusCode;
newRes[ajaxConfig.response.msgName] = "";
newRes[ajaxConfig.response.dataName] = res;
res = newRes;
}
if (res[ajaxConfig.response.statusName] != ajaxConfig.response.statusCode) {
reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text(res[ajaxConfig.response.msgName]);
} else {
reElem.find('dd.' + FORM_NONE).removeClass(FORM_EMPTY);
_this5.renderData(id, res[ajaxConfig.response.dataName], isLinkage, linkageWidth, isSearch, isReplace);
data[id].config.isEmpty = res[ajaxConfig.response.dataName].length == 0;
}
successCallback && successCallback(id);//然后这里发现有回调信息,只是上一个方法没有传参,然后我又回去修改Select4.prototype.data这个方法
ajaxConfig.success && ajaxConfig.success instanceof Function && ajaxConfig.success(id, searchUrl, inputValue, res);
},
error: function error(err) {
reElem.find('dd[lay-value]:not(.' + FORM_SELECT_TIPS + ')').remove();
reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text('服务异常');
ajaxConfig.error && ajaxConfig.error instanceof Function && ajaxConfig.error(id, searchUrl, inputValue, err);
}
});
};
下边是做了修改的
Select4.prototype.data = function (id, type, config,callback) {//这里增加了一个回调参数callback
if (!id || !type || !config) {
common.log('id: ' + id + ' param error !!!');
return this;
}
if (!common.check(id)) {
common.log('id: ' + id + ' not render !!!');
return this;
}
this.value(id, []);
this.config(id, config);
if (type == 'local') {
common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');
} else if (type == 'server') {
var datas = common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100',false,function (s) {这里加了两个参数,function是第七位,前边就加了个false
if(typeof callback == "function"){
callback(s);//判断一下,然后回调
}
});
}
return this;
};
前端也做相应更改,接收回调信息,然后调用自己封装好的方法
formselects.data('select_base_cityname', 'server', {
url: '/website/enterlake/scenerytags_listselect',
},function(e) {//这里对应上一个方法的callback
console.log(e)
// selectdata()//调用要渲染的数据
});