LayUI-xmSelect API数据过多,分页展示、支持模糊匹配
【代码】LayUI-xmSelect 接口数据过多,分页展示、支持模糊匹配。
·
var _itemXmSel ;
_itemXmSel = xmSelect.render({
el: '#selectXInstructor',// 渲染对象
toolbar: {
show: true,
showIcon: false,
},// 工具条
tips: '请选择名称',// 默认提示, 类似于placeholder
filterable: true,// 是否开启搜索
searchTips: '请输入名称搜索',// 搜索提示
paging: true,// 是否开启自定义分页
prop: {
value: "jobnumber",// 展示Id 字段
name: "name",// 展示名称 字段
},// 自定义属性名称, 具体看下表
pageSize: 15,// 分页条数
pageRemote: true,// 是否开启远程分页
remoteSearch: true, // 是否开启自定义搜索 (远程搜索)
remoteMethod: function (val, cb, show, pageIndex) {
// val: 当前搜索值
// cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码
// show: 下拉框显示状态
// pageIndex: 分页下当前页码
$.get("API接口", {
page: pageIndex,
rows: 15,
key: val,// 搜索值
department: obj || '', // 其他参数
}, function (res) {
var _totalCount = res.count;// 总条数
var _data = res.data;// 当前页数据
var Pages = Math.ceil(_totalCount / 15);// 总页数
cb(_data, Pages);//
})
}// 自定义搜索回调函数
});
this._itemXmSel.setValue("");// 回显
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐




所有评论(0)