前言：这一篇讲解 bootstrap 小工具实例，自己遇到组件功能

一、下拉

1.1、 下拉模糊搜索并且多选

multiple data-max-options：多选个数
data-live-search：模糊搜索
class="form-control selectpicker bla bla bli" multiple


<div>
        <label for="prop_id1">玩家vip类型:</label>
        <select id="vip" name="vip" class="form-control selectpicker bla bla bli" multiple

                style="width: 150px;display:inline;" data-max-options="10" data-live-search="true">
            <option value="">所有</option>
            <option th:each="list:${vipList}" th:value="${list.code}" th:text="${list.name}"></option>
        </select>
    </div>

1.2、清除选中内容

$(".selectpicker").selectpicker('deselectAll');

1.3、下拉还原默认第一个下拉

$("#search_vip option:first").prop("selected","selected");

1.4、下拉清空

// 清空
$("#fish_id").find("option").length=0;
// 清空
$("#fish_id").find("option").remove();

1.5、js获取下拉多选框的多个值

1、
const obj = $("#search_advert_channel_user").val()
2、
obj = document.getElementsByName("radioHourDate");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);

1.6、编辑下拉框回显

单选：$('.selectpicker').selectpicker('val', ‘列表id’);

单选下拉框： $("#add_table_type").selectpicker('val',1).selectpicker('refresh');

多选下拉框：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);

1.7、下拉动态赋值或者新增下拉值

// 赋值需要加这个
$("#fish_id").find("option").remove();
// 新增下拉值
let sel2 = document.getElementById("fish_id");
$.each(data.fishList, function (index, item) {
	let option = document.createElement("option");
	ption.innerHTML = item.name;
	sel2.appendChild(option);
});
$('#fish_id').selectpicker('refresh');//动态加载

1.8、下拉重置某一个值

$("#search_user_type").selectpicker('val',1).selectpicker('refresh');

1.9、塞值

//（里面是text和value）
obj.options.add(new Option(items[i],items[i]))

二、多选按钮

2.1、js给多选按钮默认选中

$("input[name=appoint_people]").prop({"checked": false});

三、单选按钮

3.1、单选按钮回显

全选

$("#CheckedAll").click(function(){  
//$("[name=items]:checkbox").attr('checked',true);//只有第一次生效  
$("[name=items]:checkbox").prop('checked',true);//只有第一次生效  
     });  
  

//全不选

$("#CheckedNo").click(function(){  
//$("[name=items]:checkbox").attr('checked',false);//只有第一次生效  
$("[name=items]:checkbox").prop('checked',false);  
    });  

四、input输入框

4.1、获取整个表单的input信息值

// 获取表单的input值变成对象
 const data = $('#formSearch').serializeArray();
// 获取表单的input值变成字符串
 const data = $('#formSearch').serialize();

五、bootstrap表格

5.1、销毁bootstrap表格

$('#dataDetail').bootstrapTable('destroy');

六、其他

6.1、动态id 或者name

val是动态参数

function saveInterval(val) {
	let divId = '#divId' + val
}

使用规则

let valStr = $(addDiv)

6.2、查找某个div下面的input或者select

$(addDiv).find("select")
$(addDiv).find("input")

获取input下面第几个的值

obj.firstValue = inputAll[a].value;

6.3、键盘事件，追加元素

onkeydown="displayResult('prop_num3','prop_num33')"

//键盘感应事件
    function displayResult(id, idSpan) {
        $('#' + id).keyup(function () {
            var val = $('#' + id).val();
            if (val >= 1000 && val < 9999) {
                $('#' + idSpan).html("千");
            } else if (val >= 10000 && val < 99999) {
                $('#' + idSpan).html("万");
            } else if (val >= 100000 && val < 999999) {
                $('#' + idSpan).html("十万");
            } else if (val >= 1000000 && val < 9999999) {
                $('#' + idSpan).html("百万");
            } else if (val >= 10000000 && val < 99999999) {
                $('#' + idSpan).html("千万");
            } else if (val >= 100000000 && val < 999999999) {
                $('#' + idSpan).html("亿");
            } else {
                $('#' + idSpan).html("");
            }
        });
    }

