esayUI实践的一些体会
1.如何在页面中使用 easy ui ?
引入 四个文件
<!-- 引入easy ui -->
<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/easyui/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
2、 学习使用easy ui 布局功能
layout 布局控件使用
将 body、div 分成东西南北中,五个部分
<body class="easyui-layout">
<!-- 布局,将body分为 东西南北中 五个部分 -->
<div region="north" style="height: 100px" title="北部面板">北部</div>
<div data-options="region:'south',title:'南部面板'" style="height: 100px">南部</div>
<div data-options="region:'west',title:'西部面板'" style="width: 100px">西部</div>
<div data-options="region:'east',title:'东部面板'" style="width: 100px">东部</div>
<div data-options="region:'center',title:'中部面板'">中部</div>
</body>
注意,只有center区域的必须的
3、 可折叠菜单 accordion 布局
<!-- 使用可折叠菜单 -->
<!-- 如果子div占满父容器 fit=true -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 折叠菜单 都要提供 title -->
<div data-options="title:'基本菜单'">aa</div>
<div data-options="title:'系统菜单'">bb</div>
</div>
通过 iconCls:'icon-help' 指定图标 (必须引入 icon.css文件 )
4、 选项卡布局 tabs 布局
closable为true , 选项卡可以被关闭
<!-- 使用选项卡布局 -->
<!-- 每个选项卡 必须提供 title -->
<div class="easyui-tabs" data-options="fit:true">
<div data-options="title:'选项卡一'">选项卡一</div>
<div data-options="title:'选项卡二',closable:true">选项卡二</div>
<div data-options="title:'选项卡三'">选项卡三</div>
</div>
ztree
主页菜单栏 树形菜单 生成
树形结构菜单,通常使用 js 类库制作的
bos 菜单树,使用ztree 制作的
1、zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
开发使用 ztree 3.5 (jquery 插件 )
api 文档
css 样式表
demo 案例
js 核心类库
今天目标: 简单树两种方式 (标准数据 和 简单数据 )
导入 jquery.ztree.all-3.5.js 、 zTreeStyle.css (依赖 img 图标文件夹)
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script>
<!-- 引入 ztree 文件 -->
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
2、在accordion折叠菜单中, 编写树形菜单
StandardData 标准树
SimpleData 简单树
第一种: 标准数据
第一步: 在页面生成树 地方,提供 <ul> 标签
<!-- 标准数据 制作 ztree -->
<ul id="basicTree" class="ztree"></ul>
第二步: setting 、数据。初始化
// 初始化 标准数据 树
// 1 、setting
var setting = {};
// 2、数据
var zNodes = [
{
name:'菜单1',
children : [
{name:'菜单11'},
{name:'菜单12'}
]
},
{name:'菜单2'}
];
// 3、 生成树
$.fn.zTree.init($("#basicTree"), setting, zNodes);
第二种: 简单数据
第一步 :在生成树位置,提供 <ul>标签
<!-- 简单数据 制作ztree -->
<ul id="simpleTree" class="ztree"></ul>
第二步: setting 、数据、初始化
// 初始化 简单数据 树
// 1、setting
var setting = {
data : {
simpleData : {
enable : true // 开启简单数据模式
}
}
};
// 2、数据
var zNodes = [ // 每个元素 都要有 id 和 pId
{id:1, pId:0 ,name:'菜单1'},
{id:2, pId:0 ,name:'菜单2'},
{id:11, pId:1 ,name:'菜单11'}, // 是id为1菜单子节点
{id:12, pId:1 ,name:'菜单12'},
{id:121, pId:12 ,name:'菜单121'}
]
// 3、初始化树
$.fn.zTree.init($("#simpleTree"), setting, zNodes);
为树上每个节点,添加点击事件
var setting = {
callback : {
onClick : function(event, treeId, treeNode, clickFlag){
alert("点我了!!!");
}
}
};
编写新增选项卡,和点击切换代码
callback : {
onClick : function(event, treeId, treeNode, clickFlag){
// 点击菜单,在选项卡 布局中,添加tab
// 通过 treeNode 获得树节点数据
// 判断当前选项卡是否存在,如果存在,不添加,切换
if($("#mytabs").tabs('exists',treeNode.name)){
// 存在 ,切换
$("#mytabs").tabs('select',treeNode.name);
}else{
// 不存在
$("#mytabs").tabs('add',{
title : treeNode.name,
content : treeNode.name,
closable: true
});
}
}
}
问题: 如何保证每个选项卡 可以单独刷新
在tabs 选项卡 中嵌入一个 iframe
$("#mytabs").tabs('add',{
title : treeNode.name,
content : "<iframe src='http://www.baidu.com' style='width:100%;height:100%;border:0;'></iframe>",
closable: true
});
ztree提交checkbox信息技巧: if ($("#roleForm").form('validate')) { var treeObj = $.fn.zTree.getZTreeObj("functionTree"); var nodes = treeObj.getCheckedNodes(true); var parentIds=[]; for ( var i = 0; i < nodes.length; i++) { parentIds.push(nodes[i].id); } $("#parentIds").val(parentIds.join(",")); $("#roleForm").submit();
} else { } |
easyUI
消息提示窗口,使用 easy ui 的messager 控件
$.messager.show 右下角消息框
$.messager.alert 弹出框
$.messager.confirm 确认框
// 退出登录 function logoutFun() { $.messager .confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) { if (isConfirm) { // 退出时,清除Session location.href = '${pageContext.request.contextPath }/invalidate.jsp'; // 清除[w1] Session } }); } |
$.messager.prompt 输入框
$.messager.progress 进度
easyUI的ext属性portal
第一步,建立两个div <div id="layout_portal_portal" style="position:relative;height:600px;"> <div></div> <div></div> </div> |
第二部 panels = [ { id : 'p1', title : '公共栏', height : 255, collapsible : true, href:'page_portal_gonggao.action' }, { id : 'p2', title : '代办事宜', height : 255, collapsible : true, href:'page_portal_daiban.action' }, { id : 'p3', title : '预警信息', height : 255, collapsible : true, href:'page_portal_yujing.action' }, { id : 'p4', title : '系统BUG反馈', height : 255, collapsible : true, href:'page_portal_bug.action' }]; $('#layout_portal_portal').portal({ border : false, fit : true }); var state = state = 'p1,p2:p3,p4';/*冒号代表列,逗号代表行*/
addPortalPanels(state); $('#layout_portal_portal').portal('resize'); |
外调函数 function getPanelOptions(id) {[w2] for ( var i = 0; i < panels.length; i++) { if (panels[i].id == id) { return panels[i]; } } return undefined; } function getPortalState() { var aa=[]; for(var columnIndex=0;columnIndex<2;columnIndex++) { var cc=[]; var panels=$('#layout_portal_portal').portal('getPanels',columnIndex); for(var i=0;i<panels.length;i++) { cc.push(panels[i].attr('id')); } aa.push(cc.join(',')); } return aa.join(':'); } function addPortalPanels(portalState) { var columns = portalState.split[w3] (':'); for (var columnIndex = 0; columnIndex < columns.length; columnIndex++) { var cc = columns[columnIndex].split[w4] (','); for (var j = 0; j < cc.length; j++) { var options = getPanelOptions(cc[j]); if (options) {[w5] var p = $('<div/>').attr('id', options.id).appendTo('body'); p.panel(options); $('#layout_portal_portal').portal('add', { panel : p, columnIndex : columnIndex }); } } } } |
easyUI更换主题
第一步:建立div <div style="position: absolute; right: 5px; bottom: 10px; "> <a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a> </div> <div id="layout_north_pfMenu" style="width: 120px; display: none;"> <div onclick="changeTheme('default');">default</div> <div onclick="changeTheme('gray');">gray</div> <div onclick="changeTheme('black');">black</div> <div onclick="changeTheme('bootstrap');">bootstrap</div> <div onclick="changeTheme('metro');">metro</div> </div> |
第二部:替换默认主题地址 changeTheme = function(themeName) { var $easyuiTheme = $('#easyuiTheme'); var url = $easyuiTheme.attr('href'); var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css'; $easyuiTheme.attr('href', href); var $iframe = $('iframe');[w6] if ($iframe.length > 0) { for ( var i = 0; i < $iframe.length; i++) { var ifr = $iframe[i]; $(ifr).contents()[w7] .fin[w8] d('#easyuiTheme').attr('href', href); } } }; |
easyUI弹出窗口
<div onclick="editPassword();">修改密码</div> |
function editPassword[w9] () { $('#editPwdWindow').window('open'); }
初始化函数里面(设置窗口属性) $('#addStandardWindow').window({ title: '添加收派标准', width: 400, modal: true, shadow: true, closed: true, height: 400, resizable:false });
|
<div id="editPwdWindow" class="easyui-window" title="修改密码" collapsible="false" minimizable="false" maximizable="false" icon="icon-save" style="width: 300px; height: 150px; padding: 5px; background: #fafafa"> <div class="easyui-layout" fit="true"> <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;"> <table cellpadding=3> <tr> <td>新密码:</td> <td><input id="txtNewPass" type="Password" class="txt01" /></td> </tr> <tr> <td>确认密码:</td> <td><input id="txtRePass" type="Password" class="txt01" /></td> </tr> </table> </div> <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;"> <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a> <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a> </div> </div>[w10] </div> |
datagrid数据表格
第一步:创建div <div region="center" border="false"> <table id="grid"></table> </div> |
第二部:初始化 $(function() { // 初始化 datagrid // 创建grid $('#grid').datagrid({ iconCls : 'icon-forward', fit : true, |
- 可在toolbar添加事件函数:
var toolbar = [ { id : 'button-view', text : '查看', iconCls : 'icon-search', handler : doView[w11] }, |
//定义冻结列[w12] var frozenColumns = [ [ { field : 'id',[w13] checkbox : true,[w14] rowspan : 2 }, |
小技巧1 全选复选框,只会选中当前页面所有记录,不会选中其它页 获取选中行id
// 1、获得所有选中行 的 id var rows = $("#grid").datagrid('getSelections'); // 每行js对象 // 需要将 许多id 一起发送给我服务器 ,转换 字符串 var ids = []; for(var i=0; i<rows.length ; i++){ ids.push(rows[i].id);// 将id加入数组 } // 2、将这些id 发送服务器,服务器根据 id 删除 $.post("${pageContext.request.contextPath}/standard_delete.action",{ids: ids.join(",")},function(data){
}); |
小技巧2: function doDblClickRow(rowIndex, rowData){ // rowIndex 行号 // rowData 行数据 // 将双击行数据,回显form表单中 $('#name').val(rowData.name); // numberbox 不能直接用val 回显 $('#minweight').numberbox('setValue', rowData.minweight); // 隐藏id $('#standardId').val(rowData.id);
// 弹出窗口 $('#addStandardWindow').window('open'); } ----------------------------------------------------------------------------------------------------------------- 小技巧3: // 重置form $('#standardForm').form('reset'); // 对form 添加离焦事件 $('#standardForm *').trigger('blur'); // 刷新表格 $('#grid').datagrid('reload'); |
小技巧4:将条件传入重新加载查询 $("#btn").click(function() { var param = $('#searchForm').serializeJson();[w16] $('#grid').datagrid('load',param); // 查询数据后,关闭window $('#searchWindow').window('close'); $('#searchForm').form('reset'); }); ---------------------------------------------------------------------------------------------------------------- 将form表单转换成json格式的参数 $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; ================================================================== 编辑表格的一行: l function doDblClickRow(rowIndex, rowData) { //alert("双击表格数据..."); console.info(rowIndex); $('#grid').datagrid('beginEdit', rowIndex);[w17] editIndex = rowIndex; } var editIndex;[w18]
function doAdd() { //添加行 if (editIndex != undefined) { //[w19] $("#grid").datagrid('endEdit', editIndex); } if (editIndex == undefined) { //[w20] //alert("快速添加电子单..."); $("#grid").datagrid('insertRow', { index : 0, row : {} }); $("#grid").datagrid('beginEdit', 0); //[w21] editIndex = 0; //[w22] } }
function doSave() { //保存 $("#grid").datagrid('endEdit', editIndex); //[w23] }
function doCancel() { //取消 if (editIndex != undefined) { $("#grid").datagrid('cancelEdit', editIndex); if (isEmptyObject($("#grid").datagrid('getRows')[editIndex])) { //[w24] $("#grid").datagrid('deleteRow', editIndex); } editIndex = undefined; //[w25] } } function isEmptyObject(obj) { // 遍历对象 每一个属性,如果一个属性都没有,是空对象 for ( var name in obj) { return false; } return true; }
最后经过datagrid的初始化框中的出力函数onAfterEdit : function(rowIndex, rowData, changes) { $.post(); 提交数据 注意,编辑的列需指明可辑属性 var columns = [ [ { field : 'id', title : '工作单号', width : 120, align : 'center', editor : { type : 'validatebox', //[w26] options : { required : true //[w27] } } }, { 技巧:添加鼠标右键菜单 1.初始化表格datagrid内:
e.preventDefault();//[w29] $('#menu').menu('show', { left : e.pageX, // 鼠标当前横坐标 top : e.pageY // 鼠标当前纵坐标 }); $("#showUserId").val(rowData.id); $("#showUserName").html(rowData.username); }
<!-- 自定义菜单 --> <div id="menu" class="easyui-menu" style="width:120px;"> <div onclick="showWindow()">菜单项一</div> <div>菜单项二</div> </div>
|
|
easyUI的form表单数据校验
$('#save').click(function(){ // 判断表单校验是否通过,如果通过再提交 if($('#form').form('validate')){ // 通过 $('#form').submit(); }else{ $.messager.alert("警告","表单存在非法数据,请修正!","warning"); } }); |
下拉项,通过ajax从服务器中读取数据,显示 <input class="easyui-combobox" name="standard.id" data-options="valueField:'id'[w30] ,textField:'name'[w31] ,url:'${pageContext.request.contextPath }/standard_ajaxlist.action'" /> |
easyUI搜索框searchbox
第一步:搜索框 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="menu:'#menu',prompt:'请输入您的查询内容',searcher:doSearch" />[w32] <div id="menu" style="width:120px"> <div data-options="name:'arrivecity'">按到达地查询</div> <div data-options="name:'product'">按商品查询</div> </div> js函数 function doSearch(name, value){ $("#grid").datagrid("load",{ conditionName:value, conditionValue:name [w33] }); }
服务器代码:全文搜索
|
[w1]页面跳转
[w2]返回一个对应的panels
[w3]切割为数组,两行
[w4]两部分,两列
[w5] != null
[w6]各种框架主题替换
[w7]查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
[w8]搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
[w10]js中没有trim函数
$.trim(txtNewPass)==""
[w11]函数名称
[w12]//冻结列 就是指定显示参照列 使其不会出现滚动条
[w13]显示字段名称
[w14]是否可选
[w15]不是冻结列
[w16]将参数转换为json格式
[w17]添加双击事件,给成员变量赋值:选择的行号
[w18]行索引值
[w19]如果行索引值已经赋值,则停止编辑 行
[w20]如果行索引值未定义则,插入一行
[w21]开始编辑
[w22]重新赋值
[w23]结束编辑
[w24]如果取消编辑行为空,则删除所在行
[w25]重新赋值,未定义
[w26]text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
[w28]e 事件对象, rowIndex 行号 , rowData 行数据
[w29]阻止默认事件执行
[w31]显示项
[w33]json格式参数传入,重新加载