jquey easyui 右键显示树形结构并且添加
2014-07-30 09:47
260 查看
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!--<%@ include file="../common/taglib.jsp"%>-->
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- <jsp:include page='/common/easyuiref.jsp'></jsp:include>-->
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../resource/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="resource/ext/resources/css/xtheme-aero.css" />
<script type="text/javascript" src="../resource/ext/ext-base.js">
</script>
<script type="text/javascript" src="../resource/ext/ext-all.js">
</script>
<script type="text/javascript"
src="../resource/messagebox/js/common.js">
</script>
<script type="text/javascript"
src="../resource/messagebox/js/subModal.js">
</script>
<script type="text/javascript"
src="<c:url value='/resource/EHM/Base.js'/>">
</script>
<script type="text/javascript">
EHM.ImportCalendar()
ChangeSkinAPP.Register(function() {
ChangeSkin.Import("style.css");
});
ChangeSkinAPP.init();
</script>
<style type="text/css">
.graph {
width: 300px;
margin: 2px 0px 0px;
border: 1px solid #F8B3D0;
height: 18px;
text-align: center;
display: none;
}
#bar {
display: none;
background: #FFE7F4;
float: left;
height: 100%;
text-align: right;
}
</style>
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/icon.css">
<script type="text/javascript"
src="../js/jquery-easyui-1.2.2/jquery-1.4.4.min.js">
</script>
<script type="text/javascript"
src="../js/jquery-easyui-1.2.2/jquery.easyui.min.js">
</script>
<script>
var selectTreeNodeId = "";
var selectTreeNodeText = "";
var selectedMediaId = "";
$(function() {
var p = $('body').layout('panel', 'west').panel( {
onCollapse : function() {// 监听westPanel折叠事件;
//alert('collapse');
}
});
setTimeout(function() {
//$('body').layout('collapse','east');// 动态改变折叠
}, 0);
//----------datagrid begin------
$('#test')
.datagrid(
{
title : '列表区',
//iconCls : 'icon-save',
width : 940,
height : 470,
nowrap : false,
// striped : true,
//collapsible : true,//
//url : 'datagrid_data.json',
url : 'queryMediaJsonByCat.do',
checkbox : true,
sortName : 'code',
sortOrder : 'desc',
//remoteSort : false,
idField : 'mediaId',
onRowContextMenu: function (e, rowIndex, rowData){
e.preventDefault();
$('#mm').menu('show', {
left:e.pageX,
top:e.pageY
});
},
onClickRow : function(rowIndex) {
var rows = $('#test').datagrid('getRows');// 获取所有的行;
$('#test').datagrid('clearSelections');// 清除黄色背景;
$('#test').datagrid('selectRow', rowIndex);
selectedMediaId = rows[rowIndex].mediaId;
$('#nameLable').text(rows[rowIndex].mediaName);
var src = "<%=basePath%>"
+ rows[rowIndex].mediaOriPath;
document.getElementById("preview").src = src;
document.getElementById("myframe").src = "preViewDetail.do?selectedMediaId="
+ selectedMediaId;
},
onContextMenu : function(e, row) {
e.preventDefault();
alert(row.id);
},
// 跨行的;
columns : [
// [
// 跨列
// {
// title : 'Base Information',
// colspan : 3
// },
//
// {
// field : 'opt',
// title : 'Operation',
// width : 100,
// align : 'center',
// rowspan : 2,
// formatter : function(value, rec) {
// return '<span style="color:red">Edit Delete</span>';
// }
// } ],
[ {
field : 'mediaId',
title : '序号',
width : 120
//,
// styler : function(value, row, index) {
// return 'background-color:white;color:white';
// }
}, {
field : 'mediaName',
title : '媒体',
width : 120,
rowspan : 2,
sortable : true,
sorter : function(a, b) {
return (a > b ? 1 : -1);
}
},
{
field : 'mediaOriPath',
title : '保存路径',
width : 150,
rowspan : 2
},
{
field : 'mediaDesc',
title : '描述',
width : 150,
rowspan : 2
}
] ],
pagination : true,
rownumbers : true,
toolbar : [
{
id : 'btnadd',
text : '增加',
iconCls : 'icon-add',
handler : function() {
$('#btnsave').linkbutton('enable');
window
.open(
"uploadDescribe.jsp?selectTreeNodeId="
+ selectTreeNodeId
+ "&selectTreeNodeText="
+ encodeURI(encodeURI(selectTreeNodeText))
+ "&time="
+ new Date()
.getTime(),
'_blank',
'height=400,width=400,top=500,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
},
{
id : 'btncut',
text : '删除',
iconCls : 'icon-cut',
handler : function() {
$('#btnsave').linkbutton('enable');
// alert('cut')
if (selectedMediaId == null
|| selectedMediaId == "") {
alert("请选中要删除的元素");
return;
}
if (window.confirm("确定要删除吗？")) {
$
.ajax( {
type : "POST",
url : "<%=basePath%>media/deleteMyMedia.do?selectedMediaId="
+ selectedMediaId,
success : function(msg) {
var re = eval("["
+ msg + "]")[0];
if (re.success) {
alert(re.msg);
reloadTree(selectTreeNodeId);
}
}
});
}
}
}, '-', {
id : 'btnsave',
text : '保存',
disabled : true,
iconCls : 'icon-save',
handler : function() {
$('#btnsave').linkbutton('disable');
alert('save')
}
} ]
//-------
,
onContextMenu : function(e, row) {
alert(row.id);
e.preventDefault();
// alert(row.id);
// $('#mm').menu('show', {
// left : e.pageX,
// top : e.pageY
// });
}
});
//--------------end
$('#tt2').tree( {
checkbox : false,
//url : 'tree_data.json',
url : 'queryMediaCatJson.do',
onClick : function(node) {
$(this).tree('toggle', node.target);// 监听点击事件;
selectTreeNodeId = node.id;
selectTreeNodeText = node.text;
// alert('you dbclick1111111111 ' + node.text + "node.id="
// + node.id);
// 加载刷新列表;
$('#test').datagrid('load', {
'catId' : node.id
});
},
onContextMenu : function(e, node) {
//alert("haha");
e.preventDefault();
//alert("haha");
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
//-------------- bangding shijian
$('#test').bind('contextmenu', function(e) {
alert("haha");
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
});
//
// var subtitle =$(this).children("span").text();
// $('#mm').data("currtab",subtitle);
//
// return false;
// });
});
</script>
<script type="text/javascript">
function reloadTree(catId) {
$('#test').datagrid('load', {
'catId' : catId
});
}
function getDescribe(describe) {
//alert("获取到desc:" + describe);
window
.open(
"uploader.jsp?selectTreeNodeId=" + selectTreeNodeId
+ "&selectTreeNodeText="
+ encodeURI(encodeURI(selectTreeNodeText))
+ "&time=" + new Date().getTime() + "&describe="
+ encodeURI(encodeURI(describe)),
'_blank',
'height=400,width=400,top=500,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
</script>
</head>
<body class="easyui-layout">
<!-- <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>-->
<div region="west" split="true" title="分类" border="false"
style="width: 150px; padding: 10px;">
<ul id="tt2"
style="padding-left: 0; padding-top: 0; width: 100%; height: 100%; margin-left: 0; margin-top: 0"></ul>
</div>
<div region="east" split="true" title="详情"
style="width: 315px; height: 100px">
<div id="p" class="easyui-panel" title=""
style="width: 315px; height: 250px; background: #fafafa;"
data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
<!-- <label>-->
<!-- 名称:-->
<!-- </label>-->
<!-- <label id="nameLable"></label>-->
<!-- <tr align="center">-->
<table border=0 class="form_table" width="50%" align="center"
height="40%">
<tr height="20" style="height: 20px">
<th height="20" width="35%" nowrap>
名称:
</th>
<td colspan="3" nowrap>
<label id="nameLable"></label>
</td>
</tr>
<tr>
<th width="35%" nowrap>
文件大小:
</th>
<td colspan="3" nowrap>
<label id="fileSize"></label>
</td>
</tr>
<tr>
<th width="35%" nowrap>
上传时间:
</th>
<td colspan="3" nowrap>
<label id="uploadTime"></label>
</td>
</tr>
</table>
</tr>
</div>
<div id="p" class="easyui-panel" title="预览"
style="width: 310px; height: 230px; padding: 0px; background: #fafafa;"
data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
<img alt="" width="100%" height="100%" src="" id="preview"
style="display: none">
<iframe src="" id="myframe" frameborder=0 width='100%' height='100%'></iframe>
</div>
</div>
<div id="mm" class="easyui-menu" style="width: 120px;">
<div onclick="append()" iconCls="icon-add">
Append
</div>
<div onclick="remove()" iconCls="icon-remove">
Remove
</div>
<div class="menu-sep"></div>
<div onclick="expand()">
Expand
</div>
<div onclick="collapse()">
Collapse
</div>
</div>
<div region="center" title="列表区" height="100%">
<table id="test" width="100%" height="100%"></table>
</div>
</body>
</html>
pageEncoding="GBK"%>
<!--<%@ include file="../common/taglib.jsp"%>-->
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- <jsp:include page='/common/easyuiref.jsp'></jsp:include>-->
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../resource/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="resource/ext/resources/css/xtheme-aero.css" />
<script type="text/javascript" src="../resource/ext/ext-base.js">
</script>
<script type="text/javascript" src="../resource/ext/ext-all.js">
</script>
<script type="text/javascript"
src="../resource/messagebox/js/common.js">
</script>
<script type="text/javascript"
src="../resource/messagebox/js/subModal.js">
</script>
<script type="text/javascript"
src="<c:url value='/resource/EHM/Base.js'/>">
</script>
<script type="text/javascript">
EHM.ImportCalendar()
ChangeSkinAPP.Register(function() {
ChangeSkin.Import("style.css");
});
ChangeSkinAPP.init();
</script>
<style type="text/css">
.graph {
width: 300px;
margin: 2px 0px 0px;
border: 1px solid #F8B3D0;
height: 18px;
text-align: center;
display: none;
}
#bar {
display: none;
background: #FFE7F4;
float: left;
height: 100%;
text-align: right;
}
</style>
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../js/jquery-easyui-1.2.2/themes/icon.css">
<script type="text/javascript"
src="../js/jquery-easyui-1.2.2/jquery-1.4.4.min.js">
</script>
<script type="text/javascript"
src="../js/jquery-easyui-1.2.2/jquery.easyui.min.js">
</script>
<script>
var selectTreeNodeId = "";
var selectTreeNodeText = "";
var selectedMediaId = "";
$(function() {
var p = $('body').layout('panel', 'west').panel( {
onCollapse : function() {// 监听westPanel折叠事件;
//alert('collapse');
}
});
setTimeout(function() {
//$('body').layout('collapse','east');// 动态改变折叠
}, 0);
//----------datagrid begin------
$('#test')
.datagrid(
{
title : '列表区',
//iconCls : 'icon-save',
width : 940,
height : 470,
nowrap : false,
// striped : true,
//collapsible : true,//
//url : 'datagrid_data.json',
url : 'queryMediaJsonByCat.do',
checkbox : true,
sortName : 'code',
sortOrder : 'desc',
//remoteSort : false,
idField : 'mediaId',
onRowContextMenu: function (e, rowIndex, rowData){
e.preventDefault();
$('#mm').menu('show', {
left:e.pageX,
top:e.pageY
});
},
onClickRow : function(rowIndex) {
var rows = $('#test').datagrid('getRows');// 获取所有的行;
$('#test').datagrid('clearSelections');// 清除黄色背景;
$('#test').datagrid('selectRow', rowIndex);
selectedMediaId = rows[rowIndex].mediaId;
$('#nameLable').text(rows[rowIndex].mediaName);
var src = "<%=basePath%>"
+ rows[rowIndex].mediaOriPath;
document.getElementById("preview").src = src;
document.getElementById("myframe").src = "preViewDetail.do?selectedMediaId="
+ selectedMediaId;
},
onContextMenu : function(e, row) {
e.preventDefault();
alert(row.id);
},
// 跨行的;
columns : [
// [
// 跨列
// {
// title : 'Base Information',
// colspan : 3
// },
//
// {
// field : 'opt',
// title : 'Operation',
// width : 100,
// align : 'center',
// rowspan : 2,
// formatter : function(value, rec) {
// return '<span style="color:red">Edit Delete</span>';
// }
// } ],
[ {
field : 'mediaId',
title : '序号',
width : 120
//,
// styler : function(value, row, index) {
// return 'background-color:white;color:white';
// }
}, {
field : 'mediaName',
title : '媒体',
width : 120,
rowspan : 2,
sortable : true,
sorter : function(a, b) {
return (a > b ? 1 : -1);
}
},
{
field : 'mediaOriPath',
title : '保存路径',
width : 150,
rowspan : 2
},
{
field : 'mediaDesc',
title : '描述',
width : 150,
rowspan : 2
}
] ],
pagination : true,
rownumbers : true,
toolbar : [
{
id : 'btnadd',
text : '增加',
iconCls : 'icon-add',
handler : function() {
$('#btnsave').linkbutton('enable');
window
.open(
"uploadDescribe.jsp?selectTreeNodeId="
+ selectTreeNodeId
+ "&selectTreeNodeText="
+ encodeURI(encodeURI(selectTreeNodeText))
+ "&time="
+ new Date()
.getTime(),
'_blank',
'height=400,width=400,top=500,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
},
{
id : 'btncut',
text : '删除',
iconCls : 'icon-cut',
handler : function() {
$('#btnsave').linkbutton('enable');
// alert('cut')
if (selectedMediaId == null
|| selectedMediaId == "") {
alert("请选中要删除的元素");
return;
}
if (window.confirm("确定要删除吗？")) {
$
.ajax( {
type : "POST",
url : "<%=basePath%>media/deleteMyMedia.do?selectedMediaId="
+ selectedMediaId,
success : function(msg) {
var re = eval("["
+ msg + "]")[0];
if (re.success) {
alert(re.msg);
reloadTree(selectTreeNodeId);
}
}
});
}
}
}, '-', {
id : 'btnsave',
text : '保存',
disabled : true,
iconCls : 'icon-save',
handler : function() {
$('#btnsave').linkbutton('disable');
alert('save')
}
} ]
//-------
,
onContextMenu : function(e, row) {
alert(row.id);
e.preventDefault();
// alert(row.id);
// $('#mm').menu('show', {
// left : e.pageX,
// top : e.pageY
// });
}
});
//--------------end
$('#tt2').tree( {
checkbox : false,
//url : 'tree_data.json',
url : 'queryMediaCatJson.do',
onClick : function(node) {
$(this).tree('toggle', node.target);// 监听点击事件;
selectTreeNodeId = node.id;
selectTreeNodeText = node.text;
// alert('you dbclick1111111111 ' + node.text + "node.id="
// + node.id);
// 加载刷新列表;
$('#test').datagrid('load', {
'catId' : node.id
});
},
onContextMenu : function(e, node) {
//alert("haha");
e.preventDefault();
//alert("haha");
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
//-------------- bangding shijian
$('#test').bind('contextmenu', function(e) {
alert("haha");
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
});
//
// var subtitle =$(this).children("span").text();
// $('#mm').data("currtab",subtitle);
//
// return false;
// });
});
</script>
<script type="text/javascript">
function reloadTree(catId) {
$('#test').datagrid('load', {
'catId' : catId
});
}
function getDescribe(describe) {
//alert("获取到desc:" + describe);
window
.open(
"uploader.jsp?selectTreeNodeId=" + selectTreeNodeId
+ "&selectTreeNodeText="
+ encodeURI(encodeURI(selectTreeNodeText))
+ "&time=" + new Date().getTime() + "&describe="
+ encodeURI(encodeURI(describe)),
'_blank',
'height=400,width=400,top=500,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
</script>
</head>
<body class="easyui-layout">
<!-- <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>-->
<div region="west" split="true" title="分类" border="false"
style="width: 150px; padding: 10px;">
<ul id="tt2"
style="padding-left: 0; padding-top: 0; width: 100%; height: 100%; margin-left: 0; margin-top: 0"></ul>
</div>
<div region="east" split="true" title="详情"
style="width: 315px; height: 100px">
<div id="p" class="easyui-panel" title=""
style="width: 315px; height: 250px; background: #fafafa;"
data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
<!-- <label>-->
<!-- 名称:-->
<!-- </label>-->
<!-- <label id="nameLable"></label>-->
<!-- <tr align="center">-->
<table border=0 class="form_table" width="50%" align="center"
height="40%">
<tr height="20" style="height: 20px">
<th height="20" width="35%" nowrap>
名称:
</th>
<td colspan="3" nowrap>
<label id="nameLable"></label>
</td>
</tr>
<tr>
<th width="35%" nowrap>
文件大小:
</th>
<td colspan="3" nowrap>
<label id="fileSize"></label>
</td>
</tr>
<tr>
<th width="35%" nowrap>
上传时间:
</th>
<td colspan="3" nowrap>
<label id="uploadTime"></label>
</td>
</tr>
</table>
</tr>
</div>
<div id="p" class="easyui-panel" title="预览"
style="width: 310px; height: 230px; padding: 0px; background: #fafafa;"
data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
<img alt="" width="100%" height="100%" src="" id="preview"
style="display: none">
<iframe src="" id="myframe" frameborder=0 width='100%' height='100%'></iframe>
</div>
</div>
<div id="mm" class="easyui-menu" style="width: 120px;">
<div onclick="append()" iconCls="icon-add">
Append
</div>
<div onclick="remove()" iconCls="icon-remove">
Remove
</div>
<div class="menu-sep"></div>
<div onclick="expand()">
Expand
</div>
<div onclick="collapse()">
Collapse
</div>
</div>
<div region="center" title="列表区" height="100%">
<table id="test" width="100%" height="100%"></table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 递归遍历树结构顺序显示并且添加到list集合
- 如何在TabControl中响应右键鼠标（添加一个ContextMenu就可以了），如何让在tab标签处右键菜单和在内容处右键菜单显示不同的菜单？
- 得到对象调用的其他对象,显示为树形结构
- 【转】DropDownList中显示无限级树形结构
- 用存储过程显示树形结构
- alv tree 为显示的树结构数据添加图片
- 一个使用GridView显示数据,并且可以进行添加、修改、删除操作的例子
- 通过树形结构在控制台显示XML文档的全部内容
- Linux用树形结构显示目录结构
- Linux用树形结构显示目录结构
- TreeView 显示树形结构
- 在DropDownList中显示树形结构
- 页面中用实现的树形结构 《添加，删除，添加全部，删除全部》
- 今天写了一个通过switch进行添加，修过，显示，删除程序，发上来大家看看，哈哈，并且用了smarty模版
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品，删除购物商品并且显示购物车信息。
- 在DropDownList中显示树形结构
- TreeView树形显示和添加地区
- 查询系统所有存储过程,并以树形结构显示
- DropDownList中显示无限级树形结构
- dropdownlist中显示树形结构内容