使用过EasyUI的同志应该很清楚,EasyUI里的Window组件相当好用,如下图所示:
Bootstrap中并没有类似的组件,取而代之的是使用模态框(Modal),效果如下图所示:
我个人不是很喜欢模态框这种实现方式,因此经常在考虑能否在Bootstrap里使用类似于EasyUI-Window这样的的浮动面板组件,经过长时间搜索,终于找到了一款浮动面板神器——jsPanel,想要了解详细信息,可以访问它的官网:https://jspanel.de/
。
基本实现
jsPanel并不依赖于其他的任何js库,因此可以独立使用。它的主题颜色与Bootstrap是契合的,如primary、info、success、default等,在此基础之上你甚至可以自定义主题,功能十分强大。先来看一下效果:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<link href="lib/jspanel/jspanel.min.css" rel="stylesheet" />
<script src="lib/jspanel/jspanel.min.js"></script>
</head>
<body>
<script>
var html = '<h3 style="text-align:center;">添加人员信息</h3>' +
'<div class="form-group">' +
' <input type="text" class="form-control" style="width:350px;" placeholder="请输入姓名" />' +
'</div>' +
'<div class="form-group">' +
' <input type="text" class="form-control" style="width:350px;" placeholder="请输入邮箱" />' +
'</div>' +
'<div class="form-group">' +
' <input type="text" class="form-control" style="width:350px;" placeholder="请输入课程" />' +
'</div>' +
'<div class="form-group">' +
' <textarea class="form-control" rows="5" style="width:350px;" placeholder="请输入地址"></textarea>' +
'</div>' +
'<div class="form-group">' +
' <button class="btn btn-primary" style="width:350px;height:40px;">确定</button>' +
'</div>';
jsPanel.create({
id: 'panel',
theme: 'primary',
headerTitle: '测试面板',
contentSize: {
width: 400,
height: 450
},
contentOverflow: 'hidden',
content: html,
callback: function () {
this.content.style.padding = '20px';
}
});
</script>
</body>
</html>
iframe的使用
如果你觉得手写html字符串有些麻烦,你也可以使用iframe的方式加载网页,jsPanel的content属性支持连接到iframe,如下图所示:
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<link href="lib/jspanel/jspanel.min.css" rel="stylesheet" />
<script src="lib/jspanel/jspanel.min.js"></script>
</head>
<body>
<script>
jsPanel.create({
id: 'panel',
theme: 'primary',
headerTitle: '测试面板',
contentSize: {
width: 1500,
height: 600
},
contentOverflow: 'hidden',
content: '<iframe frameborder="0" scrolling="auto" src="test.html" style="width: 100%;height:100%;"></iframe>',
callback: function () {
this.content.style.padding = '10px';
}
});
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<!-- bootstrap -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div id="toolbar" class="btn-group">
<button id="add" type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="edit" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="delete" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="table"></table>
<script>
$(document).ready(function () {
$('#table').bootstrapTable({
url: "ashx/LoadDataHandler.ashx", // URL
method: "post", // 请求类型
contentType: "application/x-www-form-urlencoded", // post请求必须要有,否则后台接受不到参数
toolbar: "#toolbar", // 工具条
sidePagination: "server", // 设置在服务端还是客户端分页
showRefresh: true, // 是否刷新按钮
sortStable: true, // 是否支持排序
cache: false, // 是否使用缓存
pagination: true, // 是否显示分页
search: true, // 是否有搜索框
clickToSelect: true, // 是否点击选中行
pageNumber: 1, // 首页页码,默认为1
pageSize: 10, // 页面数据条数
pageList: [10, 20, 30],
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize, // 每页记录条数
pageNumber: params.pageNumber, // 当前页索引
sortName: params.sortName, // 排序字段名称
sortOrder: params.sortOrder, // 降序还是升序
searchText: params.searchText // 搜索关键字
};
},
formatLoadingMessage: function () {
return "请稍后,正在加载....";
},
formatNoMatches: function () {
return "暂无匹配数据.";
},
columns: [{
field: "select",
title: "全选",
align: "center",
halign: "center",
checkbox: true,
},
{
field: 'Id',
title: '编号',
align: "center",
halign: "center",
sortable: true
},
{
field: 'Name',
title: '姓名',
align: "center",
halign: "center"
},
{
field: 'Gender',
title: '性别',
align: "center",
halign: "center"
},
{
field: 'Age',
title: '年龄',
align: "center",
halign: "center"
},
{
field: 'PhoneNumber',
title: '手机号',
align: "center",
halign: "center"
}]
})
});
</script>
</body>
</html>
这里只是介绍了jsPanel的基本用法,其实jsPanel的功能远不止如此,它的强大可以说到了令人发指的地步,有兴趣的同志可以登录它的官网进行深入学习。