最近在项目啊开发中需要从下拉列表中获取游戏ID,而后台游戏数据有将近25万条,这种情况下是不可能实现一次性加载的,只能分批异步加载。找了很多插件,都没有合适的,也想过自己做一个插件,无奈时间有限,任务比较紧,只能借助第三方插件,缩短项目时间。最终找到了select2这个插件。
<link href="select2/select2.css" rel="stylesheet">
<link href="select2/select2-bootstrap.css" rel="stylesheet">
...
<select data-placeholder="请选择游戏..." class="select2" >
</select>
...
<script src="select2/select2.full.js"></script>
$(".select2").select2({
theme: "bootstrap",
allowClear: true,
placeholder: "请选择一个游戏",
ajax:{
url:"/analysis/search",
dataType:"json",
delay:250,
data:function(params){
return {
name: params.term,
page: params.page || 1
};
},
cache:true,
processResults: function (res, params) {
var games = res["data"]["games"];
var options = [];
for(var i= 0, len=games.length;i<len;i++){
var option = {"id":games[i]["gid"], "text":games[i]["gname"]};
options.push(option);
}
return {
results: options,
pagination: {
more:res["data"]["more"]
}
};
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1
}
});
后台使用flask编写的,代码如下:
@ANALYSIS.route("/search", methods=["GET"])
def search_games():
"""
获取游戏
:return:
"""
params = request.args
name = params.get("name", None)
page = params.get("page", 0)
page = int(page) - 1
skip = page * 50
data = dict()
if name:
games, count = get_games_by_name(name, skip)
data["games"] = games
data["count"] = count
else:
games, count = get_first_50_games(skip)
data["games"] = games
data["count"] = count
print data["count"]
more = page * 50 < data["count"]
data["more"] = more
return successify(data=data)
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有