bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>通用增删改查</title> <link href="/resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="/resources/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="/resources/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
<link href="/resources/plugins/select2/css/select2.min.css" rel="stylesheet"/> <link href="/resources/css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
<div id="toolbar">
<a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增类型</a>
<%--<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑类型</a>--%>
<a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除类型</a>
</div>
<table id="table"></table>
</div>
<!-- 新增 -->
<div id="createDialog" class="crudDialog" hidden>
<form onsubmit="return false">
<div class="form-group">
<select id="selectpid" class="form-group">
<option value="0">请选择父级</option>
<c:forEach items="${types}" var="type">
<option value="${type.id}" >${type.title}</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<label for="input1">标题</label>
<input id="input1" type="text" value="" class="form-control">
</div>
<div class="form-group">
<label for="input3">描述</label>
<input id="input3" type="text" value="" class="form-control">
</div> </form>
</div>
<script src="/resources/plugins/jquery.1.12.4.min.js"></script>
<script src="/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/resources/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/resources/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/resources/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/resources/plugins/select2/js/select2.min.js"></script> <script src="/resources/js/common.js"></script>
<script>
var $table = $('#table');
var servlet_url = "/manage/type/index";
$("#input1").val("ssss");
$(function() {
$(document).on('focus', 'input[type="text"]', function() {
$(this).parent().find('label').addClass('active');
}).on('blur', 'input[type="text"]', function() {
if ($(this).val() == '') {
$(this).parent().find('label').removeClass('active');
}
});
// bootstrap table初始化
// http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
$table.bootstrapTable({
url: servlet_url+'?m=ajax_all',
height: getHeight(),
striped: true,
search: true,
searchOnEnterKey: true,
showRefresh: true,
showToggle: true,
showColumns: true,
minimumCountColumns: 2,
showPaginationSwitch: true,
clickToSelect: true,
detailView: true,
detailFormatter: 'detailFormatter',
pagination: true,
paginationLoop: false,
classes: 'table table-hover table-no-bordered',
//sidePagination: 'server',
//silentSort: false,
smartDisplay: false,
idField: 'id',
sortName: 'id',
sortOrder: 'desc',
escape: true,
searchOnEnterKey: true,
maintainSelected: true,
toolbar: '#toolbar',
columns: [
{field: 'state', checkbox: true},
{field: 'id', title: '编号', halign: 'center',align:"center"},
{field: 'title', title: '标题', halign: 'center',align:"center"},
{field: 'pid', title: '父级ID', halign: 'center',align:"center"},
{field: 'description', title: '描述', halign: 'center',align:"center"},
{field: 'createTime', title: '创建时间', halign: 'center',align:"center",formatter: 'timeFormatter'}, {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
]
}).on('all.bs.table', function (e, name, args) {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
});
function timeFormatter(value,row,index){
return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");
}
function actionFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"><i class="glyphicon glyphicon-heart"></i></a> ',
'<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
'<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
//搞修改数据
$("#input1").val(row.title);
$("#input3").val(row.description);
$("#selectpid").val(row.pid);
alert($("#input1").val());
$.confirm({
title:"修改数据",
content:function(){
var self = this;
var h = $("#createDialog").html();
self.setContent($("#createDialog").html());
},
buttons:{
confirm:{
text:"确定",
action:function(){
alert($(".jconfirm-content form input")[0].value)
//发送修改后的数据到服务器端，更新数据库
// $.post(servlet_url+"?m=update",{
// id:row.id,
// title:$(".jconfirm-content form input")[0].value,
// pid:$(".jconfirm-content form select")[0].value,
// description:$(".jconfirm-content form input")[1].value
// },function(txt){
// //服务器端响应内容回调函数
// $.alert(txt.message);
// $("#createDialog").html(ht);
// $table.bootstrapTable('refresh');
// },"json")
}
},
cancle:{
text:"取消",
action:function(){
$("#createDialog").html(ht);
}
}
}
}) console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
removeByUniqueId = row.id;
alert('You click remove icon, row: ' + JSON.stringify(row));
$.confirm({
title:"提示",
content:"是否永久删除数据？",
buttons:{
confirm:{
text:"确定",
action:function(){
//执行删除操作
$.get(servlet_url+"?m=delete",{'id':row.id},function(txt){
$.alert(txt.message); $table.bootstrapTable('refresh');
},"json");
}
},
cancle:{
text:"取消"
}
}
})
console.log(value, row, index);
}
};
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
// 新增
var ht = $("#createDialog").html();
function createAction() { $("#createDialog").html("");
$.confirm({
type: 'dark',
animationSpeed: 300,
title: '新增系统',
content: ht,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () { var t =$("#input1").val();
var desc = $("#input3").val();
var pid = $("#selectpid").val();
alert(t+" "+desc);
if(t==""){
$.alert('标题不能为空');
}else{
$.get("/manage/type/index?m=add",{"title":t,"description":desc,"pid":pid},function(txt) { $("#createDialog").html(ht);
$.confirm({
title:"提示",
content:txt.message,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
$table.bootstrapTable('refresh');
}
}
}
});
},"json");
} }
},
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
}
// 编辑
function updateAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
$.confirm({
title: false,
content: '请至少选择一条记录！',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
} else {
$.confirm({
type: 'blue',
animationSpeed: 300,
title: '编辑系统',
content: $('#createDialog').html(),
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
$.alert('确认');
}
},
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
}
}
// 删除
function deleteAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
$.confirm({
title: false,
content: '请至少选择一条记录！',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
} else {
$.confirm({
type: 'red',
animationSpeed: 300,
title: false,
content: '确认删除该系统吗？',
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
var ids = new Array();
for (var i in rows) {
ids.push(rows[i].systemId);
}
$.alert('删除：id=' + ids.join("-"));
}
},
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
}
}
//原型链
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
</script>
</body>
</html>
bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）的更多相关文章
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- html上传图片后，在页面显示上传的图片
html上传图片后,在页面显示上传的图片 1.html <form class="container" enctype="multipart/form-data&q ...
- [转]bootstrap table本地数据使用方法
原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136 data对应columns进行组合 var columns = [ { field: ' ...
- bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...
- easyui-numberbox后台获取数据后，鼠标一点击就自动清空了
<input type="text" name="txtMeterInitData" id="txtMeterInitData" cl ...
- ajax获取数据后怎么去渲染到页面？
$.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...
- vue 从后台获取数据并渲染到页面
一.在 created中调用methods中的方法 二.在methods中通过vuex异步获取后台数据 三.在computed 中计算属性 四.页面中调用computed中的计算后的属性 来自为知笔记 ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- angular异步获取数据后在ngOnInit中无法获取，显示undefined解决办法
两种方法 1 通过*ngif动态加载要数据渲染的dom 2 通过路由导航resolve 第一种感觉太麻烦了,要是一个页面请求多个接口,那就不得不写多个*ngif,本人还是更倾向与第二种发法 具体步骤: ...
随机推荐
- 第53节:Java当中的IO流(上)
Java当中的IO流 在Java中,字符串string可以用来操作文本数据内容,字符串缓冲区是什么呢?其实就是个容器,也是用来存储很多的数据类型的字符串,基本数据类型包装类的出现可以用来解决字符串和基 ...
- Python 函数中参数的分类及使用
######################非固定参数################## #第一种方式:def send_alert(msg,*users):##*users 是非固定参数,将传过来 ...
- Spring 实现事务的三种方式
事务:保证数据的运行不会说A给B钱,A钱给了B却没收到. 实现事务的三种方式(重要代码): 1.aspectJ AOP实现事务: <bean id="dataSourceTransac ...
- 安卓之必须了解的实时通信（Socket）
Socket: 有服务器和客户端之分,其是对TCP/IP的封装,使用IP地址加端口,确定一个唯一的点.在Internet上的主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个Socket ...
- Redis 如何分析慢查询操作？
什么是慢查询 和mysql的慢SQL日志分析一样,redis也有类似的功能,来帮助定位一些慢查询操作. Redis slowlog是Redis用来记录查询执行时间的日志系统. 查询执行时间指的是不包括 ...
- 安装MySQL时候最后一步报无法定位程序输入点fesetround于动态链接库MSVCR120.dll
今天在装MySQL时到最后一步出现了一个问题[报无法定位程序输入点fesetround于动态链接库MSVCR120.dll]这是由什么原因引起的呢,其实是缺少一个vcredist_x64.exe插件 ...
- Redis（3）---Redis事务
Redis事务 Redis 通过 MULTI .EXEC. DISCARD 和 WATCH 四个命令来实现事务功能. MULTI :标记一个事务块的开始. EXEC: 执行所有事务块内的命令. DI ...
- 利用 ELK 搭建 Docker 容器化应用日志中心
利用 ELK 搭建 Docker 容器化应用日志中心 概述 应用一旦容器化以后,需要考虑的就是如何采集位于 Docker 容器中的应用程序的打印日志供运维分析.典型的比如SpringBoot应用的日志 ...
- mysql 开发基础系列11 存储引擎memory和merge介绍
一. memory存储引擎 memoery存储引擎是在内存中来创建表,每个memory表只实际对应一个磁盘文件格式是.frm. 该引擎的表访问非常得快,因为数据是放在内存中,且默认是hash索引, ...
- 使用 trash 避免 rm -rf 悲剧
昨晚做了一个令人痛心疾首的操作,rm -rf something,把我个人电脑里的重要文件夹给删掉了,懵逼了半天才缓过来.还好是个人文件,不对公司造成影响.这件事也让我意识到 rm -rf 确实是个高 ...