zoukankan      html  css  js  c++  java
  • Bootstrap-table学习笔记

    |  引入CSS文件

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">

    |  引入相关库

    我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <-- put your locale files after bootstrap-table.js -->
    <script src="bootstrap-table-zh-CN.js"></script>

    |  启用Bootstrap Table插件:

    官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:

    1,通过data属性的方式:

     
    <table data-toggle="table">
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
            </tr>
        </tbody>
    </table>
     

      

    2,通过js的方式:

    //只需要HTML中写下table标签,并设置id
    <table id="table"></table>

     

     
    $('#table').bootstrapTable({
        columns: [{
            field: 'id',    
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]
    });
     

    也可以通过url获取数据

     
    $('#table').bootstrapTable({
        url: 'data1.json',
        columns: [{
            field: 'id',    //与返回值的JSON数据的key值对应
            title: 'Item ID'  //列名
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }, ]
    });
     
  • 相关阅读:
    Go学习(5):集合
    Go学习(4):数组和切片
    Go学习(3):分支循环
    Go学习(2):基本语法
    Go学习(1):简介和配置
    input输入框只能输入数字而且开头不能为零
    JS 显示周 几和 月 日
    IntelliJ Idea 跳出括号并且光标移到末尾的快捷键
    不可小视的String字符串
    PrintWriter中的write与println方法居然就是这些区别
  • 原文地址:https://www.cnblogs.com/yanglang/p/6867690.html
Copyright © 2011-2022 走看看