Bootstrap笔记-----Model增删改查02
前台页面以下javascript
分为css
Model-addhtml
Model-deletejava
Model-updatejquery
(注意与按钮关联)ajax
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/4/12
Time: 9:18
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>list</title>
<script src="/static/bootstrap/js/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!--bootstrapTable相关-->
<link rel="stylesheet" href="/static/bootstrap/bootstrapTable/bootstrap-table.min.css">
<script src="/static/bootstrap/bootstrapTable/bootstrap-table.js"></script>
<script src="/static/bootstrap/bootstrapTable/bootstrap-table-zh-CN.min.js"></script>
<!--jqueryui-->
<script src="/static/jqueryui/jquery-ui.js"></script>
<script src="/static/jqueryui/dialog.js"></script>
<script src="/views/user/list.js"></script>
</head>
<body>
<div class="row"style="height: 10%;">
</div>
<div class="row" >
<div class="col-lg-2"></div>
<div class="col-lg-8">
<!-- btns 要计算的高度采用.countHeight -->
<div id="" class="">
<div class="">
<div class="l dib countHeightForTable">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 添加
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#updateModel" onclick="getModelData()">
<i class="glyphicon glyphicon-edit"></i> 编辑
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#delModel">
<i class="glyphicon glyphicon-trash"></i> 删除
</button>
<button class="btn btn-sm btn-default" type="button" onclick="view()"><i class="glyphicon glyphicon-eye-open"></i>查看</button>
</div>
</div>
</div>
<table id="table1" data-classes="table table-hover "
data-search="true"
data-show-refresh="true"
data-show-columns="true"></table>
</div>
<div class="col-lg-2"></div>
</div>
<div class="row" style="height: 10%;"></div>
<!-- Modal add start -->
<form id="addForm" action="">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">姓名:</label>
<div class="col-xs-8">
<input type="text" name="username" placeholder="请输入姓名" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">密码:</label>
<div class="col-xs-8">
<input type="text" name="password" placeholder="请输入密码" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" onclick="submitData()">
提交添加
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
<!---Model add end ->
<!-- 模态框 信息删除确认 start-->
<div class="modal fade" id="delModel">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<!-- 隐藏须要删除的id -->
<input type="hidden" id="deleteHaulId" />
<p>您确认要删除该条信息吗？</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
id="deleteHaulBtn" onclick="del()">确认</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--静态框 信息删除确认 end-->
<!--model update start-->
<form id="updateForm" action="">
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="update">
模态框（Modal）--修改
</h4>
</div>
<div class="modal-body">
<div class="form-group hide">
<label class="control-label col-xs-3">id:</label>
<div class="col-xs-8">
<input type="text" name="id" id="upid" value="" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">姓名:</label>
<div class="col-xs-8">
<input type="text" name="username" id="upusername" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">密码:</label>
<div class="col-xs-8">
<input type="text" name="password" id="uppassword" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" onclick="updateUser()">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
<!--model update end-->
</body>
</html>
js代码以下json
$(function () {
initTable();
})
function initTable() {
$('#table1')
.bootstrapTable(
{
method : 'post',// 请求方式（*）
url : '/user/list',// 请求后台的URL（*）
cache : false, // 是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*）
sortable : false, // 是否启用排序
contentType: 'application/x-www-form-urlencoded',
pagination : true,// 是否显示分页（*）
queryParamsType: "limit",//查询参数组织方式
pageSize : 10, // 每页的记录行数（*）
pageList : [ 5, 10, 15 ], // 可供选择的每页的行数（*）
search:true,//搜索框
pageNumber:1,
striped : true, // 表格显示条纹
silent: true,
strictSearch:true,//
showColumns:true,// 是否显示全部的列
showRefresh:true,//刷新
showToggle : true, // 是否显示详细视图和列表视图的切换按钮
cardView : false, // 是否显示详细视图
detailView : false, // 是否显示父子表
toolbar : '#toolbar',
clickToSelect : true,
sidePagination : 'server',
queryParams : function(params){
console.info(params.offset);
return params;
},
columns : [
{field : 'stat',
width : 2,
checkbox : true
},
{
field : 'id',
title : 'id',
align : 'left',
valign : 'middle',
width : 200,
sortable : true,
visible:false
}
,
{
field : 'username',
title : '姓名',
align : 'left',
valign : 'middle',
width : 200,
sortable : true
}
, {
field : 'password',
title : '密码',
align : 'left',
valign : 'middle',
width : 50,
sortable : true
}],
onClickRow : function(row, $element){
//console.info(row);
},
onDblClickRow : function(row, $element){//双击
//console.info(row);
},
onLoadSuccess: function(data){ //加载成功时执行
console.info(JSON.stringify(data));
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
}
//刷新事件
function refreshTable(){
$('#table1').bootstrapTable('refresh');
}
//使用bootstrap model模块add
function submitData(){
var data = {};
var dataArray = $('#addForm').serializeArray();
if(dataArray.length>0){
for(i=0;i<dataArray.length;i++){
var input = dataArray[i];
var ele = $("input[name='"+input.name+"']");
if(ele.prop("disabled")!=true){
data[input.name] = input.value;
}
}
}
$.ajax({
type : 'post',
url : '/user/save',
dataType:'json',
data : data,
success : function(result) {
console.info(result);
$('#myModal').modal('hide');
}
})
}
//删除
function del(ids) {
if (!ids) {
var ids='';
var selected = $('#table1').bootstrapTable('getSelections');
if(selected.length>0){
for (i = 0; i < selected.length; i++) {
ids=ids+selected[i].id+',';
}
}
}
confirmDelete(ids)
}
function confirmDelete(ids){
$.ajax({
type : 'post',
url : '/user/delte?ids='+ids,
success : function(result) {
$('#delModel').modal('hide');
refreshTable();
}
})
}
//给Model获取值
function getModelData() {
var selected = $('#table1').bootstrapTable('getSelections');
var id=selected[0].id;
$.ajax({
type : 'post',
url : '/user/userById?id='+id,
dataType:'json',
success : function(result) {
// console.info(result);
// console.info(result.username)
$("#upid").val(result.id);
$("#upusername").val(result.username);
$("#uppassword").val(result.password);
}
})
}
//使用bootstrap model模块update
function updateUser(){
var data = {};
var dataArray = $('#updateForm').serializeArray();
if(dataArray.length>0){
for(i=0;i<dataArray.length;i++){
var input = dataArray[i];
var ele = $("input[name='"+input.name+"']");
if(ele.prop("disabled")!=true){
data[input.name] = input.value;
}
}
}
$.ajax({
type : 'post',
url : '/user/update',
dataType:'json',
data : data,
success : function(result) {
console.info(result);
$('#updateModel').modal('hide');
refreshTable();
}
})
}
事件操做后让model隐藏的方法 $('#updateModel').modal('hide');bootstrap
model修改高度和宽度数组
(1)修改宽度能够经过修改modal中的modal-dialog这个div宽度实现缓存
<div class="modal-dialog" style="width:600px">
2) 修改高度和宽度最好的办法是修改modal-body中添加的控件，设置控件的大小，modal会自动适应。
