EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。也就是说EasyUI只负责提供界面插件,其内部的实现可以基于三大前端框架或者jQuery。
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.It is free, open-source software using the permissive MIT LicenseWeb analysis indicates that it is the most widely deployed JavaScript library by a large margin. ——维基百科
在当前的项目中,主要是基于jQuery库的使用经验,总结起来有以下几个方面需要整理:
<div id = "info" class ="easyui-window" title="信息"
data-option="modal:true,shadow:false,closed:true, iconCls:'icon-save',minimizable:false,maximizable:false,onClose:function(){clearBugWindow()}" style="width:900px;max-height: 750px;padding: 10px">
</div>
具体的属性可以结合JqueryEasyUI API文档去查询,但是在实际的项目中就是如上面那样使用。
- shadow属性:该属性如果设置为true将导致window内部的内容如果折叠,会导致出现莫名其妙的阴影。
- modal属性:该属性设置为true表示为模式化窗口——除非关闭该窗口,否则无法操作其他窗口。
- resize方法:该方法一般用于调整窗口的初始化位置,一般使用如下方式进行操作:
$(‘#id‘).window(‘resize‘,{top: ($(window).height() - 750) * 0.5});
在实际开发中,可能定义一个控件为easyui-window,但是在调用方法的过程中,使用$("#id").dialog(‘functionName‘)。这种情况是不规范的,但是也可以生效,因为dialog是对window的扩展,所以可以认为window可以使用的方法,dialog都可以实现。
dialog可以看作是特殊的window,它具有window所不具有的属性。比如toolbar,buttons,用于定义上方的工具栏和下方的按钮。
close只是将窗体隐藏起来,而destroy意味着将内容销毁。在实际的使用过程中,如果dialog或者window是显示定义在html元素中,close后可以调用open再打开,但是destroy后就无法再使用窗体,除非刷新页面重新初始化元素。
网站的首页有一个主框,所有的子功能模块都是以tab页面的形式呈现,每当选项卡发生改变时,都会刷新页面,这样也就导致用户在两个已经打开的选项卡之间交替作业十分不方便。于是修改逻辑,只当用户点击左侧导航栏时,刷新选项卡;当用户点击已经存在的选项卡时,不刷新选项卡。
问题在于如果对dialog执行destroy后,必须刷新tab来重新创建dialog,需要使用tabs的update方法,然后执行panel的fresh方法,代码如下:
addTab:function(titel,url){ openedTabs[title] = url;//使用一个数组来保存title与url的映射关系 if(title == "A"){ $('#A_dialog').dialog('destroy'); } else if(title = "B"){ $('#B_window').window('destroy'); } if(tab.tabs('exists',title)){ tab.tabs('select',title); var tab = tab.tabs('getSelected'); tab.tabs('update',{ tab: tab, options:{ title:titel, href:url } }); tab.panel('refresh'); //在update后还需要refresh }else{ tab.tabs('add',{ title:titel, closable:true, href:url }); } }
创建方式既可以在HTML标签中增加class="easyui-combobox"属性,也可以在JavaScript代码中对下拉框元素进行初始化:$("#id").combobox({……})。
具体的属性可以结合JqueryEasyUI API文档去查询,需要注意的属性包括limitToList属性(1.5.5版本的easyUI有该属性,但是再往前的版本不一定有这个属性),textField和valueField的属性绑定,$(‘#id‘).combobox(‘loadData‘,data),combobox(‘reload‘,‘url‘)等。掌握这些方法可以实现下拉框组件的基本使用。
selectFirstLineOfCombobox: function(target){
var data = $(targe).combobox("getData");
var options = $(target).combobox("options");
var text = options['textField'];
var valueField = options['valueField'];
$(target).combobox("select",data[0][text]);
$(target).combobox("setValue",data[0][valueField]);
}
public void getEditStatusInfo(){
JSONArray array = convertDefectClientDataToDisplayData();
for(int i = 0;i < array.size();i++){
JSONObject object = array.getJSONObject(i);
int statusValue = object.getIntValue("id");
if(statusValue == 1||statusValue == 2||statusValue == 3){
continue;
}
object.put("disabled" , "true");
}
renderJson(array);
}
onSelect: function(rec){
var devUrl = '/getdata';
var devData = $.ajax({
url: devUrl,
async: false;
});
var devResponse = eval('(' + devData.responseText + ')');
var devLength = devResponse.length;
if(devLength == 0){
return;
}
$("#B").combobox('loadData',devResponse);
}
在js代码中设置datagrid,需要注意重点的属性columns,pagination等属性。column中主要涉及到绑定的表格字段名,paginate涉及到控件默认的分页参数(该属性设置为true,在后台可以拿到"page"参数以及"rows"参数)。需要注意的方法包括appendRow、selectRow、deleteRow等一系列和行相关的操作,主要用于在实际业务中增加行、删除行。
注意loadData方法,对于表格而言不是单传的加载Json数据,而是要连同行数一起加载,如下所示:
$('#id').datagrid('loadData',{total: 0, rows: []});
columns:[[
{field: 'attachmentName', title:'附件名称', width:250},
{
field:'operation', title: '操作', width: 170,
formatter: function(value, row, index){
var str = '<a href="#" name="attachment_delete_button" class="easyui-linkbutton" data-options="onClick:function(){deleteAttachment(' + index + ')}"></a>';
str = str + ' <a href="#" name="attachment_download_button" class="easyui-linkbutton" data-options="onClick:function(){downloadAttachment(' + index +')}"></a>';
return str;
}
}
]],
onLoadSuccess: function(data){
$("a[name='attachment_delete_button']").linkbutton({text:'删除', plain:true, iconCls: 'icon-remove'});
$("a[name='attachment_download_button']").linkbutton({text:'下载', plain:true, iconCls: 'icon-download'});
}
留意formatter属性中的三个参数,value、row、index,这三个参数提供了很大的自由度,针对每一行的内容进行个性化的逻辑处理,比如在这里需要删除单行内容,将index传递给删除方法即可删除指定的行,当然这里又涉及到一个问题,删除行之后index混乱,导致后续的删除有问题,接下来讨论这个问题。
删除行后导致index混乱:解决思路是在删除行后重新加载datagrid,对于从url加载数据的表格而言,直接调用datagrid(‘reload‘)方法即可,对于在前端使用datagrid(‘appendRow‘)方法生成的表格而言,reload无法生效,此时需要:获取数据、重新加载,如下代码:
var rows == $('#id').datagrid('getRows');
$('#id').datagrid('reload');
删除的过程中使用提示框:为了更好的用户体验,防止用户误删记录,一般会在用户删除之前提示用户是否需要进一步删除,在这里用到了easyUI封装好的Messager提示框,在项目中一般会在easyUI提供的方法外面再套一层,实现如下所示:
message: {
info: function(message){
$.messager.alert("提示", message, "info");
},
error: function(message){
$.messager.alert("错误", message, "error");
},
confirm: function(message, fn){
$.messager.confirm("提示", message, function(r){
fn(r);
});
}
}
{
field: 'start_time',
title: '开始时间',
align: 'center',
width: '120px',
formatter: function(value){
if(null == value){
return "--";
}
return '<span style="color:#238E23;">' + value + '</span>';
}
}
原文:https://www.cnblogs.com/mrnx2004/p/10490356.html