bootstrap-table对前台页面表格的支持-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

bootstrap-table对前台页面表格的支持

简介: 1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有   1)基本的还是jQuery   2)引入bootstrap  3)引入bootstrap-table 2、...

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

 7.相关问题处理

  1)由于bootstrap-table中的表头和内容是分两个table来显示的,导致很多时候出现缩小窗口过后,出现两个表格出现错误的问题处理方式如下:

$('#publish_model').bootstrapTable(); // init via javascript
    $(window).resize(function () {
        $('#publish_model').bootstrapTable('resetView');
    });

  说明:这个是利用jQuery对窗口方法的实现,来帮定的事件。通过bootstrap-table的bootstrapTable方法来实现窗口重置。

  

 

 

 




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: