<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>常用控件Demo</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <!-- 为了按顺序演示，本地javascript代码都在body最后面 --> <body> <!-- 通过设置宽度和左右边距auto使form居中 --> <form class="main_form" style="margin:8px auto;width:600px;"> <!-- 按钮演示,每个panel放置一种控件的演示 --> <div class="easyui-panel" title="按钮linkbutton 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <!-- 最基本的按钮，设置一个图标，并设定按钮宽度，建议所有按钮采用风格一致的图标，并设置统一的大小，这样就建立一个一致的网页风格--> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">搜索</a> <!-- 偶尔也会使用图标在上方(top)的加大按钮样式 --> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',size:'large',iconAlign:'top'" style="width:80px">Add</a> <!-- 有时候在页面内容区域放置一个工具栏，采用扁平风格效果很好plain:true --> <div class="easyui-panel" style="padding:8px;margin:8px 0px"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">取消</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">刷新</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">搜索</a> </div> </div> <div class="easyui-panel" title="搜索框searchbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <!-- 第一个示例主要注意方法的绑定是通过searcher:doSearch这个 data-options来的 --> <input class="easyui-searchbox" data-options="prompt:'请输入关键字',searcher:doSearch" style="width:200px"> <!-- 带分类目录的searchbox，注意分类目录通过menu:'#category'绑定，#表示按id选择 --> <input class="easyui-searchbox" data-options="prompt:'请输入关键字',menu:'#category',searcher:doCategorySearch" style="width:200px"> <div id="category"> <div data-options="name:'all',iconCls:'icon-ok'">全部</div> <div data-options="name:'news'">新闻</div> <div data-options="name:'pic'">图片</div> <div data-options="name:'music'">音乐</div> </div> </div> <div class="easyui-panel" title="密码框passwordbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <!-- 密码框的设计简单而好用--> <input id="passwordbox" class="easyui-passwordbox" prompt="请输入密码" iconWidth="28" style="width:200px;height:32px;padding:10px"> </div> <div class="easyui-panel" title="文件框filebox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <input id="filebox" class="easyui-filebox" label="文件:" labelPosition="top" data-options="prompt:'请选择文件...'" style="width:200px"> <a href="javascript:void(0)" onclick="getFileInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:120px">获取文件信息</a> </div> <div class="easyui-panel" title="数字输入框numberbox 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <!-- numberbox只能输入数字，且可以设置最大最小值，非常方便 --> <input class="easyui-numberbox" data-options="label:'年龄:',labelPosition:'top',min:0,max:100" style="width:200px;"> </div> <div class="easyui-panel" title="日期、时间选择框 示例" style="width:480px;margin-bottom:10px;padding:30px 60px;"> <!-- 选择日期后，对应日期显示在span中 --> <input id="datebox" class="easyui-datebox" data-options="label:'请选择日期:',labelPosition:'top',onSelect:doSelectDate" style="width:200px;"> <div>您选择的日期是：<span id="selectDate"></span></div> <!-- 时间选择框 --> <input class="easyui-datetimebox" label="请选择时间:" labelPosition="top" style="width:200px;"> </div> </form> <script type="text/javascript"> //已经将搜索框的内容封装到value里面了，直接用即可 function doSearch(value){ alert('您要搜索：'+value); } //注意是按categoryName对应的是网页中name对应的值 function doCategorySearch(value,categoryName){ alert('您要搜索: '+categoryName+'/'+value); } //注意easyui中组件的取值方式！此处是文件的详细路径 function getFileInfo(){ alert($(filebox).filebox('getValue')); } //自动封装日期到date function doSelectDate(date){ alert($(datebox).datebox('getValue')); var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var result=y+'年'+m+'月'+d+'日'; $('#selectDate').text(result); } </script> </body> </html>
![EasyUI-DataGrid控件[表格+日历]应用](https://ucc.alicdn.com/pic/developer-ecology/cb1b36e8855642b5bcc71862cfcac533.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)