데이터를 얻기 위한 부트스트랩의 예제 코드
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="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?1.1.11" rel="stylesheet"/>
<link href="/resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css?1.1.11" rel="stylesheet"/>
<link href="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css?1.1.11" rel="stylesheet"/>
<link href="/resources/plugins/waves-0.7.5/waves.min.css?1.1.11" rel="stylesheet"/>
<link href="/resources/plugins/jquery-confirm/jquery-confirm.min.css?1.1.11" rel="stylesheet"/>
<link href="/resources/plugins/select2/css/select2.min.css?1.1.11" rel="stylesheet"/>
<link href="/resources/css/common.css?1.1.11" 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?1.1.11"></script>
<script src="/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js?1.1.11"></script>
<script src="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js?1.1.11"></script>
<script src="/resources/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js?1.1.11"></script>
<script src="/resources/plugins/waves-0.7.5/waves.min.js?1.1.11"></script>
<script src="/resources/plugins/jquery-confirm/jquery-confirm.min.js?1.1.11"></script>
<script src="/resources/plugins/select2/js/select2.min.js?1.1.11"></script>
<script src="/resources/js/common.js?1.1.11"></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初始化
//
$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教程】
위 내용은 데이터를 얻기 위한 부트스트랩의 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7401
15
1630
14
1358
52
1268
25
1217
29
iPhone의 느린 셀룰러 데이터 인터넷 속도: 수정 사항
May 03, 2024 pm 09:01 PM
지연이 발생하고 iPhone의 모바일 데이터 연결 속도가 느립니까? 일반적으로 휴대폰의 셀룰러 인터넷 강도는 지역, 셀룰러 네트워크 유형, 로밍 유형 등과 같은 여러 요소에 따라 달라집니다. 더 빠르고 안정적인 셀룰러 인터넷 연결을 얻기 위해 할 수 있는 일이 몇 가지 있습니다. 수정 1 – iPhone 강제 다시 시작 때로는 장치를 강제로 다시 시작하면 셀룰러 연결을 포함한 많은 항목이 재설정됩니다. 1단계 – 볼륨 높이기 키를 한 번 눌렀다가 놓습니다. 그런 다음 볼륨 작게 키를 눌렀다가 다시 놓습니다. 2단계 - 프로세스의 다음 부분은 오른쪽에 있는 버튼을 누르는 것입니다. iPhone이 다시 시작되도록 하세요. 셀룰러 데이터를 활성화하고 네트워크 속도를 확인하세요. 다시 확인하세요 수정 2 – 데이터 모드 변경 5G는 더 나은 네트워크 속도를 제공하지만 신호가 약할 때 더 잘 작동합니다
Eclipse에 부트스트랩을 도입하는 방법
Apr 05, 2024 am 02:30 AM
5단계로 Eclipse에 Bootstrap을 소개합니다. Bootstrap 파일을 다운로드하고 압축을 풉니다. Bootstrap 폴더를 프로젝트로 가져옵니다. 부트스트랩 종속성을 추가합니다. Bootstrap CSS 및 JS를 HTML 파일로 로드합니다. 사용자 인터페이스를 향상하려면 Bootstrap을 사용해 보세요.
초지능의 생명력이 깨어난다! 하지만 자동 업데이트 AI가 등장하면서 엄마들은 더 이상 데이터 병목 현상을 걱정할 필요가 없습니다.
Apr 29, 2024 pm 06:55 PM
세상은 미친 듯이 큰 모델을 만들고 있습니다. 인터넷의 데이터만으로는 충분하지 않습니다. 훈련 모델은 '헝거게임'처럼 생겼고, 전 세계 AI 연구자들은 이러한 데이터를 탐식하는 사람들에게 어떻게 먹이를 줄지 고민하고 있습니다. 이 문제는 다중 모드 작업에서 특히 두드러집니다. 아무것도 할 수 없던 시기에, 중국 인민대학교 학과의 스타트업 팀은 자체 새로운 모델을 사용하여 중국 최초로 '모델 생성 데이터 피드 자체'를 현실화했습니다. 또한 이해 측면과 생성 측면의 두 가지 접근 방식으로 양측 모두 고품질의 다중 모드 새로운 데이터를 생성하고 모델 자체에 데이터 피드백을 제공할 수 있습니다. 모델이란 무엇입니까? Awaker 1.0은 중관촌 포럼에 최근 등장한 대형 멀티모달 모델입니다. 팀은 누구입니까? 소폰 엔진. 런민대학교 힐하우스 인공지능대학원 박사과정 학생인 Gao Yizhao가 설립했습니다.
미 공군이 주목할만한 최초의 AI 전투기를 선보였습니다! 전 과정에 걸쳐 장관이 직접 간섭 없이 테스트를 진행했고, 10만 줄의 코드를 21차례 테스트했다.
May 07, 2024 pm 05:00 PM
최근 군계는 미군 전투기가 이제 AI를 활용해 완전 자동 공중전을 완수할 수 있다는 소식에 충격을 받았다. 네, 얼마 전 미군의 AI 전투기가 최초로 공개되면서 그 미스터리가 드러났습니다. 이 전투기의 정식 명칭은 VISTA(Variable Stability Flight Simulator Test Aircraft)로 미 공군 장관이 직접 조종해 일대일 공중전을 모의 실험한 것이다. 5월 2일, 미 공군 장관 프랭크 켄달(Frank Kendall)이 X-62AVISTA를 타고 에드워드 공군 기지에서 이륙했습니다. 1시간의 비행 동안 모든 비행 작업은 AI에 의해 자동으로 완료되었습니다. Kendall은 "지난 수십 년 동안 우리는 자율 공대공 전투의 무한한 잠재력에 대해 생각해 왔지만 항상 도달할 수 없는 것처럼 보였습니다."라고 말했습니다. 그러나 지금은,
공장에서 일하는 테슬라 로봇, 머스크 : 올해 손의 자유도가 22도에 달할 것!
May 06, 2024 pm 04:13 PM
테슬라의 로봇 옵티머스(Optimus)의 최신 영상이 공개됐는데, 이미 공장에서 작동이 가능한 상태다. 정상 속도에서는 배터리(테슬라의 4680 배터리)를 다음과 같이 분류합니다. 공식은 또한 20배 속도로 보이는 모습을 공개했습니다. 작은 "워크스테이션"에서 따고 따고 따고 : 이번에 출시됩니다. 영상에는 옵티머스가 공장에서 이 작업을 전 과정에 걸쳐 사람의 개입 없이 완전히 자율적으로 완료하는 모습이 담겨 있습니다. 그리고 Optimus의 관점에서 보면 자동 오류 수정에 중점을 두고 구부러진 배터리를 집어 넣을 수도 있습니다. NVIDIA 과학자 Jim Fan은 Optimus의 손에 대해 높은 평가를 했습니다. Optimus의 손은 세계의 다섯 손가락 로봇 중 하나입니다. 가장 능숙합니다. 손은 촉각적일 뿐만 아니라
대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위
Apr 23, 2024 pm 03:28 PM
Llama3에 대해 새로운 테스트 결과가 공개되었습니다. 대형 모델 평가 커뮤니티 LMSYS가 공개한 대형 모델 순위 목록에서 Llama3는 5위에 올랐으며, 영어 부문에서는 GPT-4와 함께 공동 1위를 차지했습니다. 다른 벤치마크와는 그림이 다릅니다. 이 목록은 모델 간 1:1 대결을 기반으로 하며, 네트워크 전체의 평가자들이 각자의 제안과 점수를 내립니다. 결국 Llama3가 5위를 차지했고, GPT-4와 Claude3 Super Cup Opus의 세 가지 버전이 그 뒤를 이었습니다. 영어 싱글 목록에서는 Llama3가 Claude를 제치고 GPT-4와 동점을 기록했습니다. 이 결과에 대해 Meta의 수석 과학자 LeCun은 매우 기뻐했으며 트윗을 통해 다음과 같이 말했습니다.
부트스트랩에 아이디어를 도입하는 방법
Apr 05, 2024 am 02:33 AM
IntelliJ IDEA에 Bootstrap을 도입하는 단계: 새 프로젝트를 만들고 "웹 애플리케이션"을 선택합니다. "부트스트랩" Maven 종속성을 추가합니다. HTML 파일을 만들고 Bootstrap 참조를 추가합니다. Bootstrap CSS 파일의 실제 경로로 바꾸십시오. Bootstrap 스타일을 사용하려면 HTML 파일을 실행하세요. 팁: CDN을 사용하여 Bootstrap을 가져오거나 HTML 파일 템플릿을 사용자 지정할 수 있습니다.
부트스트랩을 사용하여 중재 효과를 테스트하는 방법
Apr 05, 2024 am 03:57 AM
부트스트랩 검정은 리샘플링 기술을 사용하여 통계 검정의 신뢰성을 평가하고 매개 효과의 유의성을 입증하는 데 사용됩니다. 먼저 직접 효과, 간접 효과 및 매개 효과의 신뢰 구간을 계산하고 두 번째로 유의성을 계산합니다. Baron and Kenny 또는 Sobel 방법에 따라 매개 유형을 결정하고 최종적으로 자연 간접 효과에 대한 신뢰 구간을 추정합니다.
