个人向的前端的坑坑洼洼的记录（1）

这段时间在帮忙做一个前端界面，由于自己前端几乎是从零开始，在此记录一些鼓捣过程中的一些坑坑洼洼，一方面算是对前端知识的一些零散的记录，另一方面也能反省一下自己的学习方法。在具体实现的时候使用了较为流行且对新手友好的bootstrap框架和jquery库。

由于只是个人向不定期的总结，仅仅是方便个人回头反思，文章总体说不上有多系统。

此处为展示界面，在可选部分需要获取用户选择的时间段、主机名等参数，用户点击按钮提交后即可查看该主机在该时间段的状态。

时间段、主机名的获取用下拉选择栏实现。

下拉选择栏的实现：

使用bootstrap-select下拉列表插件，具体用的法与html的select标签无异。

<select class="selectpicker" >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

获取选中的选项：

$(document).ready(function() {
    $("button").click(function() {
        var a = $('.selectpicker option:selected').val();
        alert(a);
    });
});

bootstrap-select还能实现多选、改变选项样式等功能，内置一些添加选项、清空所选的方法，具体没用到这么复杂就不深入了。

实现时间日期选择：

使用bootstrap-datetimepicker插件。

<div class='input-group date' id='datetimepicker'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">  
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

绑定输入框，设置format标记，可选时间最小单位为1h

$(function() {
    var datetime = $('#datetimepicker').datetimepicker({
        format: 'dd MM yyyy - hh:ii',
        minuteStep: 60
    });

获取选定的时间：

$(document).ready(function() {
    $("button").click(function() {
    var datetime =$('#datetimepicker').data().date;
    alert(datetime);
    });
});
</script>

同样bootstrap-datetimepicker插件有设置日期格式、指定开始与结束日期的选项，提供了一系列显示、隐藏、更新时间选择器的方法。

动态添加生成表单

在配置界面，能让用户添加新的需要监控的主机，并能对现有的主机配置进行编辑与删除等操作。添加新的主机使用JQuery的append()方法进行文档的操作，添加新的表单元素。

$(function() {
    $("#addbtn").click(function() {
        $(".well").append(
            "<form class='form-inline' role='form' style='margin-top: 1em ;>" +
            "<div class='form-group'>" +
            "<label for='name' style='margin-left: 1em;'>主机名：</label>" +
            "<input type='text' class='form-control' id='name' placeholder='请输入主机名'>" +
            "<label for='ip' style='margin-left: 1em;'>ip地址：</label>" +
            "<input type='text' class='form-control' id='ip' placeholder='请输入ip地址'>" +
            "<label for='port' style='margin-left: 1em;'>端口号：</label>" +
            "<input type='text' class='form-control' id='port' placeholder='请输入端口号'>" +
            "<button class = 'del btn btn-default' style = 'margin-left: 2em;'>删除 </button>" +
            "</div>"+
            "</form>");
});

这里是把新元素在一个well中进行了添加。其中值得注意的是，使用append()方法新添加的元素需要重新绑定事件，此处使用的jquery版本为2.1.1，在版本1.7之前的bind()方法不在起作用，而使用on()方法替代。

以下函数绑定了del按钮的删除事件。

$(document).on("click",'.del',function(){
    $(this).parent().remove();
});