前情摘要：
有个小伙伴需要完成一个需求，就是点击输入框就动态加载一些数据下拉出来给客户选择。这个看上去很简单，他直接用了js去拼接HTML的option标签。这个在数据少只有一百多的测试环境上是没啥问题的，就是下拉列表有点长，基本都可以满足需求。但是上了生产环境，数据量一下子去到了十几万，界面上全部加载出来就挂掉了。无奈小伙伴去了其他组支援了，这个优化就落到了我的头上。
破题思路：
既然数据量太大，那肯定不能一次性加载这么多出来，自然而然的想到了分页和动态加载。经验丰富的大佬帮我找了个功能强大的组件selectPage，说这个用起来比较简单，实现起来比较方便，还甩了一个链接过来：https://terryz.gitee.io/selectpage/。
噢原来是selectPage的中文官网，里面详细地介绍了该怎么用这个组件。根据我的需求，大佬还用心的找到了这个：
说这个就可以实现分页和动态加载数据源了，只需要在data那里写上我的去到后台查询数据库的URL和在后台拼装返回的分页数据为json格式就行了。
开干：
根据大佬的方向，我首先导入了需要的静态文件：
自己鼓捣了一个晚上，数据一直拼装不对，也没对数据进行分页处理，所以页面一直返回说连接服务器时发生错误！
我以为是有什么静态文件还没引入或者版本不对才会报这个错误。第二次见到大佬，大佬一看就知道我的问题所在，让我写个分页的返回数据然后处理下格式。一试果然可以了：
输入框每次有东西输入都会传到后台去查数据库，后台的数据每次只返回十条到页面上，翻页的时候才会重新再回到后台去拿数据。这样就避免了数据一次性加载过多而出现卡慢的情况，下面是一些关键代码：
引入文件：
<script type="text/javascript" src="${basePath}/js/jquery-1.11.2.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${basePath}/js/selectpage.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/css/selectpage.css" />HTML代码
<input type="text" id="selectPage" name="bank">JS代码：
$('#selectPage').selectPage({//固定格式
showField : 'bankName',//下拉展示出来的名字
keyField : 'bankCode',//名字的值
searchField : 'selectPageText',//传进去的查询参数
dropButton : false,//关闭三角符号
pageSize : 10,//每页10条
data : '${basePath}/account/refundInfo_findBankDrctCodes.do',//后台获取数据的方法
params : function(){
var type = $("#accountcType option:selected").val();
return {
"type" : type//另外传的参数
};},
eAjaxSuccess : function(d){//固定格式
var result;
if(d) result = d.values.gridResult;
else result = undefined;
return result;
}
});
// $('#selectPage_text').removeAttr("class");
});后台代码：
public String findBankDrctCodes(){
JSONObject jsonObject = new JSONObject();
JSONObject jsonObject2 = new JSONObject();
JSONObject jsonObject3 = new JSONObject();
pager.setPageSize(pageSize);
pager.setCurrentPage(pageNumber);
pager = refundInfoService.findBankDrctCode(pager,selectPageText,type);//分页sql
bankdrctcodes = pager.getResultList();
jsonObject.put("pageSize", pageSize);
jsonObject.put("pageNumber", pageNumber);
jsonObject.put("totalRow", pager.getTotalSize());//数据总数
jsonObject.put("totalPage", pager.getTotalPage());//页码
jsonObject.put("list",bankdrctcodes);//展示的数据
jsonObject2.put("gridResult", jsonObject);//固定格式
jsonObject3.put("values", jsonObject2);//固定格式
outMessage(jsonObject3.toString());
return null;
}总结：
大佬说，很多技术你可以不会，但是一定要学会看文档，读懂人家写的东西并去模仿应用。
就像这一次的优化，不能因为是第一次用这个组件而直接说不会用。人家官网已经写得清清楚楚了，每一步该去怎么做，按照人家的步骤去做就可以了。最近一段时间，各种事情阻挡了我学习的脚步，慢慢地感觉很多东西落后太多了。日常搬砖又不注意细节，时不时有些低级的bug。
看看去年1024立的flag:
还是得好好学习的，干就完事了。