BootStrap学习2

1.for代码
其中：for=”inputEmail3”表示：当你点击label的标签体时，就等于点击了 id为inputEmail3的元素

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    </div>
</div>

演示：

2.input类型

所有input的type类型：

text button checkbox date datetime datetime-local img file hidden
month number password radio range reset search submit tel time url
week hidden

3.bootstrap-table中行单击、双击事件

//table行双击事件  单击click-row.bs.table
$('#table').on('dbl-click-row.bs.table', function(e, {
    id
}, element) {
    $(element).css({
        "color": "blue",
        "font-size": "16px;"
    });
    //                      alert(id);
    $('#txt_announcementContentshow').val(id);
    $('#showInfoModal').modal('show');
});

4.获取id值，两种方式一种使用row.id（下面主子表有例子），一种使用{id}

5.使用summernote富文本框时，除了css与js文件，还需要在项目中添加font文件夹

6.bootstrap-datetimepicker使用

html：

<a class="input-group date" id="datetimepickeradd">
    <input type="text" class="form-control" id="nowdateadd" style="width: 150px; height: 30px;" />
    <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</a>

js：

$("#nowdateadd").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    todayBtn: true,
    todayHighlight: true,
    showMeridian: true,
    pickerPosition: "bottom-left",
    language: 'zh-CN', //中文，需要引用zh-CN.js包
    startView: 2, //月视图
    minView: 2 //日期时间选择器所能够提供的最精确的时间选择视图
});

7.table主子表
html

<table id="table">
</table>

主要是js控制：

const $table = $('#table');
//初始化表
function initTable() {
    $table.bootstrapTable({
        url: 'http://issues.wenzhixin.net.cn/examples/bootstrap_table/data',
        method: 'Get', //请求方式（*）
        detailView: true, //父子表
        sidePagination: 'server',
        toolbar: '#toolbar', //工具按钮用哪个容器
        pagination: true, //是否显示分页（*）
        cache: false,
        clickToSelect: true,
        showRefresh: true, //是否显示刷新按钮
        showColumns: true,
        idField: 'id', //指定主键列
        //                  showToggle:true,
        //                  showPaginationSwitch: true, //是否显示选择分页数按钮
        pageNumber: 1, //初始化加载第一页，默认第一页
        pageSize: 20, //每页的记录行数（*）
        sidePagination: "server", //表示服务端请求 
        striped: true,
        search: true,

        //                  searchText:'123',//默认搜索内容
        searchAlign: 'left',
        columns: [
            //                  {
            //                      field: 'state',
            //                      checkbox: true,
            //                      align: 'center',
            //                      valign: 'middle'
            //                  }, 
            {
                field: 'id',
                title: 'id',
            }, {
                field: 'name',
                title: '用户名',
                events: operateEvents,
                sortable: false
            }, {
                field: 'price',
                title: '价格',
                sortable: true
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                sortable: false,
                events: operateEvents,
                formatter: operateFormatter
            },
        ],
        //注册加载子表的事件。注意下这里的三个参数！
        onExpandRow: function(index, row, $detail) {
            InitSubTable(index, row, $detail); //                          
        }
    }); // sometimes footer render error.

    $table.on('all.bs.table', (e, name, args) => {
        console.log(name, args);
    }); 
}

//操作列的按钮添加及执行的事件
function operateFormatter(value, row, index) {
    return [
        '<a class="edit" href="javascript:void(0)" title="Edit">',
        '<button type="button" class="btn btn-info btn-xs" href="javascript:void(0)" >修改</button>',
        '</a>&nbsp',
        '<a class="remove" href="javascript:void(0)" title="Remove">',
        '<button type="button" class="btn btn-danger btn-xs"  href="javascript:void(0)">删除</button>',
        '</a>'
    ].join('');
}

window.operateEvents = {
    'click .edit': function(e, value, row, index) {
        //弹出模态框修改，传需要修改行的id值
        $("#txt_memberTelEdit").val(row.name);
        $("#memberInfoId").val(row.id);
        $('#editInfoModal').modal('show');
    },

    'click .remove': function(e, value, row, index) {
        //弹出模态框删除确认，传需要删除行的id值
        $("#deleteInfoId").val(row.id); // 将模态框中需要删除的大修的ID设为需要删除的ID
        $("#deleteInfoModal").modal();

        //                      $table.bootstrapTable('remove', {
        //                          field: 'id',
        //                          values: [id]
        //                      });
    },

};

//初始化子表格(无线循环)
function InitSubTable(index, row, $detail) {
    //                  alert(row.id);
    //var parentid = row.disIsbn;
    $detail.html('<table></table>').find('table');
    var html = "";
    //
    html += "<table class='table' style='align: center;'>";
    html += "<thead>";
    html += "<tr>";
    html += "<th>手机号</th>";
    html += "<th>用户名</th>";
    html += "<th>公司名</th>";
    html += "<th>状态</th>";
    html += "</tr>";
    html += "</thead><tbody>";
    //临时数据
    html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td><button type='button' class='btn btn-primary btn-xs' onclick='showInfo(" + row.id + ")'>详细</button></td></tr>";
    html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td><button type='button' class='btn btn-primary btn-xs' onclick='showInfo(" + row.id + ")'>详细</button></td></tr>";
    html += '</tbody></table>';
    $detail.html(html); // 关键地方

    //下面是动态加载数据,还没有试
    //                      $.ajax({
    //                          //StationAction
    //                          url: "/test/StationAction",
    //                          type: 'GET',
    //                          //url : "/WebOne/servlet/StationServlet",
    //                          dataType: "json",
    //                          success: function(data) {
    //                  html += "</thead><tbody>";
    //                              //遍历站点信息
    //                              var values = eval(data);
    //                              //遍历站点信息
    //                              $.each(values, function(n, value) {
    //                                  console.info('信息' + n + value);
    //                  html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td>" + row.operate + "</td></tr>";
    //                              });
    //                              html += '</tbody></table>';
    //                              $detail.html(html); // 关键地方
    //                          }
    //
    //                      });
};