您的位置：首页 > Web前端 > JavaScript

jsp-自己看看

2016-06-01 17:11 471 查看 
</pre><pre>

tree.jsp

<strong style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;"><img src="https://img-blog.csdn.net/20160601172050760?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />tree.jsp</span></strong>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!doctype html>
<html>
<head>
<%@ include file="/common/commons.jsp" %>
<script>
$(function(){
var tree = $("#zTreea").tree({
ajax: {
url: "tree.action",
type: 'POST'
},
callback: {
initNode: function(nodes){
this.selectNode(nodes[0]);
},
onClick: function(event, treeId, treeNode){
if ($("#zTreea").attr('dialog')) { return false; }
parent.frames['gridFrame'].location.href = 'page.action?treeId=' + treeNode.id;
}
},
view: {
fontCss: function(treeId, treeNode){
return (!!treeNode.highlight) ? {
color: "#A60000",
"font-weight": "bold"
} : {
color: "#333",
"font-weight": "normal"
};<pre name="code" class="javascript"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="s" uri="/struts-tags" %> <!doctype html> <html> <head> <%@ include file="/common/meta.jsp" %> <style type="text/css"> html { height: 100%; } body { width: 100%; height: 100%; overflow: hidden; } </style> </head> <body style="height:100%"> <div class="wrapper grid-s9m0"> <div class="col-main"> <div class="main-wrap"> <iframe id="gridFrame" name="gridFrame" src="page.action" frameborder="0" class="autoIframe" scrolling="auto"> </iframe> </div> </div> <div class="col-sub"> <iframe id="ztreeFrame" name="ztreeFrame" src="treePage.action" frameborder="0" class="autoIframe" scrolling="auto"> </iframe> </div> </div> </body> </html>

} }); $.callback.add('getSelectNode', function(){ var selectedNodes = tree.getSelectedNodes(); return selectedNodes && selectedNodes.length ? selectedNodes[0].label : null; }); $.callback.add('load', function(){ $("#zTreea").attr('dialog', 'true') alert('load') }); }); </script> </head> <body> <div class="wrapper grid-s9m0"> <div class="treeview"> <ul id="zTreea" class="ztree"> </ul> </div> </div> </body></html>

body.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!doctype html>
<html>
<head>
<%@ include file="/common/meta.jsp" %>
<style type="text/css">
html {
height: 100%;
}

body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body style="height:100%">
<div class="wrapper grid-s9m0">
<div class="col-main">
<div class="main-wrap">
<iframe id="gridFrame" name="gridFrame" src="page.action" frameborder="0" class="autoIframe" scrolling="auto">
</iframe>
</div>
</div>
<div class="col-sub">
<iframe id="ztreeFrame" name="ztreeFrame" src="treePage.action" frameborder="0" class="autoIframe" scrolling="auto">
</iframe>
</div>
</div>
</body>
</html>

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!doctype html>
<html>
<head>
<%@ include file="/common/commons.jsp" %>
<script>
var position = '全局';
$(function(){
var position = '局部';
//以下只是一个例子，请按各自项目需求进行处理。
$('#org_sel_btn').click(function(){
$.dialog({
width: 300,
height: 400,
maybeRefresh: true,
//该参数不设置或为false,那么在点击“添加”后（执行了刷新动作后），再点击按钮执行提示“不能执行已释放 Script 的代码”
//如果为true，则按钮中的函数是在全局下运行，结果导致例子中的alert(position)由"局部"变成"全局"
//请按照场景设置该参数，如果按钮中有涉及到刷新动作，可以设置 maybeRefresh: true,
id: 'tree_iframe',
title: '选择组织',
iframeSrc: '${ctx}/web/module/example/treePage.action',
load: function(callback){
callback.fire('load');
},
close: function(){
alert('close');
},
buttons: [{
text: '添加',
'class': 'bPrimary',
click: function(dialog, callback){
alert($('#form').length);//1
alert(position);//全局; 注意：这里无法获取该闭包内的对象， 把maybeRefresh修改一下再试试
if ($('#form [name="entity.orgName"]').val()) {
location.reload();
}
$('#form [name="entity.properties.orgName"]').val(callback.fire('getSelectNode', '123'));
}
}, {
text: '关闭',
click: function(dialog, callback, el){
this.close();
}
}]
});
});
$('#form [name="entity.i2p"]').bind('validateShowLabel', function(e, config){

config.validateShowLabel = true;
});

$('#autocomplate').autocomplete({
source: {
url: 'tree.action'
},
sourceDataType: 'tree'
})

});
</script>
</head>
<body class="page">
<div class="wrapper">
<DIV class="breadLine displayNone">
<UL class="breadcrumbs auto-navigation" menu-code="${menuCode}">
<!--menu-code主要填写菜单的code，然后系统会根据该code生成部分面包屑（待菜单完善后实现），后半部分在下面填写，暂时只对href和target有效 -->
<LI>
<!--只对href有效 可以设置target target根据当前为相对参考--><A href="javascript:$.history('page.action?treeId=${param.treeId}');"><SPAN title="列表">列表</SPAN></A>
</LI>
<LI>
<SPAN title="form">form</SPAN>
</LI>
</UL>
</DIV>
<form id="form" action="save.action" method="post" next="page.action" class="form-horizontal form-input">
<div class="pageTitle">
<h3>测试demo</h3>
</div>
<div class="pageContent">
<fieldset>
<legend>基础信息</legend>
<div class="control-group">
<label class="control-label"><em>*</em>名称：</label>
<div class="controls">
<input name="entity.name" maxLength="64" required="true" vtype="common" class='auto-input' type='text' value='<s:property value="entity.name"/>'>
</div>
</div>
<div class="control-group">
<label class="control-label">ip：</label>
<div class="controls">
<input name="entity.ip" vtype="ip" class='auto-input' type='text' value='<s:property value="entity.ip"/>'>
</div>
</div>
<div class="control-group">
<label class="control-label">mac：</label>
<div class="controls">
<input name="entity.mac" vtype="mac" class='auto-input' type='text' value='<s:property value="entity.ip"/>'>
</div>
</div>
<div class="control-group">
<label class="control-label">autocomplate：</label>
<div class="controls">
<input type='text' id="autocomplate">
</div>
</div>
<div class="control-group">
<label class="control-label"><em>*</em>密码复杂度：</label>
<div class="controls">
<input name="entity.properties.pwd" required="true" minLength="6" class="auto-input tipSelf" type="text">
</div>
</div>
<div class="control-group">
<script>
$(function(){
$('.tipSelf').hik().pdTangram({
listeners: {
noticeAssign: function(num){
var $text = $('#tip .textC'), $bar = $('#tip .bar');
if (num == 1) {
$text.html('低');
$bar.removeAttr('class').addClass('bar bar-danger').css('width', '33%');
}
else if (num == 2) {
$text.html('中');
$bar.removeAttr('class').addClass('bar bar-warning').css('width', '66%');
}
else if (num == 3) {
$text.html('高');
$bar.removeAttr('class').addClass('bar bar-success').css('width', '100%');
}
else {
$text.html('无效');
$bar.removeAttr('class').addClass('bar bar-success').css('width', '0');
}
}
}
})
})
</script>
<label class="control-label">密码强度：</label>
<div class="controls">
<div id="tip" style="width:180px;">
<div class="textC">
无效
</div>
<div class="progress progress-medium">
<div class="filler">
<div class="bar" style="width:0;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="c
c4c8
ontrol-label">组织：</label>
<div class="controls">
<div class="input-append">
<input name="entity.properties.orgName" class='auto-input' type='text' value='<s:property value="entity.properties.orgName"/>'>
<a class="buttonS bBlue" id="org_sel_btn" href="javascript:void(0);">选择</a>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">email：</label>
<div class="controls">
<input name="entity.email" type='text' class='auto-input' value='<s:property value="entity.email"/>'>
</div>
</div>
<div class="control-group">
<label class="control-label">时间：</label>
<div class="controls">
<input type='text' hikui="calendar" class='auto-input'>
</div>
</div>
</fieldset>
<div class="form-actions">
<a class="buttonM bBlue" href="javascript:void(0);" type="submit">保存</a>
<a class="buttonM bBack" href="javascript:$.history('page.action?treeId=${param.treeId}');" type="cancel"><span class="ico i-backward"></span><span>返回</span></a>
</div>
</div>
</form>
<hr>以下内容为demo使用说明，请不要copy：
<br>
1、“名称”输入不为“hello” ，后台进行自定义校验。
<br>
2、“IP”输入“0.0.0.0” ，后台抛出业务异常(继承“ProgramException”类)
<br>
3、“IP”输入“2.2.2.2” ，后台抛出系统异常(继承“ExpectedException”类)，一般数据库连接等异常都为系统异常
</div>
</body>
</html>



page.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!doctype html>
<html>
<head>
<%@ include file="/common/commons.jsp" %>
<script>
(function(){
return;
$.parser.add({
'{abc}': 'baseui/js/sea/plugins_debug'
}, {
calendar: {
alias: '{abc}/'
}
});
})();
</script>
</head>
<body class="grid withFixed">
<DIV class="breadLine displayNone">
<UL class="breadcrumbs auto-navigation" menu-code="${menuCode}">
</UL>
</DIV>
<div class="wrapper" style="height:100%">
<div class="btn-toolbar fixed">
<div class="btn-padding clearfix">
<a class="buttonS" id="_alarm_event_add-org-btn" href="input.action?treeId=${param.treeId}"><span class="ico i-add"></span><span>添加</span></a>
<a class="buttonS" id="del-btn" href="javascript:void(0);"><span id="del_btn" class="ico i-del"></span><span>删除</span></a>
<span class="floatR"><a class="buttonS" href="javascript:void(0);" data-toggle="filter"><span class="ico i-filter"></span><span class="ico i-down"></span></a></span>
</div>
</div>
<div class="fluid filterForm" style="display:none;">
<form class="form-horizontal" method="post" history="true">
<ul class="formRow">
<li class="control-group">
<label class="control-label">添加方式：</label>
<div class="controls">
<select name="entity.properties.createMode">
<option value="">请选择</option>
</select>
</div>
</li>
<li class="control-group">
<label class="control-label">配置单号：</label>
<div class="controls">
<input type="text" name="entity.indexCode">
</div>
</li>
<li class="control-group auto-by-filter">
<label class="control-label">告警名称：</label>
<div class="controls">
<input type="text" name="entity.name">
</div>
</li>
<li class="control-group auto-by-filter">
<label class="control-label">告警类型：</label>
<div class="controls">
<select name="entity.type">
<s:if test="entityType!='io'">
<option value="">请选择</option>
<option value="1">监控点</option>
<option value="2">告警器</option>
</s:if>
</select>
</div>
</li>
<li class="control-group auto-by-filter">
<label class="control-label">告警级别：</label>
<div class="controls">
<select name="entity.level">
<option value="">请选择</option>
<option value="1">高</option>
<option value="2">中</option>
<option value="3">低</option>
</select>
</div>
</li>
<li class="control-group auto-by-filter">
<label class="control-label">所属组织：</label>
<div class="controls">
<input type="text" name="entity.properties.alarmOrganizationName">
</div>
</li>
<li class="control-group auto-by-filter" style="display:none;">
<label class="control-label">添加人：</label>
<div class="controls">
<input type="text" name="entity.creator">
</div>
</li>
<li class="control-group auto-by-filter cols2">
<label class="control-label">添加时间：</label>
<div class="controls">
<input type="text" hikui="calendar" showTime="true" maxDate="#F{$dp.$N('entity.properties.createTimeStop',{d:-1});}" name="entity.properties.createTimeStart">
-
<input type="text" hikui="calendar" showTime="true" minDate="#F{$dp.$N('entity.properties.createTimeStart',{d:1});}" name="entity.properties.createTimeStop">
</div>
</li>
<li class="control-group auto-by-filter entire">
<label class="control-label">联动情况：</label>
<div class="controls">
<div class="check">
<LABEL>
<INPUT value=client type=checkbox name=entity.properties.triggers>
<SPAN>客户端联动</SPAN>
</LABEL>
<LABEL>
<INPUT value=record type=checkbox name=entity.properties.triggers>
<SPAN>录像联动</SPAN>
</LABEL>
<LABEL>
<INPUT value=preset type=checkbox name=entity.properties.triggers>
<SPAN>云台联动</SPAN>
</LABEL>
<LABEL>
<INPUT value=tvwall type=checkbox name=entity.properties.triggers>
<SPAN>告警上墙</SPAN>
</LABEL>
<LABEL>
<INPUT value=sms type=checkbox name=entity.properties.triggers>
<SPAN>短信联动</SPAN>
</LABEL>
<LABEL>
<INPUT value=email type=checkbox name=entity.properties.triggers>
<SPAN>Email联动</SPAN>
</LABEL>
</div>
</div>
</li>
</ul>
<div class="btn-set">
<a class="buttonS bBlue" type="submit" href="javascript:void(0);">过滤</a>
<a class="buttonS bGreyish" type="reset" href="javascript:void(0);">重置</a>
</div>
</form>
<div class="formRow filterRow">
<div class="btn-group btn-filter">
<a class="buttonS bBlue" data-toggle="dropdown" href="#"><span class="ico i-add"></span><span>添加过滤条件</span><span class="caret"></span></a>
<ul class="dropdown-menu auto-filter">
</ul>
</div>
</div>
</div>
<div class="datatable">
<table id="table">
</table>
<div id="dataTablePage"></div>
</div>
</div>
<script>
$(function(){
$('#table').grid({
colName: ['告警名称', '告警类型','告警级别','添加人','添加时间'],
colModel: [{name: 'name', index:'name', style: {'textAlign': 'center'},width:"15"},
{name: 'type', index:'type',width:"15",formart : function(d,fn){
if(d== '1')
return "监控点";
else if(d == '2')
return "告警器";
else
return "未知";
}},
{name:'level',index:'level',width:"5",style: {'textAlign': 'center'},formart : function(d,fn){
if(d == '1')
return '<span class="alarm-level alarm-level'+ d +'"><span class="level">高</span></span>';
else if(d == '2')
return  '<span class="alarm-level alarm-level'+ d +'"><span class="level">中</span></span>';
else if(d == '3')
return  '<span class="alarm-level alarm-level'+ d +'"><span class="level">低</span></span>';
else
return  '<span class="alarm-level alarm-level'+ d +'"><span class="level">未知</span></span>';
}},
{name:'creator',index:'creator',width:"10"},
{name:'createTime',index:'createTime',width:"10"}
] ,
headerFixed : true,
rowNum: 10,
rowMark : true,
height : '100%',
sortname: 'createTime',
sortorder: 'asc',
ajaxOptions : {
type : 'post'
} ,
dataType: 'ajax',
url : 'page22.action',
pager: '#dataTablePage',
pagerFixed: true,
ajaxResponseReader: {page: 'pageNo', rows: 'result',records: 'total',totalPage: 'totalPage'},
});
});
</script>
</body>
</html>




内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航