BootStrap Table对前台页面表格的支持实例讲解
时间：2021-09-20 09:10:05 | 栏目：JavaScript代码 | 点击：次
1、bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css有
1）基本的还是jQuery
<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>
2）引入bootstrap
<script type="text/javascript" src="js/bootstrap.min.js?v=3.3.6"></script> <link rel="stylesheet" href="css/bootstrap.min14ed.css?v=3.3.6">
3）引入bootstrap-table
<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css">
2、页面的编写方式（建议）
<div class="table"> <table id="publish_model"></table> </div>
3、具体的数据加载和处理都在js里面完成，具体的实现过程不用自己去写，bootstrap-table都写好了
//这里是js的具体代码的样式处理
dynamicTable = $("#publish_model").bootstrapTable("destroy").bootstrapTable({
url: "model/getPublishModel",
striped: true,
pagination: true,
singleSelect: true,
clickToSelect: true,
pageNumber:1,
pageSize: 10,
pageList: [5, 10, 20],
sidePagination: "server",
queryParamsType: "limit",
queryParams: getPageMessage,
minimunCountColumns: 2,
height:$(window).height()*0.85,
columns:[{
field:"modelName",
title:"模型名称",
align: "center",
},{
field:"modelDescription",
title:"模型描述",
align: "center"
},{
field:"executeType",
title:"执行类型",
align: "center"
},{
field:"typeName",
title:"模型类型",
align: "center"
},{
field:"price",
title:"价格",
align: "center"
},{
field:"publishDate",
title:"发布时间",
align: "center",
formatter: function(v){
var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");
return "<span>"+date+"</span>";
}
},{
field:"shortcutOperation",
title:"快捷操作",
align: "center",
formatter: function(v,r,i){
var str = "<div class='btn-group'>"+
"<button id="+r.modelId+" class='btn btn-success btn-xs' onclick='applyReason(\""+r.modelId+"\")'>申请权限</button>"+
"</div>"
if(r.status=='00'){
var str = "<div class='btn-group'>"+
"<button class='btn btn-success btn-xs' style='background:#ccc;border-color:#ccc;' >已申请</button>"+
"</div>"
}
return str;
}
}]
});
//传递参数到后台
function getPageMessage(params){
var temp={
limit: params.limit,
offset: params.offset,
modelName:$("#model_name").val(),
typeId:$("#modelType").val()
};
return temp;
}
这里说明几个问题：
1）这里加入这部分（ bootstrapTable("destroy") ）的目的是页面存在刷新效果需要重新加载
2）相对应的设置参考官方文档：http://bootstrap-table.wenzhixin.net.cn/documentation/
3）后面简单说一下具体的效果设置：在具体的单元格数据中可以使用formatter()方法来实现，其中存在3个值v,r,i分别是值，行数据，角标。具体的效果可以参考着bootstrap的方式来实现通过return的方式来给页面呈现不一样的效果，当然也可以设置直接设置效果通过cellStyle方法也是可以的！
4）传参：这个根据个人的一个实现功能来做，不管有没有数据，后台传过去的不是null而是""。limit和offset是做分页处理需要传给后台
4、然后就是后台的一个处理（很重要）
@RequestMapping("/getPublishModel")
@ResponseBody
public Map<String, Object> getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{
//设置相应数据格式
response.setContentType("application/json;charset=utf-8");
try {
// 获取相应数据
Map<String, Object> modelList = modelManager
.getModelPublishListData(limit, offset, modelName,typeId);
return modelList;
} catch (Exception e) {
e.printStackTrace();
throw e;
} finally {
HibernateSessionFactory.closeSession();
}
}
说明：
1）数据返回的形式：
Map<String, Object> map = new HashMap<String,Object>();
map.put("total", "分页时采用的数据总条数");//这里可以单独写一个sql来实现总条数
map.put("rows", "数据的list集合");//这里可以获取相对应的数据
注意：因为前台和字段名字要对应所以，list的泛型可以是对象的形式，也可以是Map<String, Object>的形式
List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//这是我用hibernate执行的map结果会自动封装成Map
sql里面一定要设置别名，比如：m.modelId AS modelId等
2）返回的时候通过json的方式放回，这里不建议springmvc自动返回，建议通过PrintWriter的方式写出到前台，不然会出现json方面的错误。
5、展示效果
提示：搜索功能需要自己做，传入的参数也是通过上面的传入
6.问题：因为考虑到接送的传输问题，在bootstrap-table里面存在post请求的问题，这也是我一直没有解决的问题！
1）因为bootstrap-table对post请求进行了封装，在使用post请求的时候取不到数据（我也在研究这个问题，希望高人指点）
2）后台数据封装的字段名问题，必须要一样才可以，不用别名返回的是字段名1234。。这个是因为hibernate造成的，其他框架略过