jqueryeasyUI(1 建立CRUD網格)
阿新 • • 發佈：2018-11-03
需要使用到一個js的外掛,但是中文網上的連結已失效,到時訪問失敗,
jquery.edatagrid.js 下載地址: https://download.csdn.net/download/aa15237104245/10608762
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"> <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/jquery.edatagrid.js"></script> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ url: 'http://127.0.0.1:8080/SPR/query.do', saveUrl: 'http://127.0.0.1:8080/SPR/insert.do', updateUrl: 'http://127.0.0.1:8080/SPR/update.do', destroyUrl: 'http://127.0.0.1:8080/SPR/delete.do' }); }); </script> </head> <body> <h2>CRUD DataGrid</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"> </div> <div>Double click the row to begin editing.</div> </div> <table id="dg" title="My Users" style="width:700px;height:250px" toolbar="#toolbar" pagination="true" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="id" width="50" editor="{type:'validatebox',options:{required:true}}">id</th> <th field="sname" width="50" editor="{type:'validatebox',options:{required:true}}">sname</th> <th field="name" width="50" editor="text">name</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div> </body> </html>
- url：從伺服器端檢索使用者資料。
- saveUrl：儲存一個新的使用者資料。
- updateUrl：更新一個已存在的使用者資料。
- destroyUrl：刪除一個已存在的使用者資料。
實現的效果是更加方便使用
