select2的远程加载非分页实例

 

$("#c01-select").select2({
ajax: {
url: "data.json",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
};
},
processResults: function (data) {

var items=data.mapList; //json数组
var itemList = [];
for(var i =0; i < items.length; i++){
itemList.push({id: items[i].id, text: items[i].name});
}

/或者

*$.each(items,function(index,item){

temList.push({id: item.id, text: item.name});

})*/
return {
results: itemList
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
说明:

1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名)

2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,
则返回data.res。这个与服务器返回json有关)

3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示
最大输入限制。

4.escapeMarkup字符转义处理

5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结
果的的text显示到下拉框里,当然你可以return repo.text+"1";等

6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版
严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

五.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
alert("你没有选中任何项");
}
if(reslist.length)
{
alert("你选中任何项");
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要在el-select中实现远程搜索分页的功能,可以考虑使用element-ui中的el-pagination分页组件。 以下是实现步骤: 1. 在el-select组件中添一个远程搜索的方法,该方法需要接收一个参数query,表示搜索关键字,同时需要返回一个Promise对象,该对象需要返回一个包含搜索结果的数组和总记录数的对象。 2. 在el-select组件中添一个选项属性:remote。如果remote属性为true,则表示启用远程搜索和分页功能。 3. 在el-select组件中设置一个选项属性:remote-method。该属性需要绑定远程搜索方法。例如: ```html <el-select v-model="value" remote :remote-method="remoteMethod"></el-select> ``` 4. 在el-select组件中添一个el-pagination分页组件,并绑定一个分页方法。例如: ```html <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination> ``` ```javascript data() { return { currentPage: 1, pageSize: 10, total: 0 } }, methods: { handleCurrentChange(page) { this.currentPage = page; this.remoteMethod(this.searchValue); }, remoteMethod(query) { return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 const data = { list: [], total: 0 }; resolve(data) }).then(res => { this.options = res.list; this.total = res.total; }) } } ``` 在上面的代码中,el-pagination组件的current-page属性绑定到了currentPage变量,表示当前页码。page-size属性绑定到了pageSize变量,表示每页显示的条目数。total属性绑定到了total变量,表示总记录数。current-change事件绑定到了handleCurrentChange方法,表示用户切换页码时会调用该方法。 5. 在远程搜索方法中,根据传入的参数进行搜索,并返回符合条件的数据和总记录数。例如: ```javascript remoteMethod(query) { this.searchValue = query; return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 setTimeout(() => { const data = { list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1), total: 100 }; resolve(data) }, 1000); }).then(res => { this.options = res.list; this.total = res.total; }) } ``` 在上面的代码中,我们使用setTimeout模拟了一个异步请求,返回符合条件的数据和总记录数。其中,list属性表示本页的数据,使用Array.from方法生成一个长度为pageSize的数组,每个元素的值等于当前页码和该元素在数组中的位置的乘积。total属性表示总记录数,假设总共有100条记录。 6. 在el-select组件中添一个选项属性:loading。该属性需要绑定一个loading变量,表示正在数据。例如: ```html <el-select v-model="value" remote :remote-method="remoteMethod" :loading="loading"></el-select> ``` ```javascript data() { return { loading: false } }, methods: { remoteMethod(query) { this.loading = true; return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 setTimeout(() => { const data = { list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1), total: 100 }; resolve(data) }, 1000); }).then(res => { this.options = res.list; this.total = res.total; this.loading = false; }) } } ``` 在上面的代码中,我们在远程搜索方法中设置了loading变量为true,表示正在数据。在异步请求完成后,我们将loading变量设置为false,表示数据完成。 这样,当用户输入关键字时,el-select组件会自动调用远程搜索方法进行搜索,并显示符合条件的数据。当用户切换页码时,el-pagination组件会自动调用分页方法更多数据。在数据时,el-select组件会显示一个loading动画,提示用户正在数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值