1. Download the development kit of easyUI
The structure of the package is
2. Import the resource file of easyUI into the page:
<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>
1.1 layout page layout
<body class="easyui-layout">
<!-- 使用div元素描述每个区域 -->
<div style="height: 100px" data-options="region:'north'">北部区域</div>
<div style="width: 200px" data-options="region:'west'">西部区域</div>
<div data-options="region:'center'">中心区域</div>
<div style="width: 100px" data-options="region:'east'">东部区域</div>
<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>| region | string | Define the layout panel position, this value is one of the following: north, south, east, west, center |
UI
1.2 accordion folding panel
<!-- 制作accordion折叠面板
fit:true----自适应(填充父容器)
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
效果：
| selected | boolean | Set to true to expand the panel. | false |
| title | String | Set the title of the panel | |
| iconCls | String | CSS class for an icon to display in the tab panel title | icon-search (query) icon-add (increase) icon-cancel (delete) icon-save (save) |
1.3 tabs tab panel
<!-- 制作一个tabs选项卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div data-options="closable:true" title="面板二">2222</div>
<div title="面板三">3333</div>
</div>display page
| closable | boolean | When set to true, the tab panel will display a button that can be clicked to close the tab panel. | false |
1.4 Introduce ztree-related files in the page:
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script> <!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting = {};
//构造节点数据
var zNodes = [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"}
]},//每个json对象表示一个节点数据
{"name":"节点二"},
{"name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>The effect is as shown in the figure
1.5 Use simple json data to construct ztree (emphasis)
<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script> 其中pId表示父节点 例如 {"id":"1","pId":"2","name":"节点一"} {"id":"2","pId":"3","name":"节点二"} 表示节点一是节点二的子节点display effect
1.6 Send ajax request to get json data to construct ztree
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>$.post(url,data,success(data, textStatus, jqXHR),dataType)
| url | required. Specifies which URL to send the request to. |
| data | optional. map or string value. Specifies the data sent to the server with the request. |
| success(data, textStatus, jqXHR) | optional. Callback function to be executed when the request is successful. |
| dataType | optional. Specifies the expected data type of the server response. Intelligent judgment (xml, json, script or html) is executed by default. |
1.7 Use the API provided by ztree to bind events to nodes
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
//判断选项卡是否已经存在
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在，选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
});
}
}
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
| select | which | To select a tab panel, the 'which' argument can be the title or index of the tab panel. |
| exists | which | Indicates if the particular panel is present, the 'which' argument can be the title or index of the tab panel. |
| add | options | To add a new tab panel, the option parameter is a configuration object, see Tab Panel Properties for more details. When adding a new tab to the panel, it will become selected. To add an unselected tab panel, remember to set the "selected" property to false. // add a unselected tab panel
$('#tt').tabs('add',
{
title: 'new tab',
selected: false
//...
}); |
1.7 How to use jQuery easyUI messager
alert
| .messenger.alert | title, msg, icon, fn | Display a warning window. Parameters: title: The title text to display in the title panel. msg: Message text to display. icon: The icon of the image to be displayed. Available values are: error, question, info, warning. fn: This callback function is triggered when the window is closed. Code example: $.messager.alert('My Title','Here is a info message!','info'); |
//alert方法 消息提示框
$(function(){
$.messager.alert("标题","内容","info");
});
The effect is as follows
confirm
| .messenger.confirm | title, msg, fn | 显示一个确认消息窗口,可以取消按钮。参数: title: 标题文本显示在标题面板。 msg: 消息文本显示。 fn(b): 回调函数,当用户单击Ok按钮,通过true函数,否则通过false来它。 代码示例: $.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){if (r){ // exit action; } }); |
//confirm方法 确认框 其中function中的参数可以任意字母，返回值有true false
$(function(){
$.messager.confirm("提示信息","你确定要删除这条信息吗?",function(t){
alert(t);
});
}); 效果如下
show
| messager.show | options | 显示一个消息窗口在屏幕底部。选项参数是一个配置对象: showType: 定义了如何将显示消息窗口。可用值: null,slide,fade,show. 默认为slide。 showSpeed: 定义了时间在毫秒完成显示消息窗口。默认值为600。 width: 定义消息窗口的宽度。默认值为250。 height: 定义消息窗口的高度。默认值为100。 title: 标题文本显示在标题面板。 msg: 消息文本显示。 style: 定义了自定义dpecification风格为消息窗口。 timeout: 如果定义为0,消息窗口不会关闭,除非用户关闭它。对unzero定义,消息窗口将自动关闭当超时。默认为4秒。 代码示例: $.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
// display message window top center
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
}); |
//show方法 欢迎框
$(function(){
$.messager.show({
title:'欢迎信息',
msg:'欢迎admin登录',
timeout:5000,
showType:'show'
});
});The effect is as shown in the figure
1.8 Use of jQuery easyUI menubutton menu
<!-- 制作菜单 -->
<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>
<!-- 使用div元素制作下拉菜单 -->
<div id="mm">
<div οnclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密码</div>
<div>联系管理员</div>
<div class="menu-sep"></div>
<div>退出系统</div>
</div>
Among them, the value of iconCls above is also the four kinds of icon-search (query) icon-add (increase) icon-cancel (delete) icon-save (save)
1.9 validatebox use
Validation rules provided:
1. Non-null check required="required"
2. Use validType to specify
email: Regular expression to match email rules.
url: The URL rule that the regular expression matches.
length[0,100]: The x and x characters are allowed.
remote['http://.../action.do','paramName']: send an ajax request to verify the value, return "true" when successful<tr>
<td>确认密码：</td>
<td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
</tr>
1.92 combotree (combination tree)
<!-- 组合树 -->
<input name="parentFunction.id"
class="easyui-combotree" style="width:170px;"
data-options="url:'functionAction_listajax.action'"/>Note The data returned by url is json data, such as the text text is displayed on the interface, and children is the content of the child nodes of the management system
{
"id" : 1,
"text" : "系统管理",
"iconCls" : "icon-save",
"children" : [
{
"text" : "主机信息",
"state" : "closed",
"children" : [
{
"text" : "版本信息"
}
2. How to use datagrid (important)
<!-- 方式一：将静态HTML渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'" >编号</th>
<th data-options="field:'name'" >姓名</th>
<th data-options="field:'age'" >年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李四</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>100</td>
</tr>
</tbody>
</table>
| field | string | Column field name. Equivalent to the value of name in <input> |
display effect
<!-- 方式二：发送ajax请求获取json数据创建datagrid -->
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid.json'"
class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'" >年龄</th>
</tr>
</thead>
</table>Provide the json file:
{"id":"001","name":"李四","age":100},
{"id":"002","name":"王思","age":100},
{"id":"003","name":"利息","age":100}The effect is as shown in the figure
<!-- 方式三：使用easyUI提供的API创建datagrid -->
<table id="mytables">
</table>
<script type="text/javascript">
$(function(){
//页面加载完成后，创建数据表格datagrid
$("#mytables").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id'},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'}
]],
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
alert("sadas");
}},
{text:'删除',iconCls:'icon-remove'},
{text:'更新',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
//分页
pagination:true
});
});
</script>| columns |
array |
Defines all columns in the header row | |
| url | string | A URL requests data from a remote site and it returns json data |
|
| toolbar |
array,selector |
The data grid panel of the top toolbar text is the name of the tool iconCls is the icon of the tool |
If the paging bar is used in the data table, the json that requires the server to respond becomes:
response
The effect is as shown in the figure
2.1 Use of jquery OCUpload one-click upload plugin
Step 1: Import the js file into the page
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>
Step 2: Provide any element on the page
<input id="myButton" type="button" value="上传">Step 3: Call the upload method provided by the plug-in to dynamically modify the HTML page elements
<script type="text/javascript">
$(function(){
//页面加载完成后，调用插件的upload方法，动态修改了HTML页面元素
$("#myButton").upload({
action:'xxx.action',
name:'myFile'
});
});</scripe>
2.2 easyUI combobox drop-down box use
Make a json file:
<input data-options="url:'${pageContext.request.contextPath }/json/combobox_data.json',
valueField:'id',
textField:'name'"
class="easyui-combobox">
There is also a mode attribute inside
| mode | string | Defines how to load list data when text changes. Set to "remote" if the dropdown list box is loaded from the server. When set to "remot" mode, the user type will be sent an http request parameter named "q" to the server to retrieve new data. |
The effect is as shown in the figure
Among them, the value of valueField corresponds to the existence key of json data, and the same is true for textFiled
In short, the values of valueField and textFiled are the key values of json data class="easyui-combobox" indicates that the drop-down box style has been used
2.3 How to use datagrid editing function
| editor | string,object | Displays the edit type. When the string shows the edit type, when the object contains two properties: type: string, edit type, possible types are: text, textarea, checkbox, numberbox, validatebox, datebox combotree, combobox. options: object, the edit type corresponding to the edit option. |
||
| insertRow | param |
|
||
| deleteRow | index | 删除一行。 | ||
| onAfterEdit | rowIndex, rowData, changes | 当用户完成编辑,参数包含: rowIndex: 编辑行索引,从0 rowData: 对应的记录编辑行 changes: 更改的字段/值对 |
||
| getRowIndex | row | 返回指定的行索引,行参数可以一行记录或id字段值。 | ||
| beginEdit | index | 编辑一行结束。 | ||
| endEdit | index | 编辑一行结束。 |
<table id="mytable"></table>
<!-- 方式三：使用easyUI提供的API创建datagrid -->
<script type="text/javascript">
$(function(){
var myIndex = -1;//全局变量，值为正在编辑行的索引
//页面加载完成后，创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{width:150,title:'姓名',field:'name',editor:{
type:'validatebox',
options:{}
}},
{width:150,title:'年龄',field:'age',editor:{
type:'numberbox',
options:{}
}},
{width:150,title:'日期',field:'address',editor:{
type:'datebox',
options:{}
}}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
$("#mytable").datagrid("insertRow",{
index:0,//在第一行插入数据
row:{}//空行
});
$("#mytable").datagrid("beginEdit",0);
myIndex = 0;
}
},
{text:'删除',iconCls:'icon-remove',handler:function(){
//获得选中的行对象
var rows = $("#mytable").datagrid("getSelections");
if(rows.length == 1){
var row = rows[0];
//获得指定行对象的索引
myIndex = $("#mytable").datagrid("getRowIndex",row);
}
$("#mytable").datagrid("deleteRow",myIndex);
//$.post();
}},
{text:'修改',iconCls:'icon-edit',handler:function(){
//获得选中的行对象
var rows = $("#mytable").datagrid("getSelections");
if(rows.length == 1){
var row = rows[0];
//获得指定行对象的索引
myIndex = $("#mytable").datagrid("getRowIndex",row);
}
$("#mytable").datagrid("beginEdit",myIndex);
}},
{text:'保存',iconCls:'icon-save',handler:function(){
$("#mytable").datagrid("endEdit",myIndex);
}}
],
//显示分页条
pagination:true,
pageList:[3,5,7,10],
//数据表格提供的用于监听结束编辑事件
onAfterEdit:function(index,data,changes){
console.info(data);
$.post();
}
});
});
</script>
总结
一般 $("{1}").datagrid(param,value）；
{1}表示那个标签执行的id值 param 表示 操作datagrid(数据表格)的属性 value表示param 的值