刚刚入手bootstrap框架，这个页面是html界面，纯bootstrap的表格，界面效果不是很美观，用了几个插件的弹出
效果图：
toastr插件，效果图：
sweetalert插件，效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<link href="css/toastr.css" rel="stylesheet" />
<link href="css/sweetalert.css" rel="stylesheet" />
<link href="css/bootstrap-treeview.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/sweetalert.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tableExport.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-export.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<script src="js/toastr.js"></script>
<title>知识库</title>
</head>
<body>
<style>
/* body{background-color:#C0C0C0} */
.treePanel {
height: 100px;
length: 50px;
}
#modifyMainStationWindow_header-innerCt {
height: 17px !important;
}
#addMainStationWindow_header-innerCt {
height: 17px !important;
}
.aa {
display: none;
}
</style>
<div id="container"
style="padding-top: 30px; padding-right: 60px; padding-left: 60px; margin-right: auto; margin-left: auto;">
<ul id="myTab" class="nav nav-tabs">
<li><a
href="/receiverShow/knowledge-bs/knowledge.html#container">知识库管理</a></li>
<li><a
href="/receiverShow/findKnowRevi_el.action#container">知识库审核</a></li>
<li><a
href="/receiverShow/findAskManagement_el.action#container1">提问管理</a></li>
</ul>
<div style="padding-left: 180px;">
<div>
<table>
<thead>
<tr>
<td style="padding-left: 90px;"><label>关键字</label></td>
<td style="padding-left: 10px;"><input type="text"
class="form-control" aria-describedby="sizing-addon2"
id="keyword" value="" placeholder="请输入关键字" /></td>
<td style="padding-left: 120px;"><label>标题</label></td>
<td style="padding-left: 10px;"><input type="text"
class="form-control" aria-describedby="sizing-addon2" id="title"
value="" placeholder="请输入标题" /></td>
<td style="padding-left: 120px;"><label>内容</label></td>
<td style="padding-left: 10px;"><input type="text"
class="form-control" aria-describedby="sizing-addon2"
id="content" value="" placeholder="请输入内容" /></td>
</tr>
</thead>
</table>
<div style="padding-left: 500px; padding-top: 10px;">
<button id="serch" class="btn btn-info">查询</button>
<button id="reset" class="btn btn-primy">重置</button>
</div>
</div>
</div>
<div class="col-md-3" style="height: auto;">
<div id="treepanel_id">
<iframe
src="/receiverShow/knowledge-bs/tree.jsp"
id="xjiframe" frameborder="0" allowtransparency="true"
style="border: none;" height="500px" width="366px"></iframe>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<div id="reportTableDiv" class="col-md-9" >
<table id="reportTable">
</table>
</div>
</div>
<!-- 新建弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt_departmentname">分类名称</label>
<input type="text" id="txt_departmentname" name="txt_departmentname" class="form-control" value="" οnclick="$('#treeview').show()" placeholder="分类名称">
<div id="treeview" style="display: none;">
</div>
</div>
<div class="form-group">
<label for="txt_parentdepartment">标题</label>
<input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="标题">
</div>
<div class="form-group">
<label for="txt_departmentlevel">关键词</label>
<input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="关键词">
</div>
<div class="form-group">
<label for="txt_statu">内容</label> <input type="text"
name="txt_statu" class="form-control" id="txt_statu" placeholder="内容">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 编辑弹出框 -->
<div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel_edit">编辑</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt_departmentname_edit">分类名称</label>
<!-- <input -->
<!-- type="text" name="txt_departmentname_edit" class="form-control" -->
<!-- id="txt_departmentname_edit" placeholder="分类名称"> -->
<input type="text" id="txt_departmentname_edit"
name="txt_departmentname_edit" class="form-control" value=""
οnclick="$('#treeview_edit').show()" placeholder="分类名称">
<div id="treeview_edit" style="display: none;">
</div>
</div>
<div class="form-group">
<label for="txt_parentdepartment_edit">标题</label> <input
type="text" name="txt_parentdepartment_edit" class="form-control"
id="txt_parentdepartment_edit" placeholder="标题">
</div>
<div class="form-group">
<label for="txt_departmentlevel_edit">关键词</label> <input
type="text" name="txt_departmentlevel_edit" class="form-control"
id="txt_departmentlevel_edit" placeholder="关键词">
</div>
<div class="form-group">
<label for="txt_statu_edit">内容</label> <input type="text"
name="txt_statu_edit" class="form-control" id="txt_statu_edit"
placeholder="内容">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
</button>
<button type="button" id="btn_submit_edit" class="btn btn-primary"
data-dismiss="modal">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 详情弹出框 -->
<div class="modal fade" id="myModal_details" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel_details">详情</h4>
</div>
<div class="modal-body">
<input type="hidden" value="" id="click_table_id">
<div class="form-group">
<label for="txt_title_details">标题</label>
<input type="text" name="txt_departmentname_details" class="form-control" id="txt_title_details" placeholder="标题">
</div>
<div class="form-group">
<label for="txt_clicks_details">点击次数</label>
<input type="text" name="txt_parentdepartment_edit" class="form-control" id="txt_clicks_details" placeholder="点击次数">
</div>
<div class="form-group">
<label for="txt_committime_details">提交时间</label>
<input type="text" name="txt_departmentlevel_edit" class="form-control" id="txt_committime_details" placeholder="提交时间">
</div>
<div class="form-group">
<label for="txt_content_details">内容</label> <input type="text" name="txt_statu_details" class="form-control" id="txt_content_details" placeholder="内容">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
</button>
<button type="button" id="btn_modify_content"
class="btn btn-primary">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>意见反馈
</button>
</div>
</div>
</div>
</div>
<!-- 意见反馈弹出框 -->
<div class="modal fade" id="myModal_content" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel_content">详情</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt_content_details">内容</label>
<!-- <input type="text" name="txt_statu" class="form-control" id="txt_content_details" placeholder="内容"> -->
<textarea class="form-control" id="txt_content_details_sub"
rows="3" placeholder="内容"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
</button>
<button type="button" id="btn_submit_content"
class="btn btn-primary">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$()
.ready(
function() {
$('#serch')
.click(
function() {
$
.ajax({
type : "POST",
url : "findReviewed.action",
// data: "workOrderTDTO1.keyword=" + escape($('#keyword').val()) + "&workOrderTDTO1.title=" + escape($('#title').val())+ "&workOrderTDTO1.content=" + escape($('#content').val()),
success : function(
data, msg) {
if (msg == "success") {
$(
'#reportTable')
.bootstrapTable(
'refresh',
{
url : '/receiverShow/findReviewed.action?'
+ "workOrderTDTO1.keyword="
+ escape($(
'#keyword')
.val())
+ "&workOrderTDTO1.title="
+ escape($(
'#title')
.val())
+ "&workOrderTDTO1.content="
+ escape($(
'#content')
.val())
});
}
},
error : function(
XMLHttpRequest,
textStatus,
thrownError) {
alert('模块加载异常！');
}
});
});
$('#reset').click(function() {
$('#keyword').val("");
$('#title').val("");
$('#content').val("");
});
//tab样式
// $("#myTab").find("li").click(function(e){
// e.preventDefault();
// $("#myTab").find("li").each(function(){
// $(this).removeClass("active");
// });
// $(this).addClass("active");
// $(this).find("a").click();
// });
});
</script>
<script type="text/javascript">
toastr.options.positionClass = 'toast-top-center';
</script>
<script type="text/javascript">
$(function() {
$('#reportTable')
.bootstrapTable(
{
method : 'post',
url : '/receiverShow/findReviewed.action',
cache : false,
toolbar : '#toolbar', //工具按钮用哪个容器
pagination : true, //是否显示分页（*）
singleSelect : true,
height : 500,
striped : true,
pagination : true,
pageSize : 20,
pageNumber : 1,
pageList : [ 10, 20, 50, 100, 200, 500 ],
search : false,
showColumns : true,
showRefresh : true,
showExport : true,
exportTypes : [ 'csv', 'txt', 'xml' ],
clickToSelect : true,
columns : [
{
checkbox : true
},
{
field : "title",
title : '标题',
align : "center",
valign : "middle",
sortable : "true"
},
{
field : "classification",
title : "分类",
align : "center",
valign : "middle",
sortable : "true"
},
{
field : "keyword",
title : "关键词",
align : "center",
valign : "middle",
sortable : "true"
},
{
field : "clicks",
title : "点击数",
align : "center",
valign : "middle",
sortable : "true",
},
{
field : "committime",
title : "提交时间",
align : "center",
valign : "middle",
sortable : "true"
},
{
field : "faultDate",
title : "详情",
align : "center",
valign : "middle",
sortable : "true",
formatter : function(value, row,
index) {
var e = '<a href="#" mce_href="#" οnclick="showdetails(\''
+ row.id
+ '\',\''
+ row.clicks
+ '\',\''
+ row.title
+ '\',\''
+ row.committime
+ '\',\''
+ row.contentss
+ '\')">详情</a> ';
return e;
}
} ],
onPageChange : function(size, number) {
},
formatNoMatches : function() {
return '无符合条件的记录';
}
});
});
</script>
<script type="text/javascript">
var data1 = [];
$(function() {
$.ajax({
type : "post",
url : "/receiverShow/findTree.action",
success : function(data, status) {
if (status == "success") {
data1 = eval("[" + data + "]");
}
},
error : function() {
toastr.error('Error');
},
});
});
function buildDomTree() {
var data = [];
var root = "所有分类";
function walk(nodes, data) {
if (!nodes) {
return;
}
$.each(nodes, function(id, node) {
var obj = {
id : id,
text : node.name != null ? node.name : root
// tags : [ node.isLeaf == true ? node.
// + ' child elements'
// : '' ]
};
if (node.isLeaf = true) {
obj.nodes = [];
walk(node.children, obj.nodes);
}
data.push(obj);
});
}
walk(data1, data);
return data;
}
$("#txt_departmentname").click(function() {
var options = {
bootstrap2 : false,
showTags : true,
levels : 5,
showCheckbox : true,
checkedIcon : "glyphicon glyphicon-check",
data : buildDomTree(),
onNodeSelected : function(event, data) {
$("#txt_departmentname").val(data.text);
$("#treeview").hide();
}
};
$('#treeview').treeview(options);
});
$("#txt_departmentname_edit").click(function() {
var options = {
bootstrap2 : false,
showTags : true,
levels : 5,
showCheckbox : true,
checkedIcon : "glyphicon glyphicon-check",
data : buildDomTree(),
onNodeSelected : function(event, data) {
$("#txt_departmentname_edit").val(data.text);
$("#treeview_edit").hide();
}
};
$('#treeview_edit').treeview(options);
});
$("#btn_add").click(function() {
$("#myModalLabel").text("新增");
$('#myModal').modal();
// xjiframe_tree_input.style.display="none";
// alert(data1);
// buildDomTree();
});
// var innIframe=document.getElementById("xjiframe_tree_input").contentWindow;
// var click = innIframe.treePanel;
// function click_f(){
// alert("22222"+2222);
// var selection = innIframe.treePanel.getSelectionModel().getSelection();
// if(selection.length > 0){
// xjiframe_tree_input.style.display="none";
// alert(selection);
// }
// }
function showdetails(id, click, title, committime, content) {
if (click != null || click != "") {
clickNow = parseInt(click) + 1;
} else {
clickNow = 0;
}
$.ajax({
url : '/receiverShow/subClicks.action',
async : false,
type : 'post',
data : "knowledge.id=" + id + "&knowledge.clicks=" + clickNow,
success : function(data, msg) {
if (msg == "success") {
$('#reportTable').bootstrapTable('refresh', {
url : 'findReviewed.action'
});
}
if (msg == "failure") {
toastr.warning('点击异常');
}
},
error : function(XMLHttpRequest, textStatus, thrownError) {
toastr.warning('模块加载异常！');
}
})
$('#txt_title_details').val(title);
$('#txt_clicks_details').val(click);
$('#txt_committime_details').val(committime);
$('#txt_content_details').val(content);
$("#myModalLabel_details").text("详情");
$("#click_table_id").val(id);
$('#myModal_details').modal();
// toastr.info('详情');
}
$("#btn_modify_content").click(function() {
/* Act on the event */
$("#myModalLabel_content").text("内容");
$('#myModal_content').modal();
});
$("#btn_submit_content").click(
function(event) {
/* Act on the event */
var id = $("#click_table_id").val();
var contentss = $("#txt_content_details_sub").val();
// $.post('saveSubmit.action', function(data, textStatus, xhr) {
// /*optional stuff to do after success */
// });
$.ajax({
url : 'saveSubmit.action',
type : 'POST',
data : "knowledge.id=" + id + "&knowledge.contentss="
+ contentss,
success : function(data, msg) {
if (msg == "success") {
toastr.info("保存成功");
$('#reportTable').bootstrapTable('refresh', {
url : 'findReviewed.action'
});
}
if (msg == "failure") {
toastr.warning('点击异常');
}
}
// error: function(XMLHttpRequest, textStatus, thrownError) {
// toastr.warning('模块加载异常！');
// }
})
$.ajax({
url : 'addFeedback.action',
type : 'POST',
data : "feedBack.klId=" + id + "&feedBack.content="
+ contentss + "&feedBack.submitter=admin_false",
success : function(data, msg) {
if (msg == "success") {
$('#myModal_content').modal('hide');
// toastr.info("保存成功");
$('#reportTable').bootstrapTable('refresh', {
url : 'findReviewed.action'
});
}
if (msg == "failure") {
$('#myModal_content').modal('hide');
toastr.warning('点击异常');
}
}
// error : function(XMLHttpRequest, textStatus,
// thrownError) {
// toastr.warning('模块加载异常！');
// }
})
});
$("#btn_submit").click(
function(event) {
/* Act on the event */
$
.ajax({
type : 'post',
url : "addNewKnowLedge.action",
data : "knowledge.keyword="
+ escape($('#txt_departmentlevel')
.val())
+ "&knowledge.title="
+ escape($('#txt_parentdepartment')
.val()) + "&knowledge.contentss="
+ escape($('#txt_statu').val())
+ "&knowledge.classification="
+ $('#txt_departmentname').val()
+ "&knowledge.clicks=1"
+ "&knowledge.status=1",
success : function(data, msg) {
if (msg == "success") {
$('#reportTable').bootstrapTable(
'refresh', {
url : 'findReviewed.action'
});
}
if (msg == "failure") {
toastr.warning('添加失败');
}
},
error : function(XMLHttpRequest, textStatus,
thrownError) {
toastr.warning('模块加载异常！');
}
});
});
$("#btn_edit")
.click(
function() {
var arrselections = $("#reportTable")
.bootstrapTable('getSelections');
if (arrselections.length <= 0) {
toastr.warning('请选择有效数据');
return;
}
$("#myModalLabel_edit").text("编辑");
$('#myModal_edit').modal();
$('#txt_departmentname_edit').val(
arrselections[0].classification);
$('#txt_parentdepartment_edit').val(
arrselections[0].title);
$('#txt_departmentlevel_edit').val(
arrselections[0].keyword);
$('#txt_statu_edit').val(arrselections[0].contentss);
});
$("#btn_submit_edit").click(
function(event) {
var arrselections = $("#reportTable").bootstrapTable(
'getSelections');
var click = arrselections[0].clicks;
var committime = arrselections[0].committime;
var id = arrselections[0].id;
var content = arrselections[0].contentss;
alert($('#txt_statu_edit').val());
/* Act on the event */
$.ajax({
type : 'post',
url : "modNewKnowLedge.action",
data : "knowledge.keyword="
+ escape($('#txt_departmentlevel_edit').val())
+ "&knowledge.title="
+ escape($('#txt_parentdepartment_edit').val())
+ "&knowledge.contentss="
+ $('#txt_statu_edit').val()
+ "&knowledge.classification="
+ $('#txt_departmentname_edit').val()
+ "&knowledge.clicks=" + click
+ "&knowledge.status=2"
+ "&knowledge.committime=" + committime
+ "&knowledge.id=" + id,
success : function(data, msg) {
if (msg == "success") {
$('#reportTable').bootstrapTable('refresh', {
url : 'findReviewed.action'
});
}
if (msg == "failure"){
toastr.warning('添加失败');
}
},
error : function(XMLHttpRequest, textStatus,
thrownError) {
toastr.warning('模块加载异常！');
}
});
});
//注册删除按钮的事件
$("#btn_delete").click(
function() {
//取表格的选中行数据
var arrselections = $("#reportTable").bootstrapTable(
'getSelections');
if (arrselections.length <= 0) {
toastr.warning('请选择有效数据');
return;
}
var id = arrselections[0].id;
// Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
// if (!e) {
// return;
// }
swal({
title : "操作提示", //弹出框的title
text : "确定删除吗？", //弹出框里面的提示文本
type : "warning", //弹出框类型
showCancelButton : true, //是否显示取消按钮
confirmButtonColor : "#DD6B55",//确定按钮颜色
cancelButtonText : "取消",//取消按钮文本
confirmButtonText : "是的，确定删除！",//确定按钮上面的文档
closeOnConfirm : true
}, function() {
$
.ajax({
type : "post",
url : "deleteNewKnowLedge.action",
data : "id=" + id,
success : function(data, status) {
if (status == "success") {
toastr.success('删除成功');
$("#reportTable").bootstrapTable(
'refresh');
}
},
error : function() {
toastr.error('Error');
},
complete : function() {
}
});
});
});
</script>
</body>
</html>
扫一扫
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
