• bootstrapTable


    bootstrap样式比较好看,现项目中使用,做一下记录,备忘。

    引入文件:

    [html] view plain copy
     
    1. <link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap.min.css" />  
    2. <link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap-table.min.css" />  
    3. <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>  
    4. <script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>  
    5. <script type="text/javascript" src="/js/bootstrap/js/bootstrap-table.min.js"></script>  
    6. <script type="text/javascript" src="/js/bootstrap/js/bootstrap-table-zh-CN.js"></script>  


    html代码

    [html] view plain copy
     
    1. <table id="gravidaTable">  
    2.     <thead>  
    3.         <tr>  
    4.             <th data-field="id" data-checkbox="true">ID</th>  
    5.             <th data-field="name">姓名</th>  
    6.             <th data-field="phoneNo">手机号</th>  
    7.             <th data-field="dueDate">预产期</th>  
    8.             <th data-field="assess" data-formatter="assessColumn">风险等级</th>  
    9.             <th data-field="infection" data-formatter="infectionColumn">有无传染病</th>  
    10.         </tr>  
    11.     </thead>  
    12. </table>  


    JS代码

    [javascript] view plain copy
     
    1. $('#gravidaTable').bootstrapTable({  
    2.         contentType: "application/x-www-form-urlencoded",  
    3.         method: 'post',  
    4.         dataType: "json",  
    5.         url: "/gravida/list",  
    6.         striped: true,  
    7.         pagination: true,  
    8.         singleSelect: false,  
    9.         clickToSelect:true,  
    10.         showColumns: false,  
    11.         search: false,   
    12.         silent: true,  
    13.         pageSize: 10,  
    14.         pageNumber:1,  
    15.         sidePagination: "server",  
    16.         queryParamsType:"limit",  
    17.         pageList:[10, 25, 50, 100],  
    18.         queryParams: gravidaTableParams,  
    19.         onDblClickRow:onDblClickRow  
    20.     });  
    21.       
    22.     function onDblClickRow(row)  
    23.     {  
    24.         $('#myModal').modal('show')  
    25.     }  
    [javascript] view plain copy
     
    1. //表格查询条件  
    2. function gravidaTableParams(params) {  
    3.      return {  
    4.         pageSize: params.limit,  
    5.         pageNumber: params.pageNumber  
    6.      };  
    7. }  

    bootstrapTable自定义条件查询。

    [javascript] view plain copy
     
    1. //风险颜色点击  
    2. function assessColor()  
    3. {  
    4.     var color=this.title;  
    5.     $('#gravidaTable').bootstrapTable('refresh',{  
    6.         query:{  
    7.             'assess':color  
    8.         }  
    9.     });  
    10. }  



  • 相关阅读:
    自己写的基类:Forms身份验证类、客户端事件类,序列化类下载
    毕业设计上线啦!跳蚤部落与基于Comet的WebIM系统开发
    域名解析碎片整理 《不同的子域名解析到同一服务器下不同的网站》
    Mac 命令行大全
    position 事件 zindex
    vue 微信公众号网页开发 跳转小程序 踩坑
    React 笔记
    我对架构师的理解(如何成为一个合格的架构师)
    听过我爸是李刚,你听说过我妈是上海人不?
    Lucene.NET打造站内搜索引擎
  • 原文地址:https://www.cnblogs.com/xiaoleiel/p/8316415.html
Copyright © 2020-2023  润新知