當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easyui实例案例介绍

發布時間：2023/12/20 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 easyui实例案例介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本篇主要例舉easyui的實例如下：博主這里也只是簡單的介紹了一些easyui常用的，建議學習的話，可以參考easyui的學習文檔api學習，可能要更加好，更加全面，博主這里可能介紹的并不全面。希望對你有點幫助，加油!

easyui datagrid數據表格一：

運行項目：輸入：http://localhost:8080/easyuiDemo1/easyui/12-datagrid.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數據表格</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head><body><table id="tt" width="100%"></table></body><script type="text/javascript"> $('#tt').datagrid({url : '/UserServlet?method=findAll',title:'用戶列表',height:800,fitColumns:true,//擴大或縮小列的尺寸以適應表格的寬度并且防止水平滾動columns:[[ {field:'id',title:'編號',width:80},{field:'username',title:'用戶名',width:80},{field:'password',title:'密碼',width:80},{field:'sex',title:'性別',width:80},{field:'age',title:'年齡',width:80},{field:'birthday',title:'出生日期',width:80},{field:'city',title:'所屬城市',width:80},{field:'salary',title:'薪資',width:80},{field:'starttime',title:'開始時間',width:200},{field:'endtime',title:'結束時間',width:200},]],pagination:true, //在 datagrid 的底部顯示分頁欄pageSize:10, //初始化頁碼 ,每頁顯示多少條pageList:[5,10,15,20], //初始化頁面尺寸的選擇列表 });</script> </html>

效果圖如下：

easyui datagrid數據表格二：

<%@ 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數據表格</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head><table id="mytb" style="width:200px;height:300px"></table><script type="text/javascript">$('#mytb').datagrid({title: '中國感動人物', //表格名稱iconCls: 'icon-edit', //圖標width:800, //表格寬度height:'auto', //表格高度，可指定高度，可自動border:true, //表格是否顯示邊框url:'datagrid.php', //獲取表格數據時請求的地址columns:[[{field:'id',title:'編號',width:100,hidden:false},{field:'name',title:'姓名',width:100},{field:'age',title:'年齡',width:100},{field:'school',title:'人物名稱',width:100}]],pagination:true,//如果表格需要支持分頁，必須設置該選項為truepageSize:5, //表格中每頁顯示的行數pageList:[5,10,15],rownumbers:true, //是否顯示行號nowrap: false, striped: true, //奇偶行是否使用不同的顏色method:'get', //表格數據獲取方式,請求地址是上面定義的urlsortName: 'ID', //按照ID列的值排序sortOrder: 'desc', //使用倒序排序idField: 'id',loadMsg:'數據正在努力加載，請稍后...', //加載數據時顯示提示信息frozenColumns: [[ //固定在表格左側的欄{field: 'ck', checkbox: true},]],toolbar: [{text: '添加',iconCls: 'icon-add',handler: function() {getSelectIds('mytb','沒有選擇');}}, '-', {text: '刪除',iconCls: 'icon-cut',handler: function() {getSelectIds('mytb','沒有選擇');}}, '-', {text: '修改',iconCls: 'icon-save',handler: function() {getSelectIds('mytb','沒有選擇');}}]});</script></body> </html>

效果圖如下：

validatebox驗證框：

<%@ 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>layout</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head> <script type="text/javascript"> /* 用戶驗證 */ $.extend($.fn.validatebox.defaults.rules, {midLength : {validator : function(value, param) {return value.length >= param[0] && value.length<= param[1];},message : ''} }); /* 密碼驗證 */ $.extend($.fn.validatebox.defaults.rules, {equalLength : {validator : function(value, param) {return value.length == param[0] ;},message : '密碼必須為4個字符!'} });</script> <body >  <tr> <td> 請輸入用戶名:<input class="easyui-validatebox" type="text" validType="midLength[2,5]" id="userid" name="username" with="180" required=true missingMessage="用戶名必填" invalidMessage="用戶名必須在2到5個字符之間!"/> </td> </tr> <br/> <br/> <tr> <td>  請輸入用戶密碼：<input class="easyui-validatebox" type="password" validType="equalLength[4]"id="passwordid" name="password" with="180" required=true missingMessage="密碼必填"/> </td> </tr> <br/> <br/> </html>

效果如下：

message提示框架：

效果圖如下：

easyui ?lyout布局：

<%@ 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>layout</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script></head> <script type="text/javascript"> $("a[title]").click(function() {//獲取點擊的那個a標簽的titlevar src = $(this).attr("title");var title = $(this).html();//判斷選項卡有沒有存在，如果存在則選中，不存在添加if($("#tt").tabs('exists',title)){$("#tt").tabs('select',title);}else{//添加選項卡$('#tt').tabs('add', {title : title,content : '<iframe frameborder="0" style=width:100%;height:100% src='+src+'></iframe>',closable : true});} });</script> <body ><div id="cc" class="easyui-layout" fit=truestyle="width: 100%; height: 1000px"><div region="north" title="North Title" split="true"style="height: 100px;"></div><div region="west" split="true" title="菜單" iconCls="icon-ok"style="width: 200px;"><div id="aa" class="easyui-accordion"style="width: 300px; height: 200px;" fit=true><div title="用戶管理" iconCls="icon-save"style="overflow: auto; padding: 10px;"><div><a title="001_message.jsp" style="color: #0099FF;">用戶列表</a></div><div><a title="002_window.jsp" style="color: #0099FF;">功能列表</a></div></div><div title="權限管理" iconCls="icon-reload" selected="true"style="padding: 10px;">content2</div><div title="資源管理" iconCls="icon-reload">content3</div></div></div><div region="center" title="center title"style="padding: 5px; background: #eee;"><div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"fit=true></div></div> </div> </body> </html>

效果圖如下：

總結

以上是生活随笔為你收集整理的easyui实例案例介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： android+6.0+通讯录,Andr
下一篇： ELK日志分析平台（三）— kibana