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);