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,本人还是更倾向与第二种发法 具体步骤: ...
随机推荐
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
- Metasploit Framework（4）信息收集
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 使用场景: Kali机器一台:192.168.163. ...
- python学习的准备工作
1.python安装 1.下载: https://www.python.org/downloads/windows/ 2.安装: 安装很简单,就是下一步,只是在最后要勾选上 Add Python 3. ...
- java开发之多线程基础篇
首先我们先来了解下线程的生命周期上一张图: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(); 就绪状态( ...
- LockSupport浅析
最初想有没有必要写这类文章,网上相关的文章很多,有些更为透彻,自己再写一篇不免有重复造轮子的感觉. 但想想写文除了分享知识外也可以帮助自己总结归纳,也稍稍可以提高点自我满足感. 基本的线程阻塞原语,被 ...
- java提高（4）---数组增删 list删除 map删除
数组增删 集合删除 一.数组增删 package com.test; import java.util.List; import java.util.ArrayList; import java.ut ...
- sql server 备份与恢复系列二 事务日志概述
1.1 日志文件与数据文件一致性 在上一章备份与恢复里了解到事务日志的重要性,这篇重点来了解事务日志. 事务日志记录了数据库所有的改变,能恢复该数据库到改变之前的任意状态.在sql server实例 ...
- ④品茶看<Servlet&JSP>-EL表达式
前言 今早,概率课偷了下小懒写的: 泡一杯红茶,ACM集训前,写篇博客记录记录EL表达式. #EL介绍 ①EL 语法 ②访问JavaBean等 ③EL隐式对象 ④EL运算符 EL介绍 EL 全名为Ex ...
- Jvm运行时数据区
一:运行时数据区 Java虚拟机在执行Java程序的过程中会把它管理的内存分为若干个不同的数据区域.这些区域有着各自的用途,一级创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则依赖用户 ...
- C#4并行计算
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...