Bootstrap学习笔记02-常用控件

1.表格

//overflow为设置滚动条, 超过设置的长度将出现滚动条显示内容
//该table配合Jquery进行动态往tbody添加表格内容  $("#tableId tbody")
<div class="row" style="position: relative;top: 50px;overflow-y:auto; overflow-x:auto; width:auto; height:500px;">
                <table id="cost_statistics_table" class="table table-hover table-bordered text-center">
                    <thead>
                        <tr style="background-color:dimgray;color:white">
                            <th>resourseId</th>
                            <th>服务器名</th>
                            <th>公网IP</th>
                            <th>内网IP</th>
                            <th>创建时间</th>
                            <th>计费起始时间</th>
                            <th>计费结束时间</th>
                            <th>月成本（元）</th>
                            <th>共用系数</th>
                            <th>实际成本（元）</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <div id="cost_tbody_null" style="position: absolute;left: 48%; top: 50px">
                            <label>页面无数据</label>
                        </div>
                    </tbody>
                </table>
            </div>

• jq代码

       //生成开始架设新服表格数据
function beginCreateListTable(data) {
    //清空tabel表格
    $("#begin_create_list_table tbody").empty();
    $.each(data, function (index, item) {
        var nameTd = $("<td></td>").attr("name", "name").append(item.name);
        var name2Td = $("<td></td>").attr("name", "name2").append(item.name2);
        var gsidTd = $("<td></td>").attr("name", "gsid").append(item.gsid);
        var lanipTd = $("<td></td>").attr("name", "lanip").append(item.lanip);
        var ipTd = $("<td></td>").attr("name", "ip").append(item.ip);
        var gs_portTd = $("<td></td>").attr("name", "gs_port").append(item.gs_port);
        var dbs_idTd = $("<td></td>").attr("name", "dbs_id").append(item.dbs_id);
        var pk_groupTd = $("<td></td>").attr("name", "pk_group").append(item.pk_group);
        var pk_group2Td = $("<td></td>").attr("name", "pk_group2").append(item.pk_group2);
        var start_timeTd = $("<td></td>").attr("name", "start_time").append(item.start_time);
        var lan_groupTd = $("<td></td>").attr("name", "lan_group").append(item.lan_group);
        var wss_portTd = $("<td></td>").attr("name", "wss_port").append(item.wss_port);

        $("<tr></tr>")
            .append(nameTd)
            .append(name2Td)
            .append(gsidTd)
            .append(lanipTd)
            .append(ipTd)
            .append(gs_portTd)
            .append(dbs_idTd)
            .append(pk_groupTd)
            .append(pk_group2Td)
            .append(start_timeTd)
            .append(lan_groupTd)
            .append(wss_portTd)
            .appendTo("#begin_create_list_table tbody");
    });
}

2.选择日期控件

• 下载bootstrap-datetimepicker插件, 并引入
• html页面代码

<div class="input-group date form_date" style="position: absolute;width: 120px;">
                    <input id="cost_datetimepicker" class="form-control input-sm" readonly="readonly"
                        placeholder="请选择" />
                    <span class="input-group-addon input-sm">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>

• js代码

    $('#cost_datetimepicker').datetimepicker({
        format: 'yyyymmdd',  //显示格式
        weekStart: 1,
        autoclose: true,
        startView: 2,
        minView: 2,
        forceParse: false,
        language: 'zh-CN'  //控件中文显示, 需引入插件
    });

3.模态框

//为模态框添加data-backdrop="static" 属性后可以去除点击背景关闭弹框
    <!-- 二次确认下架服务器弹框 -->
    <div class="modal fade" id="define_down_server_Modal">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" style="width: 400px;height: 150px;margin-top: 220px;">
                <div class="modal-header" style="text-align: center;font-size: large;height: 18px;">
                    <input id="down_server_hid_inp" type="hidden"></input>
                    <p style="margin-top: -15px;color: red;">确认下架？</p>
                </div>
                <div class="modal-body">
                    <div class="input-group date form_date" style="position: absolute;width: 120px;">
                        <input id="down_server_datetimepicker" class="form-control input-sm" readonly="readonly"
                            placeholder="请选择月份" />
                        <span class="input-group-addon input-sm">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                    <div style="position: relative; left: 150px;">
                        <label>成本将统计至该下架日期截止</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="downServerDefine()">确认</button>
                </div>
            </div>
        </div>
    </div>

• jq手动打开关闭模态框

$("#modalId").modal("show");   //打开
$("#modalId").modal("hide");    //关闭

4.按钮

<button id="look_month_cost_btn" type="button" class="btn btn-primary"
                        onclick="getCostForMonth()">查看月成本（按30天）</button>

5.input输入框

<div class="form-group">
              <label id="create_num_lab" class=" control-label">新服数量</label>
              <input id="create_num_inp" type="number" class="form-control" style="width: 40%;" placeholder="请输入">
            </div>

6.select下拉框

   <div class="input-group">
          <label id="server_lab" class="col-sm-2 control-label">服务器组</label>
          <select id="server_sel" name="gsgroup" class="form-control">
            <option value="">请先选择项目</option>
          </select>
        </div><br />

7.下拉操作按钮

• 效果
  

• html实现

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

• jq实现

 var transferLi = $("<li></li>")
                .append($("<a></a>")
                    .attr("onclick", "") //点击事件
                    .append($("<lable></lable>").addClass("glyphicon glyphicon-share-alt").append("转移")))
            //下架
            var downLi = $("<li></li>")
                .append($("<a></a>")
                    .attr("onclick", "downServerSecond(" + p + ",\"" + item.ServerResId + "\",\"" + "down" + "\")") //点击事件;
                    .append($("<lable></lable>").addClass("glyphicon glyphicon-arrow-down").append("下架")))
            var ul = $("<ul></ul>")
                .addClass("dropdown-menu")
                .append(transferLi)
                .append(downLi);
            var selectBtn = $("<div></div>")
                .addClass("btn-group")
                .append($("<button></button>")
                    .attr("type", "button")
                    .addClass("btn")
                    .addClass("btn-success")
                    .append("选择操作"))
                .append($("<button></button>")
                    .attr("type", "button")
                    .addClass("btn")
                    .addClass("btn-success")
                    .addClass("dropdown-toggle")
                    .attr("data-toggle", "dropdown")
                    .append($("<span></span>").addClass("caret")))
                .append(ul);
            var btnTd = $("<td></td>")
                .append(selectBtn);