版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq877507054/article/details/85236389
后台管理类系统一般以用户为中心 实现信息的集中访问,将登录用户所需要的，来源各种渠道的信息集成在一个统一的页面模块之内,一般是系统首页,可定制,可拖拽,拖拽后可以记忆位置,先看整体效果图!
这里介绍两个插件
1.EasyUI扩展组件
官网地址:http://www.jeasyui.net/extension/106.html
我的:https://download.csdn.net/download/qq877507054/10873054
2.Jquery双向select控件Bootstrap DualListbox
github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
官网:https://www.virtuosoft.eu/code/bootstrap-duallistbox/
我的:https://download.csdn.net/download/qq877507054/10873062
EasyUI Portal前台代码
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/resource/common/js/header.jsp"%>
<%
String webapp = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>主页</title>
<link rel="stylesheet" href="<%=webapp%>/resource/plugin/portal/css/easyui.css" type="text/css">
<link rel="stylesheet" href="<%=webapp%>/resource/plugin/portal/css/icon.css" type="text/css">
<link rel="stylesheet" href="<%=webapp%>/resource/plugin/portal/portal.css" type="text/css">
<script type="text/javascript" src="<%=webapp%>/resource/plugin/portal/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/portal/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/portal/jquery.portal.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/portal/js/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/layui-v2.2.5/layui.all.js"></script>
<style type="text/css">
.title{
font-size:16px;
font-weight:bold;
padding:20px 10px;
background:#eee;
overflow:hidden;
border-bottom:1px solid #ccc;
}
.t-list{
padding:5px;
}
</style>
<script type="text/javascript">
var p1='${p1}';
var p2='${p2}';
var p3='${p3}';
var p4='${p4}';
var p5='${p5}';
var p6='${p6}';
var p1title='${p1title}';
var p2title='${p2title}';
var p3title='${p3title}';
var p4title='${p4title}';
var p5title='${p5title}';
var p6title='${p6title}';
var p1url='${p1url}';
var p2url='${p2url}';
var p3url='${p3url}';
var p4url='${p4url}';
var p5url='${p5url}';
var p6url='${p6url}';
var panels;
var portal;
var myHeight = 240;
var myWidth = 200;
$(function () {
panels = [{
id: 'p1',
title:p1title,
height: myHeight,
width: myWidth,
collapsible: true,
closable:false,
content:p1,
tools : [{
iconCls : 'icon-more', //图标
handler : function (data) { //点击触发函数
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p1title,p1url);;
},
}],
onMove : function (left, top) {}
}, {
id: 'p2',
title: p2title,
height: myHeight,
width: myWidth,
collapsible: true,
closable: false,
content:p2,
tools : [{
iconCls : 'icon-more',
handler : function () {
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p2title,p2url);;
},
}]
}, {
id: 'p3',
title: p3title,
height: myHeight,
width: myWidth,
collapsible: true,
closable: false,
content: p3,
tools : [{
iconCls : 'icon-more',
handler : function () {
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p3title,p3url);;
},
}]
}, {
id: 'p4',
title: p4title,
height: myHeight,
width: myWidth,
collapsible: true,
closable: false,
content:p4,
tools : [{
iconCls : 'icon-more',
handler : function () {
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p4title,p4url);;
},
}]
}, {
id: 'p5',
title: p5title,
height: myHeight,
width: myWidth,
collapsible: true,
closable: false,
content:p5,
tools : [{
iconCls : 'icon-more',
handler : function () {
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p5title,p5url);;
},
}]
}, {
id: 'p6',
title: p6title,
height: myHeight,
width: myWidth,
collapsible: true,
closable: false,
content:p6,
tools : [{
iconCls : 'icon-more',
handler : function () {
var ifm_mainObj = top.window.outerFrame.ifm_main.addTab(p6title,p6url);;
},
}]
}];
//监听portal状态改变事件、每次改变位置、获取当前改变后的位置状态、保存在cookie
portal = $('#portal').portal({
border: false,
fit: true,
onStateChange: function () {
// alert($.cookie("portal_paenl_states"));
$.cookie("portal_paenl_states", getPanelsLoaction(), {
expires: 7
});
}
});
//在一起的用，分割，不在一起的用：分割
var local = 'p1,p2:p3,p6:p4,p5';
if ($.cookie("portal_paenl_states")) {
local = $.cookie("portal_paenl_states");
}
function getPanelById(id) {
for (var i = 0; i < panels.length; i++) {
if (panels[i].id == id) {
return panels[i];
}
}
return undefined;
}
//渲染panel
function renderPanel() {
var cols = local.split(":");
for (var i = 0; i < cols.length; i++) {
var rows = cols[i].split(",");
for (var j = 0; j < rows.length; j++) {
var op = getPanelById(rows[j]);
var p = $('<div/>').attr('id', op.id).appendTo('body');
p.panel(op);
portal.portal('add', {
panel: p,
columnIndex: i
});
}
}
}
renderPanel();
portal.portal('resize');
//获取当前位置状态
function getPanelsLoaction() {
var locals = [];
var cols = local.split(":").length;
for (var i = 0; i < cols; i++) {
var temp = [];
var pl = portal.portal("getPanels", i);
for (var j = 0; j < pl.length; j++) {
temp.push(pl[j].attr("id"));
}
locals.push(temp.join(","));
}
return locals.join(':');
}
/****************事件****************/
//待办事项单击
$('#dbssid').datagrid({
onClickRow:function(rowIndex,rowData){
var title=rowData.title_;
var url= rowData.url_;
var ifm_mainObj = top.window.outerFrame.ifm_main;
if(url!=null&&url!=""&&url+""!=undefined){
//ifm_mainObj.addTab(title,url);
myOpenDialog(url);
}
}
})
//项目实时动态单击
$('#xmssdtid').datagrid({
onClickRow:function(rowIndex,rowData){
var project_id=rowData.project_id_;
var date = new Date();
var the_year = date.getFullYear();
var the_date = date.getDate();
var the_month;
if(the_date > 26)
the_month = (date.getMonth()+1).toString();
else
{
if(date.getMonth() == 0)
{
the_year = the_year-1;
the_month = "12";
} else
{
the_month = date.getMonth().toString();
}
}
if(the_month.length<2){
the_month = "0"+the_month;
}
var pars ="project_id="+project_id+"&the_year="+the_year+"&the_month="+the_month;
var url = "<%=webapp%>/P010203/P010203ScheList.act?"+pars;
myOpenDialog(url);
}
})
//通知公告单击
$('#tzggid').datagrid({
onClickRow:function(rowIndex,rowData){
var infopub_id =rowData.infopub_id_;
var pars ="infopub_id="+infopub_id+"&view=true&infobelong_type=01";
var url = "<%=webapp%>/P030101/edit.act?"+pars;
myOpenDialog(url,"800","600");
}
})
//项目概况单击
$('#xmgkid').datagrid({
onClickRow:function(rowIndex,rowData){
var project_id =rowData.project_id;
var pars ="project_id="+project_id;
var url = "<%=webapp%>/P010107/check.act?"+pars;
myOpenDialog(url,"800","600");
}
})
//专家库单击
$('#zjkid').datagrid({
onClickRow:function(rowIndex,rowData){
var expert_info_id =rowData.expert_info_id;
var pars ="expert_info_id="+expert_info_id;
var url = "<%=webapp%>/P070101/view.act?"+pars;
myOpenDialog(url,"800","600");
}
})
//电子档案单击
$('#dzdaid').datagrid({
onClickRow:function(rowIndex,rowData){
var doc_list_id =rowData.doc_list_id;
var pars ="doc_list_id="+doc_list_id;
var url = "<%=webapp%>/P090101/view.act?"+pars;
myOpenDialog(url,"800","600");
}
})
//资料上报单击
$('#zlsbid').datagrid({
onClickRow:function(rowIndex,rowData){
var info_report_id =rowData.info_report_id;
var pars ="info_report_id="+info_report_id+"&view=true&info_report_submit_id=undefined&info_report_status=undefined";
var url = "<%=webapp%>/P100101/submit.act?"+pars;
myOpenDialog(url,"800","600");
}
})
/****************隐藏域设置****************/
$('#xmssdtid').datagrid('hideColumn','project_id_');
$('#tzggid').datagrid('hideColumn','infopub_id_');
$('#xmgkid').datagrid('hideColumn','project_id');
$('#zjkid').datagrid('hideColumn','expert_info_id');
$('#dzdaid').datagrid('hideColumn','doc_list_id');
$('#zlsbid').datagrid('hideColumn','info_report_id');
$('#dbssid').datagrid('hideColumn','url_');
});
function remove() {
$('#portal').portal('remove', $('#pgrid'));
$('#portal').portal('resize');
}
function myOpenDialog(url){
layer.open({
type: 2,
content: url,
area: ['700px', '400px'],
fixed: false, //不固定
shade: [0],//去除遮罩
maxmin: true,//开启最大化最小化按钮
cancel:function(){}//关闭函数
});
}
</script>
</head>
<body class="easyui-layout">
<div region="center" border="false">
<div id="portal">
<div style="width: 30%;">
</div>
<div style="width: 30%;">
</div>
<div style="width: 30%;">
</div>
</div>
</div>
</body>
</html>
EasyUI Portal后台代码
/**
* 显示Home页面
* @param request
* @return
* @throws Exception
*/
@RequestMapping(value = "/showHomePage")
public String showHomePage(HttpServletRequest request) throws Exception{
//动态创建首页压面
List<Map<String, Object>> selectedItem=indexSettingService.getSelectedItem();//最大值为6
String id="";
String name="";
String contextP = request.getContextPath();
List<String> panelList = new ArrayList<>();
panelList.add("p1title");
panelList.add("p2title");
panelList.add("p3title");
panelList.add("p4title");
panelList.add("p5title");
panelList.add("p6title");
Random random = new Random();
if(!selectedItem.isEmpty()&&selectedItem!=null){
for(int i=0;i<selectedItem.size();i++){
Map map=selectedItem.get(i);
id=map.get("id").toString();
name=map.get("name").toString();
int length=panelList.size()-1;//面板池个数
String pTitle =panelList.get(length);
String pName=pTitle.substring(0,2);
String pUrl=pName+"url";
panelList.remove(length);
if(id.equals("dbss")){
List<Map<String, Object>> dbssList= homeService.doGetToDoList();//待办事项
request.setAttribute(pName, indexSettingService.createDbssHtml(request,dbssList));
request.setAttribute(pUrl, contextP+"/home/showMoreToDoPage.act");
request.setAttribute(pTitle, name);
}else if(id.equals("xmssdt")){
List<Map<String, Object>> projectRTKList= homeService.doGetProjectRTKList();//项目实时动态
request.setAttribute(pName, indexSettingService.createXmssdtHtml(request,projectRTKList));
request.setAttribute(pUrl, contextP+"/home/showMoreProjectRTKPage.act");
request.setAttribute(pTitle, name);
}else if(id.equals("tzgg")){
List<Map<String, Object>> tzggList= homeService.doGetNoticeList();//通知公告
request.setAttribute(pName, indexSettingService.createTzggHtml(request,tzggList));
request.setAttribute(pUrl, contextP+"/home/showMoreNoticePage.act");
request.setAttribute(pTitle, name);
}else if(id.equals("xmgk")){
List<Map<String, Object>> xmgkList= indexSettingService.doGetXmgkList(request);//项目概况
request.setAttribute(pName, indexSettingService.createXmgkHtml(request,xmgkList));
request.setAttribute(pUrl, contextP+"/P010107/init.act");
request.setAttribute(pTitle, name);
}else if(id.equals("zjk")){
List<Map<String, Object>> zjkList= indexSettingService.doGetZjkList(request);//专家库
request.setAttribute(pName, indexSettingService.createZjkHtml(request,zjkList));
request.setAttribute(pUrl, contextP+"/P070101/init.act");
request.setAttribute(pTitle, name);
}else if(id.equals("dzda")){
List<Map<String, Object>> dzdaList= indexSettingService.doGetDzdaList(request);//电子档案
request.setAttribute(pName, indexSettingService.createDzdaHtml(request,dzdaList));
request.setAttribute(pUrl, contextP+"/P090101/init.act");
request.setAttribute(pTitle, name);
}else if(id.equals("zlsb")){
List<Map<String, Object>> zlsbList= indexSettingService.doGetZlsbList(request);//资料上报
request.setAttribute(pName, indexSettingService.createZlsbHtml(request,zlsbList));
request.setAttribute(pUrl, contextP+"/P100101/init.act");
request.setAttribute(pTitle, name);
}
}
}
return "/pmis/home/home1";
}
Bootstrap DualListbox前台代码
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/resource/common/js/header.jsp"%>
<%@ page import="com.jbfs.base.util.SessionUtil"%>
<%
String webapp = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>双边栏选择框</title>
<!-- 需要引用的CSS -->
<link rel="stylesheet" type="text/css" href="<%=webapp%>/resource/plugin/bootstrap-duallistbox/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<%=webapp%>/resource/plugin/bootstrap-duallistbox/css/bootstrap-duallistbox.css">
<!-- 需要引用的JS -->
<script type="text/javascript" src="<%=webapp%>/resource/plugin/bootstrap-duallistbox/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/bootstrap-duallistbox/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=webapp%>/resource/plugin/bootstrap-duallistbox/js/jquery.bootstrap-duallistbox.js"></script>
<script type="text/javascript">
$(function(){
$("#demoform").submit(function() {
var selected=$('[name="duallistbox_demo"]').val();
var size= selected.length;
if(size>6){
alert("至多可以选择6个模块!");
}else{
$.ajax({
url:"${pageContext.request.contextPath}/indexSetting/updateItem.act?selected="+selected,
async:false,
type:"get",
dataType : "json",
contentType:"application/json",
success: function (data) {
alert(data.msg);
},
error:function(data){
console.log("提交异常");
}
});
}
return false;
});
})
</script>
</head>
<body class="mainContent" style="overflow:hidden">
<form action="#" id="demoform" name="demoform" method="post">
<div id="mainContent">
<jbfs:wrapArea id="indexSetting" isDefaultWrap="false" title="首页定制">
<select multiple="multiple" size="10" name="duallistbox_demo" class="demo" title="duallistbox_demo"></select>
</jbfs:wrapArea>
<!--Begin：表单按钮区-->
<div class="mainDiv">
<div class="searchDiv">
<table class="searchTable" >
<tr class="odd">
<td>
<table class="buttonTable" >
<tr>
<td nowrap align="center" style="background-color: #5490ec;">
<button style="background-color: #5490ec;" type="submit" class="btn btn-default btn-block">提交</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
<script type="text/javascript">
var demo;
$(function(){
demo = $('.demo').bootstrapDualListbox({
nonSelectedListLabel : '未选中',
selectedListLabel : '选中',
preserveSelectionOnMove : 'moved',
moveOnSelect : false,
infoText: '',
//nonSelectedFilter : 'ion ([7-9]|[1][0-2])'
});
$.ajax({
url:"${pageContext.request.contextPath}/indexSetting/getItem.act",
async:false,
type:"post",
dataType : "json",
contentType:"application/json",
success: function (data) {
var itemOption=data.itemOption;
demo.append(itemOption);
},
error:function(data){
console.log("数据获取异常");
}
});
demo.bootstrapDualListbox('refresh', true);
})
</script>
</body>
</html>
Bootstrap DualListbox后台代码
/**
* 获取定制项
*/
@RequestMapping(value = "/getItem")
@ResponseBody
public Map getItem(HttpServletRequest request) throws Exception{
Map<String, Object> returnMap =new HashMap<String, Object>();
List<Map<String, Object>> list =service.getItem();
String itemOption="";
for(int i=0;i<list.size();i++){
Map map =list.get(i);
String status=map.get("is_selected").toString();
String name=map.get("name").toString();
String id=map.get("id").toString();
if(status.equals("0")){
itemOption=itemOption+"<option value="+id+">"+name+"</option> ";
}else{
itemOption=itemOption+"<option value="+id+" selected>"+name+"</option> ";
}
}
returnMap.put("itemOption", itemOption);
return returnMap;
}
对于Bootstrap DualListbox插件的默认英文和最大选择问题,需要修改源码
