easyui頁面實現增刪改查和後臺結合的小案例
阿新 • • 發佈：2018-12-09
效果：增刪改查，滑鼠移動到縮圖上進行放大顯示，修改資料時的資料回顯，通過後臺返回的json資料正確顯示頁面，圖片檔案上傳，增刪改的快捷鍵操作，顏色選擇器，右擊選單等等
下面我們先看看效果是不是自己想要的吧，程式碼放最後了~~
資料展示頁面：
顯示頁面時後臺返回的json格式
新增資料頁面：
修改回顯資料頁面：
刪除資料頁面：
jsp頁面程式碼
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>product管理</title> <%@ include file="/WEB-INF/views/head.jsp" %> <!-- 引入自己的js --> <script type="text/javascript" src="/js/model/product.js"></script> </head> <body> <%--資料展示--%> <table id="dataGrid" class="easyui-datagrid" style="width:400px;height:250px" data-options=" url:'/product/page', rownumbers: true,<%--顯示行列號--%> fitColumns:true, <%--singleSelect:true,--%> fit:true, toolbar:'#tb', pagination:true, <%--enableHeaderClickMenu:'true'--%> remoteSort: false, border: false, singleSelect:false, <%--checkbox:true,<%–顯示覆選框–%>--%> checkOnSelect: true,<%--複選框--%> onLoadSuccess:loadSuccess<%-- 頁面載入完後-》顯示放大圖 --%> "> <thead> <tr> <th data-options="field:'',width:80,align:'center',checkbox:true">多選框</th> <th data-options="field:'name',width:80,sortable:'true',align:'center'">名稱</th> <th data-options="field:'color',width:60,sortable:'true',align:'center',formatter:colorFormat">顏色</th> <%--<th data-options="field:'pic',width:80,sortable:'true',align:'center',hidden:true">圖片</th>--%> <th data-options="field:'smallpic',width:80,sortable:'true',align:'center',formatter:imgFormat">縮圖</th> <th data-options="field:'costprice',width:80,sortable:'true',align:'center'">成本價</th> <th data-options="field:'saleprice',width:80,sortable:'true',align:'center'">銷售價</th> <th data-options="field:'types',width:80,sortable:'true',align:'center',formatter:resultFormat">型別</th> <th data-options="field:'unit',width:80,sortable:'true',align:'center',formatter:resultFormat">單位</th> <th data-options="field:'brand',width:80,sortable:'true',align:'center',formatter:resultFormat">品牌</th> </tr> </thead> </table> <%--高階查詢，增刪改 按鈕--%> <div id="tb" style="padding:5px;height:auto"> <div style="margin-bottom:5px;background-color: #e8f1f6"> <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a> <a href="#" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> <%--<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>--%> <%--<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>--%> <a href="#" data-method="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a> </div> <div> <form id="searchForm" action=""> 名稱: <input name="name" class="easyui-textbox" style="width:80px"> <a href="#" class="easyui-linkbutton" data-method="search" iconCls="icon-search">查詢</a> </form> </div> </div> <%--新增，修改 資料 彈出框--%> <div id="productDialog" class="easyui-dialog" title="功能操作" style="width:300px;padding: 15px;" data-options="iconCls:'icon-save',modal:true,closed:true"> <!-- 表單準備 --> <form id="editForm" action="" method="post" enctype="multipart/form-data"<%--上傳圖片--%>> <input id="productId" type="hidden" name="id" /> <table> <tr> <td>名稱:</td> <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td> </tr> <tr> <td>顏色:</td> <td><input class="easyui-validatebox" type="color" name="color"></input></td> </tr> <tr> <td>成本價:</td> <td><input class="easyui-validatebox" type="text" name="costprice"></input></td> </tr> <tr> <td>銷售價:</td> <td><input class="easyui-validatebox" type="text" name="saleprice"></input></td> </tr> <tr> <td>產品圖片:</td> <td> <input name="fileImage" class="easyui-filebox" style="width:100%"> </td> </tr> <tr> <td>單位:</td> <td> <input class="easyui-combobox" name="unit.id" data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findAllUnit'"> </td> </tr> <tr> <td>品牌:</td> <td> <input class="easyui-combobox" name="brand.id" data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findAllBrand'"> </td> </tr> <tr> <td>型別:</td> <td> <input class="easyui-combobox" name="types.id" data-options="groupField:'group',valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findChildren'"> </td> </tr> </table> <div style="text-align:center;padding-top:20px"> <a href="#" class="easyui-linkbutton" data-method="save" iconCls="icon-save">確定</a> <a href="#" class="easyui-linkbutton" onclick="$('#productDialog').dialog('close')" iconCls="icon-cancel">取消</a> </div> </form> </div> <%--這是一個隱藏的右擊增刪改選單哦 寫在body中即可--%> <div id="menu_CRUD" class="easyui-menu" style="width: 30px; display: none;"> <!--放置一個隱藏的選單Div--> <!--具體的選單事件請自行新增，跟toolbar的方法是基本一樣的--> <div id="btn_add" data-method="add" data-options="iconCls:'icon-add'">新增</div> <div id="btn_edit" data-method="edit" data-options="iconCls:'icon-edit'">修改</div> <div id="btn_delete" data-method="delete" data-options="iconCls:'icon-remove'" onclick="">刪除</div> </div> </body> </html>
head.jsp：公共js，css引入 (在做多個頁面時提取出來的相同的css，js)<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%-- 此部分程式碼為公共程式碼部分，在其他頁面引用即可使用 <%@ include file="/WEB-INF/views/head.jsp"%> --%> <!-- easyui的樣式支援 --> <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"> <!-- easyui的圖示支援 --> <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"> <!-- jQuery支援 --> <script type="text/javascript" src="/js/jquery.min.js"></script> <!-- Easyui的功能支援(基於jQuery，必需在jQuery後面)--> <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> <!-- Easyui的國際化支援(中文) --> <script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script> <!-- 對jQuery又做了很多功能擴充套件 --> <script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script> <%--引入驗證的控制元件--%> <link href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" /> <script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script> <!-- 我們自己對於js的擴充套件--公共js --> <script type="text/javascript" src="/WEB-INF/test/common.js"></script> <!-- jquery的按鍵擴充套件支援 --> <script type="text/javascript" src="/js/plugin/shortcut_key/jquery.hotkeys.js"></script> <%-- easyui滑鼠移到圖片上可放大預覽 --%> <script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.base.tooltip.js"></script> <%-- easyui表單編輯擴充套件 會和jeasyui.extensions.datagrid.tooltip.js衝突 --%> <script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.getColumnInfo.js"></script> <script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.editors.js"></script> <script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.edit.cellEdit.js"></script> <!-- datagrid-隱藏列的支援 --> <%-- <link href="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" /> <script src="/easyui/plugin/menu/jeasyui.extensions.menu.js"></script> <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script> <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.columnToggle.js"></script>--%> <link href="/css/plugin/datagrid_hide/Site.css" rel="stylesheet" /> <link href="/css/plugin/datagrid_hide/icon-standard.css" rel="stylesheet" /> <link href="/css/plugin/datagrid_hide/jeasyui.extensions.datagrid.css" rel="stylesheet" /> <script src="/js/plugin/datagrid_hide/jeasyui.extensions.menu.js"></script> <script src="/js/plugin/datagrid_hide/jeasyui.extensions.datagrid.getColumnInfo.js"></script> <script src="/js/plugin/datagrid_hide/jeasyui.extensions.datagrid.columnToggle.js"></script> <%-- datagrid-擴充套件列資訊 rowTooltip: false + tooltip:'true' 配合使用 --%> <script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.tooltip.js"></script> <script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getColumnInfo.js"></script> <script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getDom.js"></script> <script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getRowData.js"></script>
jsp頁面對於的js
function resultFormat(value,row,index) { //型別，單位，品牌 return value.name; } function unitFormat(value,row,index) { return rows.name; } //EasyUI datagrid 與 input type=color 顏色選擇器======================================== function colorFormat(value,row,index) { return "<div style='width: 20px;height:20px;position:relative;margin-left:30px;background-color: "+value+"'></div>" } //顯示圖片：==================================== function imgFormat(value,row,index) { if(value == ''){ return ''; }else{ return "<img id='t3' width='50px' src='"+value+"' alt='xx'>" } } //成功後進行載入 -》圖片放大 function loadSuccess(data) { var rows = data.rows; for(var i=0;i<rows.length;i++){ var result = rows[i]; $.easyui.tooltip.init($("img[src='"+result.smallpic+"']"), { position: "right", content: "<div style=\"width:500px;height:380px;\"><img src='"+result.pic+"' /></div>" }); } } $(function () { var datagrid = $('#dataGrid'); //資料展示 var productDialog = $("#productDialog");//彈框 var searchForm = $('#searchForm'); //查詢表單 var editForm = $('#editForm'); //新增與修改表單 //為所有有data-method的元件新增事件 $("*[data-method]").on("click",function(){ // var method = $(this).data("method"); // zhengqing[method](); zhengqing[$(this).data("method")]() }) //防止汙染 CRUD window.zhengqing = { // 下面做CRUD=============================================== add:function(){ editForm.form("clear"); //清空form中的資料 //新增的時候顯示密碼 $("*[data-save]").show(); $("*[data-save] input").validatebox("enable"); //打開面板(絕對居中) productDialog.dialog("center").dialog('open').dialog("setTitle","新增資料"); }, edit:function () { //記住 ：選擇一條資料才能進行修改 var row = datagrid.datagrid("getSelected"); if(row){ editForm.form("clear"); //清空form中的資料 $("*[data-save]").hide();//隱藏帶data-save屬性的元素 $("*[data-save] input").validatebox("disable"); //打開面板(絕對居中) productDialog.dialog("center").dialog('open').dialog("setTitle","修改資料"); //資料進行回顯 if(row.unit){ //單位 row["unit.id"] = row.unit.id; } if(row.brand){ //品牌 row["brand.id"] = row.brand.id; } if(row.types){ //型別 row["types.id"] = row.types.id; } editForm.form("load",row);//載入資料 }else{ $.messager.alert('提示','請選擇1條資料再進行修改！',"warning"); } }, save:function () { var url = "/product/save";//注意：新增和修改的路徑要分開哦 var id = $("#productId").val(); //拿到表單中的id if(id){ url = "/product/update?cmd=update" } editForm.form('submit', { //提交表單 url: url, onSubmit: function(){ return $(this).form('validate'); //提交之前執行的功能，如果返回false則不會再執行 }, //注意：easyui提交後表單後 返回的值只是一個字串 success: function(result){ //json字串轉換成Json資料 eval("("+jsonStr+")") /JSON.parse(jsonStr) //console.debug(result); result = JSON.parse(result); if(result.success){ datagrid.datagrid('reload'); //成功則重新載入當前頁面 productDialog.dialog('close'); //關閉彈出框 }else{ $.messager.alert('提示','新增失敗:<br /> '+result.msg,"info"); } } }); }, delete:function(){ //可進行多行和單行刪除 //getSelected:返回第一個被選中的行或如果沒有選中的行則返回null。 //getChecked:在複選框唄選中的時候返回所有行。（該方法自1.3版開始可用） var row = datagrid.datagrid("getChecked");//獲取勾選的資料 if (row.length!=0){ $.messager.confirm('確定','是否確定<span style="color: red;font-size: 20px;">刪除'+row.length+'條</span>資料？？',function (r) { for (var i = row.length - 1; i >= 0; i--) { if (r){ $.get("/product/delete",{id:row[i].id},function (result) { if (result.success){ //刪除成功 datagrid.datagrid("reload");//重新整理頁面 reload：刪除之後會在當前頁面 當刪除本頁所有資料之後會跳到前一個頁面 }else { //刪除失敗 $.messager.alert('提示','此資料刪除失敗：<br />'+result.msg,"info"); } }) } } }); }else { $.messager.alert('提示','請選擇1條資料進行刪除',"warning"); } }, // 上面做CRUD=============================================== search:function(){ var params = $("#searchForm").serializeObject();//獲取過濾的引數值 datagrid.datagrid('load',params);//重新整理grid } }; //DataGrid右鍵選單程式碼：======================================= $('#dataGrid').datagrid({ /** * 右鍵時觸發事件 * @param e:裡面功能很多哦 * @param rowIndex:點選時當前所在行的索引 * @param rowData:點選時當前行的資料 */ onRowContextMenu: function (e, rowIndex, rowData) { e.preventDefault(); //阻止瀏覽器捕獲右鍵事件 $(this).datagrid("clearSelections"); //取消所有選中項 $(this).datagrid("selectRow", rowIndex); //根據索引選中該行 $('#menu_CRUD').menu('show', { //顯示右鍵選單 left: e.pageX,//在滑鼠點選處顯示選單 top: e.pageY }); e.preventDefault(); //阻止瀏覽器自帶的右鍵選單彈出 } }); // 快捷鍵支援增刪改--繫結相應的事件--按DEL就會執行刪除,按SHIFT+1是新增,SHIFT+2是修改========================= //注意：需要jquery.hotkeys.js外掛哦！！ $(document).bind('keydown', 'del', zhengqing.delete); $(document).bind('keydown', 'Shift+1', zhengqing.add); $(document).bind('keydown', 'Shift+2', zhengqing.edit); })
溫馨小提示：這裡我只把easyui前臺頁面的一個CRUD的處理給出來，後臺處理返回的資料要根據自己的實現情況來哦，注意前臺頁面傳參和後臺對應，以及後臺處理資料之後返回給頁面的引數，頁面如何去正確接收顯示即可實現一個簡單的增刪改查了，記得多按F12多分析下前臺和後臺的傳引數據哦！！
