学校列表管理界面
这是一个用于展示学校列表的数据管理页面，采用Java与JSP技术实现，包括数据表格展示、实时数据更新及学校信息增删改查等功能。
data-table
render
data: 'liveCamera',
render: function (data,
type, row) { /*渲染数据，重新定义*/
if (data == "1") {
return "已开通";
} else {
return "未开通";
}
}
完整代码：
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../../inc/tags.jsp" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String wsPath = "ws://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<head>
<jsp:include page="../../inc/headTag.jsp"></jsp:include>
<base href="<%=basePath%>">
<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link href="assets/plugins/DataTables/css/dataTables.bootstrap.min.css"
rel="stylesheet"/>
<link href="assets/plugins/DataTables/css/responsive.bootstrap.min.css"
rel="stylesheet"/>
<link href="assets/plugins/DataTables/css/data-table.css"
rel="stylesheet"/>
<!-- ================== END PAGE LEVEL STYLE ================== -->
<link href="resources/plugin/layer/skin/layer.css" rel="stylesheet"/>
<style>
.content {
margin-left: 0 !important
}
table.dataTable thead .sorting_asc:after {
content: "";
}
table.dataTable thead .sorting_desc:after {
content: "";
}
table.dataTable thead .sorting:after {
content: "";
}
</style>
</head>
<body class="pace-done">
<!-- <div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%"
data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div> -->
<!-- begin #page-loader -->
<div id="page-loader" class="fade in">
<span class="spinner"></span>
</div>
<!-- end #page-loader -->
<!-- begin #page-container -->
<div id="page-container"
class="fade page-sidebar-fixed page-header-fixed in gradient-enabled">
<!-- begin #header -->
<jsp:include page="head.jsp"></jsp:include>
<!-- end #header -->
<jsp:include page="menu.jsp"></jsp:include>
<!-- begin #content -->
<!-- <div id="content" class="content"> -->
<div id="content" style="margin-left:220px;padding:20px 25px;">
<!-- begin breadcrumb -->
<ol class="breadcrumb pull-right">
<li><a href="javascript:;">菜单导航</a></li>
<li><a href="javascript:;">数据管理</a></li>
<li class="active">学校列表</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">
数据管理
<small>学校列表</small>
</h1>
<!-- end page-header -->
<!-- begin row -->
<div class="row">
<!-- begin col-12 -->
<div class="col-md-12 ui-sortable">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;"
class="btn btn-xs btn-icon btn-circle btn-default"
data-click="panel-expand"><i class="fa fa-expand"></i></a> <a
href="javascript:;"
class="btn btn-xs btn-icon btn-circle btn-success"
data-click="panel-reload"><i class="fa fa-repeat"></i></a> <a
href="javascript:;"
class="btn btn-xs btn-icon btn-circle btn-warning"
data-click="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
<h4 class="panel-title">学校列表</h4>
</div>
<div class="panel-body">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="data-table"
class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>学校ID</th>
<th>学校名称</th>
<th>学校主页</th>
<th>数据平台地址</th>
<th>摄像头看课堂直播</th>
<th>手机看课堂直播</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
<%--<a href="" id="addSchool" class="btn btn-success m-r-5">
<i class="fa fa-plus"></i> 增加学校
</a>--%>
<%--<table:addRow url="/schoolForm" title="学校"></table:addRow>--%>
<%--<table:addRow url="/schoolForm?schoolId=32010020160623101712913010yki56y"
title="学校"></table:addRow>--%>
<div class="progress progress-striped active" hidden
id="progress">
<div class="progress-bar progress-bar-success" style="width: 0%"></div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-12 -->
</div>
<!-- end row -->
</div>
<!-- end #content -->
<!-- begin #footer -->
<jsp:include page="foot.jsp"></jsp:include>
<!-- end #footer -->
<!-- begin #theme -->
<jsp:include page="theme.jsp"></jsp:include>
<!-- end #theme -->
</div>
<!-- end page container -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="assets/plugins/pace/pace.min.js"></script>
<!-- <script src="assets/plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="assets/plugins/DataTables/js/dataTables.bootstrap.min.js"></script>
<script src="assets/plugins/DataTables/js/dataTables.responsive.min.js"></script> -->
<script
src="resources/plugin/dataTables/jquery.dataTables.min.js"></script>
<script
src="resources/plugin/dataTables/dataTables.buttons.min.js"></script>
<script src="assets/plugins/DataTables/js/dataTables.fixedHeader.js"></script>
<script src="assets/js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script src="resources/plugin/layer/layer.js"></script>
<script src="resources/js/common.js"></script>
<script src="resources/js/schoolManage/schoolManage.js"></script>
<script>
var sessionId;
$(document).ready(function () {
App.init();
TableManageDefault.init();
var webSocket = new WebSocket('<%=wsPath%>websocket');
webSocket.onerror = function (event) {
onError(event);
};
webSocket.onopen = function (event) {
onOpen(event);
};
webSocket.onmessage = function (event) {
onMessage(event);
};
function onMessage(event) {
if ((event.data).indexOf("%") != -1) {
$('.progress-bar').css('width', event.data);
$('.progress-bar').html(event.data);
} else {
sessionId = event.data;
}
}
function onOpen(event) {
}
function onError(event) {
}
});
var handleDataTableDefault = function () {
"use strict";
if ($("#data-table").length !== 0) {
var schoolId = '${schoolId}';
var e;
var buttons = new Array();
if (null == schoolId || '' == schoolId || typeof (schoolId) == undefined) {
e = $("#data-table").DataTable({
dom: '<l<fB><t>ip>',
buttons: [{
text: '新增',
className: 'btn btn-success m-r-5',
action: function (e, dt, node,
config) {
//openDialog(title, url, width, height, target)
openDialog("添加学校",
"schoolForm", "800px",
"500px")
}
}],
serverSide: true,
"ajax": {
"url": 'getSchoolList.json', /*请求地址*/
"type": "POST", /*请求类型*/
"dataSrc": "data", /*指定返回结果中data 源*/
"data": function (d) { /*增加请求数据*/
return schoolManage.getQueryCondition(d);
/* d.extra_search = $('#extra').val();*/
}
},
columns: [
{
data: 'schoolId'
},
{
data: 'schoolName'
},
{
data: 'schoolHome'
},
{
data: 'bpmServerUrl'
},
{
data: 'liveCamera',
render: function (data,
type, row) { /*渲染数据，重新定义*/
if (data == "1") {
return "已开通";
} else {
return "未开通";
}
}
},
{
data: 'liveMobile',
render: function (data,
type, row) { /*渲染数据，重新定义*/
if (data == "1") {
return "已开通";
} else {
return "未开通";
}
}
},
{
data: 'schoolId'
}],
'language': {
"sProcessing": "正在加载数据...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条 (共 _MAX_ 条记录)",
"sInfoEmpty": "没有检索到数据",
"sInfoFiltered": "数据表中共 _MAX_ 条记录",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
responsive: true,
'autoWidth': true,
'iTabIndex': 1,
autoFill: true,
"bPaginate": true
});
} else {
e = $("#data-table").DataTable({
dom: '<l<fB><t>ip>',
buttons: buttons,
serverSide: true,
"ajax": {
"url": 'getSchoolList.json', /*请求地址*/
"type": "POST", /*请求类型*/
"dataSrc": "data", /*指定返回结果中data 源*/
"data": function (d) { /*增加请求数据*/
return schoolManage.getQueryCondition(d);
/* d.extra_search = $('#extra').val();*/
}
},
columns: [
{
data: 'schoolId'
},
{
data: 'schoolName'
},
{
data: 'schoolHome'
},
{
data: 'bpmServerUrl'
},
{
data: 'liveCamera',
render: function (data,
type, row) { /*渲染数据，重新定义*/
if (data == "1") {
return "已开通";
} else {
return "未开通";
}
}
},
{
data: 'liveMobile',
render: function (data,
type, row) { /*渲染数据，重新定义*/
if (data == "1") {
return "已开通";
} else {
return "未开通";
}
}
},
{
data: 'schoolId',
render: function (data, type, row) { /*渲染数据，重新定义*/
/*"openDialog(\"镜头设备\", \"/device_lens/form\", \"800px\", \"500px\")"*/
var addButton = '<button class=\"btn btn-primary btn-xs m-r-5\" data-toggle=\"tooltip\" '
+ 'data-placement=\"left\" onclick=\"'
+ 'openDialog(\'编辑学校\', \'schoolForm?schoolId='
+ data
+ '\', \'800px\', \'500px\')'
+ '\" title=\"\" data-original-title=\"编辑\">'
+ '<i class=\"fa fa-edit\"></i> 编辑</button>';
var deleteBtn = '<button class=\"btn btn-danger btn-xs m-r-5\" data-toggle=\"tooltip\" '
+ 'data-placement=\"left\" onclick=\"'
+ 'confirmx(\'确定删除吗？\',\'schoolDelete?schoolId='
+ data
+ '\')'
+ '\" title=\"\" data-original-title=\"删除\">'
+ '<i class=\"fa fa-times\"></i> 删除</button>';
return addButton + " "
+ deleteBtn;
}
}],
'language': {
"sProcessing": "正在加载数据...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条 (共 _MAX_ 条记录)",
"sInfoEmpty": "没有检索到数据",
"sInfoFiltered": "数据表中共 _MAX_ 条记录",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
responsive: true,
'autoWidth': true,
'iTabIndex': 1,
autoFill: true,
"bPaginate": true
});
}
}
};
var TableManageDefault = function () {
'use strict';
return {
init: function () {
handleDataTableDefault();
}
};
}();
</script>
</body>
</html>
扫一扫
5355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
