8/8

1.块状显示

<div class="row">  {# 一行分两列 #}
    <div class="col-lg-6 my_chart1">

        <div class="panel panel-default"> {# 加边框 #}
          <div class="panel-heading">
            <h3 class="panel-title">默认机房</h3>
          </div>

               内容。。。。。。。。。。

        </div>

    </div>

</div>

2.下拉框单选

          <div class="form-group">
              <div class="row">
                  <div class="col-lg-3" style="text-align: right">
                    <span style="color:red">* </span><label for="_title" class="control-label">业务线:</label>
                  </div>
                  <div class="col-lg-8">
                    <select id="add_group" name="group" class="form-control searchForm">
                        <option value="" selected>业务线</option>
                    </select>
                  </div>
              </div>
          </div>

initCombobox({
    renderTo: "add_group",
    url: "/api/app/group/?format=json&limit=10000",
    responseHandler: function(data) {
        var results = data.results;
        var lists = [];
        lists.push({text: '---', value: ''});
        for(var i = 0 in results) {
            var row = results[i];
            t = {text: row.name, value: row.name};
            lists.push(t);
        }
        return lists;
    }
});

3.复选下拉框

          <div class="form-group">
              <div class="row">
                  <div class="col-lg-3" style="text-align: right">
                    <label for="_title" class="control-label">负责人:</label>
                </div>
                <div class="col-lg-8">
                    <select id="_auth_username" name="user_name[]" class="form-control" multiple="multiple" style="width: 100%;">
                        <option value="">负责人名称</option>
                    </select>
                </div>
            </div>
          </div>

$.get("/api/user/user/?format=json&limit=10000", {}, function(data) {       {# 查询用户表得到用户的名称 #}
    var results = data.results;
    var lists = [];
    lists.push({id: "", text: '---', value: ''});
    for (var i = 0 in results) {
        var u = results[i];
        t = {id: u.username, text: u.username, value: u.username};
        lists.push(t);
    }
    $("#auth_username").empty();    {# 添加时：负责人获取下拉菜单 #}
    $("#auth_username").select2({
        placeholder: "",
        data: lists
    });


});

 

4.idc 弹框

<div class="dropdown col-lg-4">
    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
        {{ room_name }}
    </a>
    <ul class="list-group pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-close" aria-labelledby="dropdown" style="width: 300px;">
        <li class="dropdown-header">
            idc 机房信息
        </li>
        <li class="list-group-item">
            <div class="aa">机柜id : {{ rack_id }}</div>
            <div class="bb">U位 : {{ u }}</div>
            <div class="cc">型号 : {{ model_id }}</div>
            <div class="dd">序列号 : {{ sn }}</div>
        </li>
    </ul>
</div>

 

 

                                             　　　　　　　　　　　　　　　　　　　　　　　　　

 5.select的默认选项

  <div class="form-group">
    <div class="row">
        <div class="col-lg-3" style="text-align: right">
            <span style="color:red">* </span><label for="_title" class="control-label">是否超级管理员:</label>
        </div>
        <div class="col-lg-8">
            <select id="is_supseruser" name="is_superuser" class="form-control required">
                <option value="">---</option>
                <option value="0" selected>否</option>
                <option value="1">是</option>
            </select>
        </div>
    </div>
  </div>