前端页面2，检查表 检查项，表项关联等复杂ui界面示例2
<%@ page language="java" pageEncoding="UTF-8"%><%@taglib
uri="http://www.springframework.org/tags" prefix="spring"%><%@ taglib
uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib
uri="/xxll-tags" prefix="x"%>
<%@ taglib uri="/sw-tags" prefix="sw"%>
<sw:pageRights code="100100109"/>
<!DOCTYPE html>
<html>
<head>
<title><spring:message code="com.safewaychina.eye.entity.business.CheckTable" /><spring:message code="admin.view.txt.list" /></title>
<script type="text/javascript">
$(document).ready(function() {
$(".datagrid-btable tbody tr").css({"height":"30px;"});
$("#organTypeDatagrid").datagrid({
nowrap: true,striped: true,fitColumns: true,fit:true,border:false,idField:'id',
toolbar:'#organTypetoolbar',
url:'${base}/business/organtype/listAll',
columns:[[
{field:'ck',checkbox:true,width:100},
{field:'organTypeName',title:'名称',width:100}
]]
});
});
//checkTable and checkType==================================================================
$(function(){
var all = window.document.body.clientHeight;
var s = $("#layoutTable").layout("panel","center");
var h = all-205-310;
var m = all-200;
$("#divTree").attr("style","height:"+h+"px;overflow:auto");
$("#divItem").attr("style","height:"+m+"px;overflow:auto");
$("#divForm").attr("style","height:"+m+"px;overflow:auto");
$("#checktable_type_add").click(function(){
var t=$.window({
href:'${base}/business/checktype/add',
title:'新增检查类型',height:280,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
var treeObj = $.fn.zTree.getZTreeObj("tableTree");
treeObj.reAsyncChildNodes(null, "refresh");
}
}
]
});
});
$("#checktable_add").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("tableTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0||nodes[0].isParent==false){
Notifier.info("<spring:message code="请先选择检查类型"/>");
return;
}
var ADD_URL="${base}/business/checktable/add?sid="+nodes[0].id;
var t=$.window({
href:ADD_URL,
title:'新增检查表',height:280,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
var treeObj = $.fn.zTree.getZTreeObj("tableTree");
treeObj.reAsyncChildNodes(nodes[0], "refresh");
}
}
]
});
});
$("#checktable_edit").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("tableTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return;
}
var set_={title:'',href:''};
if(nodes[0].isParent){
set_.title="修改检查类型";
set_.href="${base}/business/checktype/edit/"+nodes[0].id;
}else{
set_.title="修改检查表";
set_.href="${base}/business/checktable/edit/"+nodes[0].id;
}
var t=$.window({
href:set_.href,
title:set_.title,height:280,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");
}
}
]
});
});
$("#checktable_delete").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("tableTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return;
}
var DELETE_URL='';
if(nodes[0].isParent){
DELETE_URL="${base}/business/checktype/delete/"+nodes[0].id;
}else{
DELETE_URL="${base}/business/checktable/delete/"+nodes[0].id;
}
bootbox.confirm("<spring:message code="确认禁用此项"/>?", function(result) {
if(result) {
$.post(DELETE_URL,function(data){
Notifier.msg(data,function(){
treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");
});
});
}
});
});
//CheckItem and CheckItemtype=============================================
$("#checkitem_type_add").click(function(){
var t=$.window({
href:'${base}/business/checkitemtype/add',
title:'新增检查项类型',height:250,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
treeObj.reAsyncChildNodes(null, "refresh");
}
}
]
});
});
$("#checkitem_add").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0||nodes[0].isParent==false){
Notifier.info("<spring:message code="请先选择检查项类型"/>");
return;
}
var ADD_URL="${base}/business/checkitem/add?sid="+nodes[0].id;
var t=$.window({
href:ADD_URL,
title:'新增检查项',height:600,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
treeObj.reAsyncChildNodes(nodes[0], "refresh");
}
}
]
});
});
$("#checkitem_edit").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return;
}
var set_={title:'',href:'',height:250};
if(nodes[0].isParent){
set_.title="修改检查项类型";
set_.href="${base}/business/checkitemtype/edit/"+nodes[0].id;
}else{
set_.title="修改检查项";
set_.href="${base}/business/checkitem/edit/"+nodes[0].id;
set_.height=600;
}
var t=$.window({
href:set_.href,
title:set_.title,
height:set_.height,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){
$.formSubmit(t);
treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");
}
}
]
});
});
$("#checkitem_delete").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
var nodes = treeObj.getSelectedNodes();
if(nodes.length==0){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return;
}
var DELETE_URL='';
if(nodes[0].isParent){
DELETE_URL="${base}/business/checkitemtype/delete/"+nodes[0].id;
}else{
DELETE_URL="${base}/business/checkitem/delete/"+nodes[0].id;
}
bootbox.confirm("<spring:message code="确认禁用"/>?", function(result) {
if(result) {
$.post(DELETE_URL,function(data){
Notifier.msg(data,function(){
treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");
});
});
}
});
});
//tableItem add and delete==================================================================
var numIndex=0;
var groupTileClick=function(){
$('.groupTitle').removeClass("selectedGroup");
if($(this).hasClass("selectedGroup")){
$(this).removeClass("selectedGroup");
}else{
$(this).addClass("selectedGroup");
}
};
$("body").on("click",".groupTitle",groupTileClick);
$("#selected_addgroup").click(function(){
var id=$("#checkTableId").val();
if(id==""){
Notifier.info("请先选择左边的检查表");
return false;
}
var colne_content=$("#cloneGroup").clone(true).addClass("groupTitle");
numIndex++;
$(colne_content).find(".numSpan").text(numIndex);
$(colne_content).find(".groupName").attr("name","itemGroups["+(numIndex-1)+"].groupName");
$(colne_content).removeAttr("id").fadeIn('slow').appendTo($("#tableItemForm"));
});
$("body").on("click",".groupDetailDelete",function(){
if(numIndex==1){
return false;
}
$(this).parents(".groupTitle").remove();
numIndex--;
//重新计算index
$(".groupTitle").each(function(i){
$(this).find(".numSpan").text(i+1);
$(this).find(".v_val").attr("name","itemGroups["+i+"].checkItemId");
$(this).find(".groupName").attr("name","itemGroups["+i+"].groupName");
var v=$(this).find(".v_val").val();
$("#span"+v).attr("name","itemGroups["+i+"].detailNo");
});
});
$("body").on("click",".groupDetailUp",function(){
var p=$(this).parents(".groupTitle");
var b=$(p).prev(".groupTitle").first();
$(p).insertBefore(b);
//重新计算index
$(".groupTitle").each(function(i){
$(this).find(".numSpan").text(i+1);
$(this).find(".v_val").attr("name","itemGroups["+i+"].checkItemId");
$(this).find(".groupName").attr("name","itemGroups["+i+"].groupName");
var v=$(this).find(".v_val").val();
$("#span"+v).attr("name","itemGroups["+i+"].detailNo");
});
});
$("body").on("click",".groupDetailDown",function(){
var p=$(this).parents(".groupTitle");
var b=$(p).next(".groupTitle").first();
$(p).insertAfter(b);
//重新计算index
$(".groupTitle").each(function(i){
$(this).find(".numSpan").text(i+1);
$(this).find(".v_val").attr("name","itemGroups["+i+"].checkItemId");
$(this).find(".groupName").attr("name","itemGroups["+i+"].groupName");
var v=$(this).find(".v_val").val();
$("#span"+v).attr("name","itemGroups["+i+"].detailNo");
});
});
$("body").on("click",".itemDetailDown",function(){
var p=$(this).parents(".itemDetail");
var b=$(p).next().next().first();
var s=$(b).attr("id");//next id
var t=$(p).attr("id");//self id
var span1=$("#span"+s);//next span
var span2=$("#span"+t);//self span
$(p).insertAfter(b);
$(span1).insertBefore(p);//switch
$(span2).insertBefore(b);
//id switch,but value not switch
$(span1).attr("id","span"+t);
$(span2).attr("id","span"+s);
});
$("body").on("click",".itemDetailUp",function(){
var p=$(this).parents(".itemDetail");
var b=$(p).prev().prev().first();//prev
var s=$(b).attr("id");
var t=$(p).attr("id");
//alert(s+"===="+t)
var span1=$("#span"+s);//prev
var span2=$("#span"+t);//self
$(p).insertBefore(b);
$(span1).insertBefore(p);//switch
$(span2).insertBefore(b);
//id switch
$(span1).attr("id","span"+t);
$(span2).attr("id","span"+s);
});
$("body").on("click",".itemDetailRemove",function(){
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
var node=treeObj.getNodeByParam("id",$(this).parent().parent().attr("id"));
if(null!=node){
treeObj.checkNode(node, false,true);
}
var p=$(this).parents(".itemDetail");
var b=$(p).prev().first();//prev
var m=$(p).nextAll(".myspan");
$(m).each(function(index,item){
var k=$(item).val();
$(item).val(k-1);
})
$(this).parent().parent().fadeOut(50, function() { $(this).remove(); $(b).remove();});
});
$("body").on("mouseenter mouseleave",".itemDetail",function(event){
if(event.type=='mouseenter'){
$(this).addClass("selectedItem");
$(this).find(".itemDetailBtns").fadeIn(200);
$(this).find(".myspan").attr("z-index",9999);
}else{
$(this).removeClass("selectedItem");
$(this).find(".itemDetailBtns").fadeOut(200);
}
});
$("body").on("mouseenter click",".groupName",function(){
$(this).tooltip({
content:'<div class="alert-warning"><i class="icon-warning-sign"></i> 名字一样的组名会自动合并!</label>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#fcf8e3',
borderColor: '#8a6d3b'
});
}
});
});
//organType==================================================================
$("#organtype_add").click(function(){
var t=$.window({
href:'${base}/business/organtype/add',
title:'新增机构类型',width:450,height:180,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){$.formSubmit(t,'organTypeDatagrid');}
}
]
});
});
$("#organtype_edit").click(function(){
var nodes = $("#organTypeDatagrid").datagrid('getSelections');
if(nodes.length!=1){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return ;
}
var id=nodes[0].id;
var EDIT_URL="${base}/business/organtype/edit/"+id;
var t=$.window({
href:EDIT_URL,
title:'修改机构类型',width:450,height:180,
buttons:[
{text:'<spring:message code="admin.view.txt.save"/>',iconCls:'icon-ok-sign',size:'large',
handler:function(){$.formSubmit(t,'organTypeDatagrid');}
}
]
});
});
$("#organtype_delete").click(function(){
var nodes = $("#organTypeDatagrid").datagrid('getSelections');
if(nodes.length!=1){
Notifier.info("<spring:message code="admin.view.js.selected"/>");
return ;
}
var id=nodes[0].id;
var DELETE_URL="${base}/business/organtype/delete/"+id;
bootbox.confirm("<spring:message code="admin.view.js.deleteed"/>?", function(result) {
if(result) {
$.post(DELETE_URL,function(data){
Notifier.msg(data,function(){
$("#organTypeDatagrid").datagrid('reload');
});
});
}
});
});
//CheckTable and CheckType Tree
var tableSetting = {
async: {
enable: true,
url:"${base}/business/tableitem/listTable",
autoParam:["id=sid"]
},
callback:{
onClick:function(event, treeId, node){
if(!node.isParent){
$("#checkTableId").val(node.id);
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
treeObj.reAsyncChildNodes(null, "refresh");
$(".groupTitle").remove();
numIndex=0;
//select organType
$("#organTypeDatagrid").datagrid("uncheckAll");
if(node.attr.length>0){
$(node.attr).each(function(i,obj){
$("#organTypeDatagrid").datagrid("selectRecord",obj.id);
});
}
//show tableItem
$.ajax({
url:'${base}/business/tableitem/listTableItem.json',
type:'post',dataType:'html',
data:{"id":node.id},
success:function(obj){
if(obj.length>0){
$(obj).fadeIn('slow').appendTo($("#tableItemForm"));
numIndex=$(obj).find(".groupTitle").prevObject.length;
}
}
});
}else{
$("#checkTableId").val("");
}
}
}
};
$.fn.zTree.init($("#tableTree"), tableSetting);
//CheckItem and CheckItemType Tree
var itemSetting = {
async: {
enable: true,
url:"${base}/business/tableitem/listItem",
autoParam:["id=sid"]
},
check:{
enable:true,autoCheckTrigger:true
},
callback: {
onExpand:function(event, treeId, node){
var treeObj = $.fn.zTree.getZTreeObj("itemTree");
$(".itemDetail").each(function(){
var id_=$(this).attr("id");
$(node.children).each(function(i,o){
if(id_==o.id){
treeObj.checkNode(o,true,true);
}
});
});
},
beforeCheck:function(event, treeId, node){
var id=$("#checkTableId").val();
if(id==""){
Notifier.info("请先选择左边的检查表");
return false;
}
var selGoup=$(".selectedGroup");
if(selGoup.length==0){
Notifier.info("请选择要加入的分组");
return false;
}
},
onCheck: function(event, treeId, node){
if(node.checked){
var selGoup=$(".selectedGroup");
var idexits=$("#"+node.id).length>0;
if(!node.isParent&&!idexits){
var n=$(selGoup).find(".numSpan").text();
var idx=parseInt(n)-1;
//循环遍历当前group，有多少个li
var k=0;
var p=$(selGoup).find(".groupGrid ul").find("li");
$(p).each(function(index,item){
k++;
})
//循环遍历当前group，有多少个li end
var spanDetail=$("#cloneSpan").clone(true).attr("id","span"+node.id).val(k+1);
var itemDetail=$("#colneItemDetail").clone(true).addClass("itemDetail").attr("id",node.id);
//itemDetail.find(".v_checkbox").val(node.id);
itemDetail.find(".v_val").val(node.id).attr("name","itemGroups["+idx+"].checkItemId");
itemDetail.find(".v_label").text(node.name);
var v=node.id;
$(spanDetail).attr("name","itemGroups["+idx+"].detailNo");
//itemDetail.find(".v_groupName").attr("name","itemGroups["+idx+"].groupName");
$(spanDetail).insertBefore($(itemDetail));
$(spanDetail).fadeIn().appendTo($(selGoup).find(".groupGrid ul"));
$(itemDetail).fadeIn().appendTo($(selGoup).find(".groupGrid ul"));
}
}else{
$("#"+node.id).remove();
}
}
}
};
$.fn.zTree.init($("#itemTree"), itemSetting);
$("#tableItemSave").click(function(){
$("#tableItemForm").ajaxSubmit({
url:'${base}/business/tableitem/saveTableItem',
type:'post',
dataType:'json',
beforeSubmit:function(formData, jqForm, options){
//check CheckTable
if($("#checkTableId").val()==""){
Notifier.info("请选择检查表");
return false;
}
//check organType
var sel=$("#organTypeDatagrid").datagrid("getSelections");
if(sel.length==0){
Notifier.info("请选择机构类型");
return false;
}else{
$(sel).each(function(i,obj){
formData.push({"name":"organTypeIds","value":obj.id});
});
}
//check tableItem
},
beforeSend:function(){
$.messager.progress({
title:'请稍后...',
text:"数据正在保存中...",
interval:120
});
},
complete:function(){
$.messager.progress('close');
},
success:function(content){
$.messager.progress('close');
Notifier.msg(content);
},
error:function(content){
Notifier.msg(content);
}
});
});
});
</script>
<style type="text/css">
.sel {
text-align: center!important; position: absolute;width:100px;height:200px;left:50%;top:50%;
margin-left:-50px;margin-top:-100px;}
.main .panel-tool button{
font-size: 12px!important;
margin: 0 3px;
}
.selectedGroup{
border:1px solid #428bca;
}
.groupTitle{
margin-bottom: 3px;
}
.groupGrid ul{
padding: 0 5px;
list-style: none;
}
.myspan{
line-height: 10px;
width:25px;
height:25px;
padding-top:3px;
float:left;
border:0;
}
.groupGrid ul li{
position:relative;
line-height: 30px;
color: #000;
border-bottom: 1px dotted #999;
list-style: outside disc none;
list-style-type: none;
vertical-align: middle;
}
.groupGrid ul li input{
position:absolute;
top:5px;
padding-top: 13px;
width: 16px;
height: 16px;
}
.groupGrid ul li label{
line-height: 30px;
padding-top:3px;
margin-left: 19px;
}
.selectedItem{
background: #dfdfdf;
}
</style>
</head>
<body>
<!-- 后面动态指定 name 属性，以便与后台数据交换 -->
<input type="text" readonly="readonly" class="myspan" id="cloneSpan" style="display: none;"></span>
<li id="colneItemDetail" style="display: none;">
<input type="hidden" value="" name="itemGroups[XXX].checkItem.id" class="v_val"/>
<label class="v_label">
<span class="itemDetailBtns" style="display: none;float:right;margin-left:15px">
<button type="button" class="btn btn-xs itemDetailDown"><i class="icon-circle-arrow-down"></i>下移</button>
<button type="button" class="btn btn-xs itemDetailUp"><i class="icon-circle-arrow-up"></i>上移</button>
<button type="button" class="btn btn-xs itemDetailRemove"><i class="icon-remove-sign"></i>删除</button>
</span></label>
</li>
<div id="cloneGroup" class="panel panel-success" style="display: none;">
<div class="panel-heading input-group">
<span class="input-group-addon"><strong>第<span class="numSpan">1</span>组</strong></span>
<input type="text" name="itemGroups[0].groupName" class="form-control groupName" placeholder="分组名称" value="" maxlength="50">
<span class="input-group-btn btn-group-sm">
<button type="button" class="btn btn-default groupDetailDown"><i class="icon-circle-arrow-down"></i>下移</button>
<button type="button" class="btn btn-default groupDetailUp"><i class="icon-circle-arrow-up"></i>上移</button>
<button type="button" class="btn btn-default btn-danger groupDetailDelete"><i class="icon-trash"></i> 删除</button>
</span>
</div>
<div class="panel-body groupGrid">
<ul></ul>
</div>
</div>
<div class="easyui-layout main" data-options="fit:true">
<!-- PAGE CONTENT BEGINS -->
<div data-options="region:'west',split:true,iconCls:'icon-list-alt'" title="检查表" style="width:30%;">
<div id="layoutTable" class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',split:true,border:false" style="overflow:hidden;">
<div class="datagrid-toolbar">
<sw:bodyRights code="1001001091-1">
<a id="checktable_type_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus-sign',plain:true">新增类型</a>
<a id="checktable_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus',plain:true">新增表</a>
</sw:bodyRights>
<sw:bodyRights code="1001001091-2">
<a id="checktable_edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pencil',plain:true">编辑</a>
</sw:bodyRights>
<sw:bodyRights code="1001001091-4">
<a id="checktable_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-trash',plain:true">禁用</a>
</sw:bodyRights>
</div>
<div id="divTree" style="overflow:auto;">
<ul id="tableTree" class="ztree"></ul>
</div>
</div>
<div data-options="region:'south',split:true,border:false,iconCls:'icon-desktop'" title="机构类型" style="width:300px;height:310px;">
<div id="organTypeDatagrid">
</div>
</div>
</div>
</div>
<div data-options="region:'center',split:true,iconCls:'icon-list-ol'" title="已选检查项" style="overflow:hidden">
<div class="datagrid-toolbar">
<sw:bodyRights code="1001001094-1">
<a id="selected_addgroup" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus',plain:true">新增分组</a>
<a id="tableItemSave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<label class="alert-warning" style="padding: 4px 16px;border: 1px solid #8a6d3b;"><i class="icon-warning-sign"></i> 配置完成后请保存，否则不生效!</label>
</sw:bodyRights>
</div>
<div id="divForm">
<form action="#" id="tableItemForm">
<input type="hidden" name="checkTableId" id="checkTableId" value=""/>
</form>
</div>
</div>
<div data-options="region:'east',split:true,iconCls:'icon-list-ul'" title="检查项" style="width:30%;overflow:hidden">
<div class="datagrid-toolbar">
<sw:bodyRights code="1001001093-1">
<a id="checkitem_type_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus-sign',plain:true">新增类型</a>
<a id="checkitem_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus',plain:true">新增项</a>
</sw:bodyRights>
<sw:bodyRights code="1001001093-2">
<a id="checkitem_edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pencil',plain:true">编辑</a>
</sw:bodyRights>
<sw:bodyRights code="1001001093-4">
<a id="checkitem_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-trash',plain:true">禁用</a>
</sw:bodyRights>
</div>
<div id="divItem">
<ul id="itemTree" class="ztree"></ul>
</div>
</div>
<div id="organTypetoolbar">
<sw:bodyRights code="1001001092-1">
<a id="organtype_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-plus',plain:true">新增</a>
</sw:bodyRights>
<sw:bodyRights code="1001001092-2">
<a id="organtype_edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pencil',plain:true">编辑</a>
</sw:bodyRights>
<sw:bodyRights code="1001001092-4">
<a id="organtype_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-trash',plain:true">删除</a>
</sw:bodyRights>
</div>
<!-- PAGE CONTENT ENDS -->
</div>
</body>
</html>