1.for代码
其中:for=”inputEmail3”表示:当你点击label的标签体时,就等于点击了 id为inputEmail3的元素
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
演示:
2.input类型
所有input的type类型:
text button checkbox date datetime datetime-local img file hidden
month number password radio range reset search submit tel time url
week hidden
3.bootstrap-table中行单击、双击事件
//table行双击事件 单击click-row.bs.table
$('#table').on('dbl-click-row.bs.table', function(e, {
id
}, element) {
$(element).css({
"color": "blue",
"font-size": "16px;"
});
// alert(id);
$('#txt_announcementContentshow').val(id);
$('#showInfoModal').modal('show');
});
4.获取id值,两种方式一种使用row.id(下面主子表有例子),一种使用{id}
5.使用summernote富文本框时,除了css与js文件,还需要在项目中添加font文件夹
6.bootstrap-datetimepicker使用
html:
<a class="input-group date" id="datetimepickeradd">
<input type="text" class="form-control" id="nowdateadd" style="width: 150px; height: 30px;" />
<span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
js:
$("#nowdateadd").datetimepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN', //中文,需要引用zh-CN.js包
startView: 2, //月视图
minView: 2 //日期时间选择器所能够提供的最精确的时间选择视图
});
7.table主子表
html
<table id="table">
</table>
主要是js控制:
const $table = $('#table');
//初始化表
function initTable() {
$table.bootstrapTable({
url: 'http://issues.wenzhixin.net.cn/examples/bootstrap_table/data',
method: 'Get', //请求方式(*)
detailView: true, //父子表
sidePagination: 'server',
toolbar: '#toolbar', //工具按钮用哪个容器
pagination: true, //是否显示分页(*)
cache: false,
clickToSelect: true,
showRefresh: true, //是否显示刷新按钮
showColumns: true,
idField: 'id', //指定主键列
// showToggle:true,
// showPaginationSwitch: true, //是否显示选择分页数按钮
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 20, //每页的记录行数(*)
sidePagination: "server", //表示服务端请求
striped: true,
search: true,
// searchText:'123',//默认搜索内容
searchAlign: 'left',
columns: [
// {
// field: 'state',
// checkbox: true,
// align: 'center',
// valign: 'middle'
// },
{
field: 'id',
title: 'id',
}, {
field: 'name',
title: '用户名',
events: operateEvents,
sortable: false
}, {
field: 'price',
title: '价格',
sortable: true
}, {
field: 'operate',
title: '操作',
align: 'center',
sortable: false,
events: operateEvents,
formatter: operateFormatter
},
],
//注册加载子表的事件。注意下这里的三个参数!
onExpandRow: function(index, row, $detail) {
InitSubTable(index, row, $detail); //
}
}); // sometimes footer render error.
$table.on('all.bs.table', (e, name, args) => {
console.log(name, args);
});
}
//操作列的按钮添加及执行的事件
function operateFormatter(value, row, index) {
return [
'<a class="edit" href="javascript:void(0)" title="Edit">',
'<button type="button" class="btn btn-info btn-xs" href="javascript:void(0)" >修改</button>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<button type="button" class="btn btn-danger btn-xs" href="javascript:void(0)">删除</button>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function(e, value, row, index) {
//弹出模态框修改,传需要修改行的id值
$("#txt_memberTelEdit").val(row.name);
$("#memberInfoId").val(row.id);
$('#editInfoModal').modal('show');
},
'click .remove': function(e, value, row, index) {
//弹出模态框删除确认,传需要删除行的id值
$("#deleteInfoId").val(row.id); // 将模态框中需要删除的大修的ID设为需要删除的ID
$("#deleteInfoModal").modal();
// $table.bootstrapTable('remove', {
// field: 'id',
// values: [id]
// });
},
};
//初始化子表格(无线循环)
function InitSubTable(index, row, $detail) {
// alert(row.id);
//var parentid = row.disIsbn;
$detail.html('<table></table>').find('table');
var html = "";
//
html += "<table class='table' style='align: center;'>";
html += "<thead>";
html += "<tr>";
html += "<th>手机号</th>";
html += "<th>用户名</th>";
html += "<th>公司名</th>";
html += "<th>状态</th>";
html += "</tr>";
html += "</thead><tbody>";
//临时数据
html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td><button type='button' class='btn btn-primary btn-xs' onclick='showInfo(" + row.id + ")'>详细</button></td></tr>";
html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td><button type='button' class='btn btn-primary btn-xs' onclick='showInfo(" + row.id + ")'>详细</button></td></tr>";
html += '</tbody></table>';
$detail.html(html); // 关键地方
//下面是动态加载数据,还没有试
// $.ajax({
// //StationAction
// url: "/test/StationAction",
// type: 'GET',
// //url : "/WebOne/servlet/StationServlet",
// dataType: "json",
// success: function(data) {
// html += "</thead><tbody>";
// //遍历站点信息
// var values = eval(data);
// //遍历站点信息
// $.each(values, function(n, value) {
// console.info('信息' + n + value);
// html += "<tr><td>" + row.id + "</td><td>" + row.name + "</td><td>" + row.price + "</td><td>" + row.operate + "</td></tr>";
// });
// html += '</tbody></table>';
// $detail.html(html); // 关键地方
// }
//
// });
};