<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<c:set var="ctx" value="<%=basePath %>"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>管理员列表页面
</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyUi/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyUi/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/CSS/main.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.edatagrid.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.edatagrid.lang.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
body{
margin: 0;
}
</style>
<script type="text/javascript">
$(function(){
$('#menuview').edatagrid({});
});
/** 格式化时间*/
function formatTen(num) {
return num > 9 ? (num + "") : ("0" + num);
}
function formatDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return year + "-" + formatTen(month) + "-" + formatTen(day) + " " + formatTen(hour) + ":" + formatTen(minute) + ":" + formatTen(second);
}
function formattime(val,row) {
val = new Date(val);
return formatDate(val);
}
function delData(){
if(confirm("确定要删除数据吗？")){
var ids = "";
var rows = $('#menuview').datagrid('getSelections');
//获取datagrid选中行
for (var i = 0; i < rows.length; i++) {
if(i==rows.length){
ids = ids + rows[i].menuId;
}else{
ids = ids + rows[i].menuId + ',';
}
}
var url ="${ctx}/menu/delData.action?ids="+ids;
url = convertURL(url);
$.get(url, null, function(data) {
alert(data);
self.location.reload();
});
}
}
//给url地址增加时间戳，骗过浏览器，不读取缓存
function convertURL(url) {
//获取时间戳
var timstamp = (new Date()).valueOf();
//将时间戳信息拼接到url上
if (url.indexOf("?") >= 0) {
url = url + "&t=" + timstamp;
} else {
url = url + "?t=" + timstamp;
}
return url;
}
function rowFormater(value, row, index) {
return '<a href="javascript:void(0)" οnclick="showMessageDialog('+ value+');">设置</a>';
}
//url：窗口调用地址，title：窗口标题，width：宽度，height：高度，shadow：是否显示背景阴影罩层
function showMessageDialog(id) {
url="${ctx}/menu/menuManage.jsp?id="+id;
title="设置";
shadow=true;
var content = '<iframe id="menuAdminManage" src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
var boarddiv = '<div id="msgwindow" title="' + title + '"></div>'; //style="overflow:hidden;"可以去掉滚动条
$(document.body).append(boarddiv);
var win = $('#msgwindow').dialog({
content: content,
width: "700px",
height: "500px",
modal: shadow,
title: title,
onClose: function () {
$(this).dialog('destroy');//后面可以关闭后的事件
}
});
win.dialog('open');
}
</script>
</head>
<body style="visibility: visible;">
<table id="menuview"
idField="menuId"
rownumbers="true"
pagination="true"
fitColumns="true"
singleSelect="false"
pageSize="15"
pageList="[15,30,45,60]"
toolbar="#tb"
url="${pageContext.request.contextPath }/menu/list.action"
>
<thead>
<tr>
<th data-options="field:'menuId',width:50,checkbox:'true'"></th>
<th data-options="field:'name',width:80,align:'center'">按钮名称
</th>
<th data-options="field:'actionURL',width:80,align:'center'">按钮URL
</th>
<th data-options="field:'parentMenu',width:80,align:'center'">上级按钮
</th>
<th data-options="field:'modify',width:50,align:'center',formatter:rowFormater">操作
</th>
</tr>
</thead>
</table>
<div id="tb">
<a href="${pageContext.request.contextPath }/menu/addMenu.jsp" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增
</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:delData();">删除
</a>
</div>
</body>
</html>
以上直接将
edatagrid的参数配置在<table>标签中效果：
将edatagrid的配置参数写到$('#menuview').edatagrid({ })中
$(
function(){
$('#menuview'
).edatagrid({
idField: 'Id'
,
rownumbers: true,
pagination: true,
fitColumns: true,
singleSelect: false,
//singleSelect: true,
url:'${pageContext.request.contextPath }/menu/list.action',
//这是数据加载的地址,返回对应的json数据包就行,json包格式例子,见下4
pageSize: 15
,
pageList: [15,30,45,60
],
toolbar:'#tb'
,
saveUrl: '@Url.Action("SaveEdatagrid")',
//新建,都是eadatagrid封装好的,把链接填好就行,点击之后会自动发送json数据包
updateUrl: '@Url.Action("SaveEdatagrid")',
//保存
destroyUrl: '@Url.Action("DeleteEdatagrid")',
//删除
onSave:
function (index, row) {
var $datagrid = $('#menuview'
);
if ($datagrid.data('isSave'
)) {
//如果需要刷新，保存完后刷新
$datagrid.edatagrid('reload'
);
$datagrid.removeData('isSave'
);
}
},
toolbar: [{
text: '增加'
,
iconCls: 'icon-add'
,
handler: function () {
$('#menuview').edatagrid('addRow'
);
}
}, {
text: '保存'
,
iconCls: 'icon-cut'
,
handler: function () {
//标记需要刷新
$('#menuview').data('isSave',
true).edatagrid('saveRow'
);
}
}, '-'
, {
text: '删除'
,
iconCls: 'icon-save'
,
handler: function () {
$('#menuview').edatagrid('destroyRow'
);
}
}]
});
});
转载于:https://www.cnblogs.com/flytogalaxy/p/7560145.html
相关资源：jquery-easyui-edatagrid框架包
