美文网首页前端开发Web 前端开发 bootstrap-table
初探前端Table:boostrap-table 踩过的坑

初探前端Table:boostrap-table 踩过的坑

作者: 文叔_ | 来源:发表于2016-06-16 19:39 被阅读4535次

    最近在做前端的一些界面,做到table的时候发现boostrap-table(文翼大神http://bootstrap-table.wenzhixin.net.cn/ 自己拓展的table非常有用,欣然采纳),结果发现踩到了不少的坑(And finally I did it.很大原因是因为我自己实力差劲,我会努力学下去的阿),不过这个插件真的非常好用,其实我大概就实现了一个小小的功能。

    加载table的数据到boostrap-table。。。尽管你会觉得我很low,but I want to share it.

    Paste_Image.png

    mainly conclude as the points below:

    第一点:

      只有用url直接load数据的时候,才用data-toggle="table"这个属性。
    
    Paste_Image.png
      如果是用javascript加载数据的画,记得要把data-toggle="table"去掉,不然永远load不出数据。。。这个point takes make several hours..
    

    第二点:

      通过ajax请求下来的数据,直接解析相关的数组放到table就好了。
    
    Paste_Image.png
    但是当我要选择其他数据类型的时候,比如我的数据有(全部客户,新单客户,旧单客户)我点击按钮切换数据的时候再进行ajax请求,结果用同样的方法将数据放到table的data中,结果table完全没有任何反应。而且用boostrap-table:load这个方法也不起任何作用。
    
    后来才发现在装载data前,调用$('#customerTable').bootstrapTable('destroy');先销毁table才可以再次装载数据到table中。。。
    

    好了,没了,就这2个点,是不是很low?

    最后在网络请求之前,加入一个loading,请求后取消loading,参考了http://www.cnblogs.com/lxblog/p/3425599.html 几乎秒懂的。
    具体的代码可以参考https://github.com/WarrenJones/WorkSaving/tree/master/EBZCustomer

    写得很烂,真的

    还没下班,哎

    相关文章

      网友评论

      • 久绊梦醒魂未归_6662:在ie11中模态框使用bootstrap-table遇到问题了 当我点击关闭时模态框消失 表壳卡现
        久绊梦醒魂未归_6662:qq: 1789410124 求解答
      • 蒋敬阳:谢谢,对我有帮助!
      • xiaolizhenzhen:请问你在做这个页面的时候有没有出现表头与表身错位的现象?我的跟你的页面差不多,但是动态加载数据之后会出现表头与对应的列相差1px或者更多的现象,不知如何解决,我的表格是自适应的,就算自适应也不应该对不齐啊?
        二叔不二:我也遇到了这种情况,在网上搜解决的办法,有去掉table里data-height属性的,但是此时表头不固定,有注释掉bootstrap-table.js里一段代码的,但是表头还是不固定,总是不能做到对齐与固定同时的效果,最后,找了一天的解决办法,就是下载一个高版本的bootstrap-table.js,10以上的吧,什么都不要改,直接自动对齐
        xiaolizhenzhen: @文叔_ 嗯嗯,是的,正常页面加载下来,不同大小屏幕的错位情况不一样,小屏几乎看不出来,但是在表格删除某一行之后会特别明显
        文叔_:@xiaolizhenzhen 这个我没遇到过哦,是不是表的数据夹杂着数字?

      本文标题:初探前端Table:boostrap-table 踩过的坑

      本文链接:https://www.haomeiwen.com/subject/pogmdttx.html