easyui portal界面示例

简单的easyui portal效果示例

效果图:

Snap1

 

代码:

<%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.sun.com/jstl/core_rt&#8221; prefix=”c”%>
<%@ taglib prefix=”s” uri=”/struts-tags” %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<base href=”<%=basePath%>”>

<title>应急人员查询</title>

<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/demo.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/default/easyui.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/icon.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/portal/portal.css”/>” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
.title{
font-size:16px;
font-weight:bold;
padding:10px 10px;
background:#eee;
overflow:hidden;
border-bottom:1px solid #ccc;
}
.t-list{
padding:5px;
}
</style>

<script src=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/jquery-1.6.min.js”/>”></script>
<script src=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/jquery.easyui.min.js”/>”></script>
<script src=”<c:url value=”/portal/jquery.portal.js”/>”></script>
<script src=”<c:url value=”/tg/commons/easyui/locale/easyui-lang-zh_CN.js”/>”></script>
<script type=”text/javascript”>
function cbsearch(value){
$(‘#cbgrid’).datagrid(‘reload’,{
“qo[‘q_username’]”:value
});
}

function xxcsearch(value){
$(‘#xxcgrid’).datagrid(‘reload’,{
“qo[‘q_username’]”:value
});
}

function zysearch(value){
$(‘#zygrid’).datagrid(‘reload’,{
“qo[‘q_username’]”:value
});
}

function zbsearch(value){
$(‘#zbgrid’).datagrid(‘reload’,{
“qo[‘q_username’]”:value
});
}

$(function(){
$(‘#pp’).portal({
border:false,
fit:true
});
$(‘#cbgrid’).datagrid({onClickRow:function(index,data){
var row=$(‘#cbgrid’).datagrid(‘getSelected’);
if(row){
//var url = ‘<c:url value=”/nnmis/view/ddrz_xhgz/findByIDTC.tg”/>?id=’+row[“id”];
//$(‘#vform’).form(‘load’,url);
}
}});
$(‘#xxcgrid’).datagrid({onClickRow:function(index,data){
var row=$(‘#xxcgrid’).datagrid(‘getSelected’);
if(row){
//var url = ‘<c:url value=”/nnmis/view/ddrz_xhgz/findByIDTC.tg”/>?id=’+row[“id”];
//$(‘#vform’).form(‘load’,url);
}
}});
$(‘#zygrid’).datagrid({onClickRow:function(index,data){
var row=$(‘#zygrid’).datagrid(‘getSelected’);
if(row){
//var url = ‘<c:url value=”/nnmis/view/ddrz_xhgz/findByIDTC.tg”/>?id=’+row[“id”];
//$(‘#vform’).form(‘load’,url);
}
}});
$(‘#zbgrid’).datagrid({onClickRow:function(index,data){
var row=$(‘#zbgrid’).datagrid(‘getSelected’);
if(row){
//var url = ‘<c:url value=”/nnmis/view/ddrz_xhgz/findByIDTC.tg”/>?id=’+row[“id”];
//$(‘#vform’).form(‘load’,url);
}
}});
});
</script>
</head>
<body >
<div id=”cbsearch”>
<input id=”cbsearchInput” class=”easyui-searchbox” data-options=”prompt:’请输入人名'” searcher=”cbsearch”>
</div>
<div id=”xxcsearch”>
<input id=”xxcsearchInput” class=”easyui-searchbox” data-options=”prompt:’请输入人名'” searcher=”xxcsearch”>
</div>
<div id=”zysearch”>
<input id=”zysearchInput” class=”easyui-searchbox” data-options=”prompt:’请输入人名'” searcher=”zysearch”>
</div>
<div id=”zbsearch”>
<input id=”zbsearchInput” class=”easyui-searchbox” data-options=”prompt:’请输入人名'” searcher=”zbsearch”>
</div>
<div region=”center” border=”false”>
<div id=”pp” style=”position:relative”>
<div style=”width:50%;”><!– left –>
<div id=”cbPortal” title=”常备应急人员” collapsible=”true” style=”height:300px;”>
<table id=”cbgrid” singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”true” pageSize=”100″
fit=”true” toolbar=”#cbsearch” url=”<c:url value=’/nnmis/view/yjzh/SearchCbYjry.tg’/>”>
<thead>
<tr>
<th field=”id” width=”80″ hidden=”true”></th>
<th field=”person” width=”110″ sortable=”true”>人员名</th>
<th field=”orgname” width=”130″ sortable=”true”>所属部门</th>
<th field=”position” width=”130″ sortable=”true”>职务</th>
<th field=”mb” width=”130″ sortable=”true”>手机</th>
<th field=”tel” width=”130″ sortable=”true”>路电</th>
</tr>
</thead>
</table>
</div>
<div id=”xxcPortal” title=”下现场干部” collapsible=”true” style=”height:300px;”>
<table id=”xxcgrid” singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”true” pageSize=”100″
fit=”true” toolbar=”#xxcsearch” url=”<c:url value=’/nnmis/view/yjzh/SearchXcYjry.tg’/>”>
<thead>
<tr>
<th field=”id” width=”80″ hidden=”true”></th>
<th field=”person” width=”110″ sortable=”true”>人员名</th>
<th field=”wdate” width=”130″ sortable=”true”>日期</th>
<th field=”orgname” width=”130″ sortable=”true”>所属部门</th>
<th field=”position” width=”130″ sortable=”true”>职务</th>
<th field=”mb” width=”130″ sortable=”true”>手机</th>
<th field=”tel” width=”130″ sortable=”true”>路电</th>
</tr>
</thead>
</table>
</div>
</div>
<div style=”width:50%;”><!– right –>
<div id=”zyPortal” title=”专业技术人员” collapsible=”true” style=”height:300px;”>
<table id=”zygrid” singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”true” pageSize=”100″
fit=”true” toolbar=”#zysearch” url=”<c:url value=’/nnmis/view/yjzh/SearchZyYjry.tg’/>”>
<thead>
<tr>
<th field=”id” width=”80″ hidden=”true”></th>
<th field=”person” width=”110″ sortable=”true”>人员名</th>
<th field=”equip” width=”110″ sortable=”true”>精通设备</th>
<th field=”orgname” width=”130″ sortable=”true”>所属部门</th>
<th field=”position” width=”130″ sortable=”true”>职务</th>
<th field=”mb” width=”130″ sortable=”true”>手机</th>
<th field=”tel” width=”130″ sortable=”true”>路电</th>
</tr>
</thead>
</table>
</div>
<div id=”zbPortal” title=”值班人员” collapsible=”true” style=”height:300px;”>
<table id=”zbgrid” singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”true” pageSize=”100″
fit=”true” toolbar=”#zbsearch” url=”<c:url value=’/nnmis/view/yjzh/SearchZbYjry.tg’/>”>
<thead>
<tr>
<th field=”id” width=”80″ hidden=”true”></th>
<th field=”person” width=”110″ sortable=”true”>人员名</th>
<th field=”wdate” width=”110″ sortable=”true”>日期</th>
<th field=”orgname” width=”130″ sortable=”true”>所属部门</th>
<th field=”position” width=”130″ sortable=”true”>职务</th>
<th field=”mb” width=”130″ sortable=”true”>手机</th>
<th field=”tel” width=”130″ sortable=”true”>路电</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

官方portal包下载:

http://www.jeasyui.com/extension/portal.php

官方示例:

http://www.jeasyui.com/extension/portal_demo.html

 

This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s