BootStrap Table对前台页面表格的支持实例讲解

前端之家收集整理的这篇文章主要介绍了BootStrap Table对前台页面表格的支持实例讲解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有

  

1)基本的还是jQuery

  

2)引入bootstrap

 3)引入bootstrap-table

2、页面的编写方式(建议)

3、具体的数据加载和处理都在js里面完成,具体的实现过程不用自己去写,bootstrap-table都写好了

代码的样式处理 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:"执行类型",{ field:"typeName",title:"模型类型",{ field:"price",title:"价格",{ field:"publishDate",title:"发布时间",formatter: function(v){ var date = new Date(v).format("yyyy-MM-dd hh:mm:ss"); return ""+date+""; } },{ field:"shortcutOperation",title:"快捷操作",formatter: function(v,r,i){ var str = "
"+ ""+ "
" if(r.status=='00'){ var str = "
"+ ""+ "
" } 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)相对应的设置参考官方文档:

  3)后面简单说一下具体的效果设置:在具体的单元格数据中可以使用formatter()方法来实现,其中存在3个值v,i分别是值,行数据,角标。具体的效果可以参考着bootstrap的方式来实现通过return的方式来给页面呈现不一样的效果,当然也可以设置直接设置效果通过cellStyle方法也是可以的!

  4)传参:这个根据个人的一个实现功能来做,不管有没有数据,后台传过去的不是null而是""。limit和offset是做分页处理需要传给后台 

4、然后就是后台的一个处理(很重要)

getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{ //设置相应数据格式 response.setContentType("application/json;charset=utf-8"); try { // 获取相应数据 Map modelList = modelManager .getModelPublishListData(limit,offset,modelName,typeId); return modelList; } catch (Exception e) { e.printStackTrace(); throw e; } finally { HibernateSessionFactory.closeSession(); } }

  说明:

  1)数据返回的形式:

map = new HashMap(); map.put("total","分页时采用的数据总条数");//这里可以单独写一个sql来实现总条数 map.put("rows","数据的list集合");//这里可以获取相对应的数据

注意:因为前台和字段名字要对应所以,list的泛型可以是对象的形式,也可以是Map的形式

sql.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造成的,其他框架略过

猜你在找的Bootstrap相关文章