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,本人还是更倾向与第二种发法 具体步骤: ...
随机推荐
- Kali学习笔记10：端口扫描详解（下）
上一篇先是介绍了UDP的端口扫描,又谈了TCP的不完全连接端口扫描 https://www.cnblogs.com/xuyiqing/p/9389276.html 接下来我们看看TCP的全连接端口扫描 ...
- 微信公众号接入之排序问题小记 Arrays.sort()
微信公众号作为强大的自媒体工具,对接一下是很正常的了.不过这不是本文的方向,本文的方向公众号接入的排序问题. 最近接了一个重构的小项目,需要将原有的php的公众号后台系统,转换为java系统.当然,也 ...
- Powermock2.0.0 详细 总结
目录 1 单元测试 2 Junit测试框架 2.1 Junit是什么 2.2 Junit 能做什么? 3 Junit测试的局限性 4 Mock技术 5 相关的Mock工具 5.1 Mockito.Ea ...
- 关于在运行java连接MongoDB时遇到的连接超时问题
在linux虚拟机里运行创建集合的时候,遇到了以下问题: 这里我最开始时使用的虚拟机IP地址进行连接,因此就出现了错误,连接超时. 在网上查了一些类似的问题,说要改驱动,后来才发现不是这个问题. 在本 ...
- AI - 机器学习常见算法简介（Common Algorithms）
机器学习常见算法简介 - 原文链接:http://usblogs.pwc.com/emerging-technology/machine-learning-methods-infographic/ 应 ...
- AI - 学习路径（Learning Path）
初见 机器学习图解 错过了这一篇,你学机器学习可能要走很多弯路 这3张脑图,带你清晰人工智能学习路线 一些课程 Andrew Ng的网络课程 HomePage:http://www.deeplearn ...
- Python编程Day5——可变与不可变类型、数据类型整合
一.可变与不可变类型1.可变类原值型:只改变,但id不变,证明就是在改变原值,是可变类型2.不可变类型:值改变,但id也跟着改变,证明是产生了新的值,是不可变类型 x= print(id(x)) x= ...
- Android6.0机型上调用系统相机拍照返回的resultCode值始终等于0的问题
版权声明:本文为博主原创文章,未经博主允许不得转载. 正常情况下调用系统相机拍照: 如果拍照后点击的是“确定”图标,返回的resultCode = -1(Activity.RESULT_OK): 如果 ...
- ZOJ Problem Set - 3713
题意:给定一个字符串,用字符串ASC2码16进制数输出 ,并在前面输出字符串长度的16进制,输出长度的规则是 先输出长度的二进制数的后七位的十六进制(如果左边还有1 则这在后七位前面加上个1再输出 ...
- TensorFlow和深度学习-无需博士学位（TensorFlow and deep learning without a PhD）
1. 概述 原文地址: TensorFlow and deep learning,without a PhD Learn TensorFlow and deep learning, without a ...