<%@ 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)" onclick="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'); } }] }); });