jqueryeasyUI(2 建立展開行明細編輯表單的 CRUD 應用)
阿新 • • 發佈：2018-11-03
需要使用到外掛 datagrid-detailview.js
官網上的連結已失效 下載地址: https://download.csdn.net/download/aa15237104245/10611053
程式碼
index2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>easyUI 建立展開行明細編輯表單的 CRUD 應用</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css"> <style type="text/css"> form{ margin:0; padding:0; } .dv-table td{ border:0; } .dv-table input{ border:1px solid #ccc; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/datagrid-detailview.js"></script> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ view: detailview, detailFormatter:function(index,row){ return '<div class="ddv"></div>'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv'); //console.log(ddv) ddv.panel({ border:false, cache:true, href:'form.jsp?index='+index, onLoad:function(){ $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('selectRow',index); $('#dg').datagrid('getRowDetail',index).find('form').form('load',row); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); }); function saveItem(index){ var row = $('#dg').datagrid('getRows')[index]; var url = row.isNewRecord ? 'http://127.0.0.1:8080/SPR/insert.do' : 'http://127.0.0.1:8080/SPR/update.do?id='+row.id; $('#dg').datagrid('getRowDetail',index).find('form').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(data){ data = eval('('+data+')'); if(data!="error"){ data.isNewRecord = false; $('#dg').datagrid('collapseRow',index); $('#dg').datagrid('updateRow',{ index: index, row: data }); $('#dg').datagrid('reload'); } } }); } function cancelItem(index){ var row = $('#dg').datagrid('getRows')[index]; if (row.isNewRecord){ $('#dg').datagrid('deleteRow',index); } else { $('#dg').datagrid('collapseRow',index); } } function destroyItem(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){ if (r){ var index = $('#dg').datagrid('getRowIndex',row); $.post( 'http://127.0.0.1:8080/SPR/delete.do',{id:row.id},function(){ $('#dg').datagrid('deleteRow',index); }); } }); } } function newItem(){ $('#dg').datagrid('appendRow',{isNewRecord:true}); var index = $('#dg').datagrid('getRows').length - 1; $('#dg').datagrid('expandRow', index); $('#dg').datagrid('selectRow', index); } </script> </head> <body> <h2>Edit form in expanded row details</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"> </div> <div>Click the expand button to expand a detail form.</div> </div> <table id="dg" title="My Users" style="width:100%;height:500px" url='query.do' toolbar="#toolbar" pagination="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50">id</th> <th field="name" width="50">name</th> <th field="sname" width="50">sName</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">新建</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">刪除</a> </div> </body> </html>
form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% /* 獲取index2.jsp傳遞過來的值*/ String index=request.getParameter("index"); /* 設定之後,供當前頁面使用el表示式呼叫 */ request.setAttribute("index", index); %> <form method="post"> <table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;"> <tr> <td>id </td> <td><input name="id"></input></td> <td>name</td> <td><input name="name" class="easyui-validatebox" required="true"></input></td> <td>sName</td> <td><input name="sname" class="easyui-validatebox" required="true"></input></td> </tr> </table> <div style="padding:5px 0;text-align:center;padding-right:30px ;" > <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(${index})">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(${index})">Cancel</a> </div> </form>
控制類
package com.penf.www.controller; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.penf.www.model.Student; import com.penf.www.service.StudentService; import com.penf.www.util.ResultSuccessInfo; @Controller public class StudentController { @Resource private StudentService stuService; @RequestMapping("query") public @ResponseBody Object query(HttpServletRequest request){ //ResultSuccessInfo succinfo=new ResultSuccessInfo(); //succinfo.setResult(stuService.queryAll()); String index=request.getParameter("index"); if(index==null){ return stuService.queryAll(); }else{ return stuService.selectById(Integer.parseInt(index)); } } @RequestMapping("insert") public @ResponseBody Object insert(HttpServletRequest request){ Student stu=new Student(); String sname=request.getParameter("sname"); String name=request.getParameter("name"); if(name!=null || sname !=null){ stu.setName(name); stu.setSname(sname); // System.out.println(stu); stuService.insert(stu); return stu; } return "error"; } @RequestMapping("update") public @ResponseBody Object update(HttpServletRequest request){ Student stu=new Student(); String id=request.getParameter("id"); String sname=request.getParameter("sname"); String name=request.getParameter("name"); if(name!=null || sname !=null){ stu.setName(name); stu.setSname(sname); stu.setId(Integer.parseInt(id)); // System.out.println(stu); stuService.update(stu); return stu; } return "error"; } @RequestMapping("delete") public @ResponseBody Object delete(HttpServletRequest request){ String id=request.getParameter("id"); if(id!=null ){ stuService.deleteById(Integer.parseInt(id)); return true; } return false; } }
執行之後,即可實現能在網頁中展開明細