7-20easyUI2
程序员文章站
2022-03-15 17:31:08
...
1~~
.课程介绍 **
**1. 常用组件使用;（掌握）
选项卡
tabs:选项卡
closable：关闭按钮
iconCls:图标
tools:添加工具栏
function removePanel(){
//获取选中的选项卡的索引
var tab = $('#jj').tabs('getSelected');
var index = $('#jj').tabs('getTabIndex',tab);
$("#jj").tabs('close','Tab2');
}
Messager（消息窗口）
//消息提示常用
$.messager.alert('没钱了萨比:','不充钱就滚','info');
//消息窗口(一般)
//confirm确认框 -- (比较多)
/*$.messager.confirm('删就删', '你删老子一个试试', function(r){
if (r){
alert('老子打断你的腿。。。');
}
});*/
//prompt
/*$.messager.prompt('老子问你', '你叫什么名字：', function(r){
if (r){
alert('你的名字：' + r);
}
});*/
form表单组件
datagrid表格组件
layout布局组件
2. 综合案例;（掌握 思路 --第二个项目 CRUD–思路问题 js很多代码 ）
panel linkbutton tree menu**
**
布局
<div class="northCls" data-options="region:'north',split:true">
<div style="font-size:30px;margin-top: 20px;float:left">
源码游泳池
</div>
<div style="font-size:15px;float:right;margin-top:60px ;">
欢迎<span style="color:red;">xxx美女</span>进入
<a href="#">出水</a>
</div>
</div>
<div data-options="region:'south',split:true" style="height:100px;">
可支持千人游泳的最新游泳池
</div>
<div id="treeMenu" data-options="region:'west',title:'菜单信息',split:true" style="width:230px;">
主要存放菜单信息(树菜单)
</div>
<div id="tabsId" class="easyui-tabs" data-options="region:'center'" style="background:#eee;">
</div>
~~
树形菜单
$("#treeMenu").tree({
url:'json/menuTree.json',
//post要报错，乱码
method:'get',
onClick:function(node){
//解决父级不应该添加选项卡
if(node.url){
//先判断选项卡里面是否存在当前的菜单，如果存在，不应该添加
if(!$("#tabsId").tabs('exists',node.text)){
//点击菜单的时候，添加选项卡
$('#tabsId').tabs('add',{
title: node.text,
closable:true,
content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
});
}else{
//选择当前这个页签
$('#tabsId').tabs('select',node.text);
}
}
}
});
增删改查，
<table id="employee-grid" class="easyui-datagrid"
data-options="rownumbers:true,toolbar:'#tb',fit:true,singleSelect:true,collapsible:true,fitColumns:true,url:'json/employee.json',method:'get',pagination:true">
<thead>
<tr>
<th data-options="field:'username',width:80">用户名</th>
<th data-options="field:'email',width:80">邮箱</th>
<th data-options="field:'age',width:80,align:'right'">年龄</th>
<th data-options="field:'headImage',width:120,align:'right'" formatter='headImgFormatter'>头像</th>
<th data-options="field:'department',width:80" formatter='deptFormatter'>部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" data-method='add' class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" data-method='edit' class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" data-method='remove' class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
<form id="searchForm">
用户名: <input id="username" name='username' class="easyui-textbox" style="width:80px">
部门:
<input id="departmentId" name='deptmentId' class="easyui-combobox" data-options="
method:'get',
valueField: 'id',
textField: 'name',
url: 'json/dept.json',
panelHeight:'auto'" />
<a href="#" data-method='search' class="easyui-linkbutton" iconCls="icon-search">搜索</a>
</form>
</div>
</div>
<!--准备弹出的dialog，中间装相应的form modal:模态框 buttons：引用按钮-->
<div id="formDlg" class="easyui-dialog" style="width:300px" closed="true"
data-options="title:'功能操作',modal:true,buttons:'#formButton'">
<form id="operateForm" method="get">
<!-- 隐藏域-->
<input type="hidden" name="id" />
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" type="text" name="username" data-options="required:true,validType:'length[4,12]'"></input></td>
</tr>
<tr pwd="true">
<td>密码:</td>
<td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true,validType:'minLength[6]'"></input></td>
</tr>
<tr pwd="true">
<td>确认密码:</td>
<td><input class="easyui-validatebox" type="password" name="configPassword"
validType="equals['#password','jquery']"
data-options="required:true"></input></td>
</tr>
<tr>
<td>邮件:</td>
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-validatebox" name="age" data-options="required:true,validType:'integerRange[18,60]'"></input></td>
</tr>
<tr>
<td>部门:</td>
<td>
<select name="department.id" class="easyui-combobox" style="width:100px"
data-options="
method:'get',
required:true,
url:'json/dept.json',
valueField:'id',
textField:'name',
panelHeight:'auto'
"
>
</select>
</td>
</tr>
</table>
</form>
<div id="formButton">
<a href="#" class="easyui-linkbutton" data-method="save" data-options="iconCls:'icon-ok'">确定</a>
<a href="#" class="easyui-linkbutton" onclick="$('#formDlg').dialog('close');" data-options="iconCls:'icon-cancel'">取消</a>
</div>
上一篇： 不带头结点的双向循环链表（java实现）
下一篇： 数据库表结构
推荐阅读