对于项目需求使用easyui和dwr框架,事后觉得easyui界面不是很喜欢而dwr非常的实用,目前bootstrap比较流行,想使用dwr ajax开源框架实现与bootstrap table的整合,而网上确实没有这方面的资料,于是自己动手编写。
查看bootstrap-table的API文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
里面有个ajax属性--A method to replace ajax call. Should implement the same API as jQuery ajax method
只要在js中重写ajax方法即可实现dwr-ajax异步请求。直接上写ajax方法的源码。
function getDwrJson(param) {
if (!param.url) return false;
var dwrFunc= eval(param.url);
dwrFunc(param, {
callback: function(data){
param.success(data);
},
exceptionHandler: function(){
param.error.apply(this, arguments);
}
});
}
jQuery.fn.bootstrapTable.defaults.ajax = getDwrJson;
html方面
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/interface/dataAction.js"></script>
$('#tb_departments').bootstrapTable({
url: 'dataAction.getUserInfo', //请求后台的URL
});
后台dwr源码
public Map<String ,Object> getUserInfo(Map<String,String> params){
/*for (Map.Entry<String, String> entry : params.entrySet()) {
System.out.println("key= " + entry.getKey() + " and value= " + entry.getValue());
}*/
try {
String currentPage = params.get("page");
String rows = params.get("rows");
String keyword= params.get("keyword");
String sort = params.get("sort");
String order = params.get("order");
EmpDao dao = new EmpDao();
Page page = new Page(currentPage,dao.getRowCount(keyword),rows);
List<Object> list = dao.getEmpList(keyword,page,sort,order);
Map<String ,Object> map = new HashMap<String, Object>();
map.put("total", page.getRowCount());
map.put("rows", list);
return map;
} catch (NumberFormatException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
便可像普通的table一样动态加载数据