前言:这一篇讲解 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});
}
},
});
}