给其追加清空

$('#' + idSpan).html("");

6.4、按钮点击颜色切换

js加载

    $("#chartBtnGroup .btn:first").click().addClass("active");

点击事件

    $("#chartBtnGroup").children().removeClass("active");

6.5、当前时分秒 -- 一天前时分秒 -- 一周前时分秒

    // 当前10位时分秒时间戳
    var myDateTime = Math.round(new Date().getTime()/1000).toString()
    // 一天
    var oneTime = myDateTime - 24 * 60 * 60
    // 七天
    var sevenTime = myDateTime - 24 * 60 * 60 * 7
    // 发送时间（24小时）
    $('#startSendTime').val(timestampToTime(oneTime));
    $('#endSendTime').val(timestampToTime(myDateTime));
    // 接收时间（一周）
    $('#startEventTime').val(timestampToTime(sevenTime));
    $('#endEventTime').val(timestampToTime(myDateTime));

七、组件

7.1、日期和日期+时间 控件

html

<div class="input-daterange input-group" id="search_time" style="width:300px;">
     <input type="text" class="form-control" name="start" id="startDate" autocomplete="off" />
     <span class="input-group-addon">至</span>
     <input type="text" class="form-control" name="end" id="endDate" autocomplete="off"/>
</div>

日期+时间 js

$('#startDeleteTime').datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        language: "zh-CN", //汉化
        todayBtn: "true",  //显示今天按钮
        autoclose: true,   //选择日期后自动关闭日期选择框
        todayHighlight: true,   //当天高亮显示
        minView: 0,   //显示到小时
        showMeridian: 0,//显示到小时
        pickerPosition: "bottom-left",
        startDeleteTime: new Date(new Date() - 1000 * 60 * 60 * 24 * 365),  //只显示一年的日期365天
        endDeleteTime: new Date()
    }).on('change', function (ev) {
        var startDeleteTime = $('#startDeleteTime').val();
        $("#endDeleteTime").datetimepicker('setStartDate', startDeleteTime);
        $("#startDeleteTime").datetimepicker('hide');
    });
    $('#endDeleteTime').datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        language: "zh-CN",
        todayBtn: "true",
        autoclose: true,
        todayHighlight: true,
        minView: 0,   //显示到小时
        showMeridian: 0,//显示到小时
        pickerPosition: "bottom-left"
    }).on('change', function (ev) {
        var endDeleteTime = $("#endDeleteTime").val();
        $("#startDeleteTime").datetimepicker('setReturnDate', endDeleteTime);
        $("#endDeleteTime").datetimepicker('hide');
    });

日期控件 js

var startDate = laydate.render({
        elem: '#startDate',
        type: 'date',
        min:new Date(new Date() - 1000 * 60 * 60 * 24 * 365).getTime(),
        max:new Date().getTime()
    });
    var endDate = laydate.render({
        elem: '#endDate',
        type: 'date'
    });
    startDate.config.done=function(value, date){
        endDate.config.min={
            year:date.year,
            month:date.month-1,//关键
            date:date.date
        }
    }
    endDate.config.done=function(value, date, endDate){
        startDate.config.max={
            year:date.year,
            month:date.month-1,//关键
            date:date.date
        }
    }

带时间限制的时间范围控件

var startSendTime = laydate.render({
        elem: '#startSendTime',
        type: 'date',
        min: new Date(new Date() - 1000 * 60 * 60 * 24 * 365).getTime(),
        max: new Date().getTime()
    });
    startSendTime.config.done = function (value, date) {
        endSendTime.config.min = {
            year: date.year,
            month: date.month - 1,//关键
            date: date.date
        }
    }
    var endSendTime = laydate.render({
        elem: '#endSendTime',
        type: 'date'
    });
    endSendTime.config.done = function (value, date, endSendTime) {
        startSendTime.config.max = {
            year: date.year,
            month: date.month - 1,//关键
            date: date.date
        }
    }

7.2、今日、昨日、本周、本月 日期控件

    <form id="formSearch" class="form-horizontal">
        <div class="form-group" style="margin-top:15px">

            <label class="control-label col-sm-1" for="search_time" nowrap>日期:</label>
            <div class="col-sm-3">
                <div class="input-daterange input-group" id="search_time" style="width:300px;">
                    <input type="text" class="form-control" name="start" id="startDate"/>
                    <span class="input-group-addon">至</span>
                    <input type="text" class="form-control" name="end" id="endDate"/>
                </div>
            </div>
            <label class="control-label col-sm-1" for="search_room_id">房间:</label>
            <div class="col-sm-3" style="width:200px;">
                <select id="search_room_id" class="form-control" style="width: 150px;" name="type">
                    <option value="-1" selected>所有</option>
                    <option th:each="list:${roomList}" th:value="${list.code}"
                            th:text="${list.name}"></option>
                </select>
            </div>
            <br><br>

            <div class="col-sm-3 radio-inline-style">
                <label class="radio-inline">
                    <input type="radio" name="radioDate" onclick="clickRadioDate(1)" checked> 今日
                </label>
                <label class="radio-inline">
                    <input type="radio" name="radioDate" onclick="clickRadioDate(2)"> 昨日
                </label>
                <label class="radio-inline">
                    <input type="radio" name="radioDate" onclick="clickRadioDate(3)"> 本周
                </label>
                <label class="radio-inline">
                    <input type="radio" name="radioDate" onclick="clickRadioDate(4)"> 本月
                </label>
            </div>
            
            <div class="col-sm-1" style="text-align:left;">
                <button type="button" style="margin-left:50px" id="btn_query"
                        th:onclick="'queryDownload()'" class="btn btn-primary">查询
                </button>
            </div>

        </div>
    </form>

7.3、Bootstrap公共加载table方法

function initTableClientPage(tId, url, queryParam, clumsFlow, isPage, sidePage, contentType) {
    let id = '#' + tId
    $(id).bootstrapTable('destroy');
    // 传输格式
    if (contentType === 'json') {
        contentType = 'application/json'
    } else if (contentType === 'form') {
        contentType = 'application/x-www-form-urlencoded'
    }

    $(id).bootstrapTable({
        url: url,         //请求后台的URL（*）
        method: 'post',                      //请求方式（*）
        contentType: contentType,
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: function (param) {
            var newParam = {};
            if (isPage) {
                newParam = {
                    page: (param.offset / param.limit) + 1,   //页码,
                    limit: param.limit,   //页面大小
                    sort: param.sort,        //排序字段
                    dir: param.order         //顺序
                };
            }
            return $.extend(queryParam, newParam);
        }, // 向后台传递的自定义参数
        sidePagination: sidePage,           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
        detailView: false,                   //是否显示父子表
        showExport: true,
        exportDataType: 'all',
        exportTypes: ['xlsx'],  //导出文件类型
        Icons: 'glyphicon-export icon-share',
        exportOptions: {
            fileName: document.title,  //文件名称设置
            worksheetName: 'sheet1',  //表格工作区名称
            tableName: document.title,
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
        },
        columns: clumsFlow,
        onLoadError: function () {
            layer.alert("加载失败！请刷新！", {icon: 2});
        },
        responseHandler: function (res) {
            if (res.code === 0) {
                if (sidePage === 'server') {
                    return {
                        "total": res.page.total,//总记录
                        "rows": res.page.list   //数据
                    };
                } else if(sidePage === 'client') {
                    return res.list;
                }
            } else {
                layer.alert(res.msg, {icon: 2});
            }
        },
    });
}