EasyUI相關知識點整理
EasyUI相關知識整理
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 License
Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. ——維基百科
在當前的項目中，主要是基於jQuery庫的使用經驗，總結起來有以下幾個方面需要整理：
- 界面浮框：包括window、dialog等浮動窗口，這些窗口的創建以及銷毀。
- 下拉框：包括下拉框的賦值、初始化、屬性設置、聯動等常見操作。
- 表格：DataGrid控件每一行內容的按鈕添加，數據加載，行刪除等常見操作。
- 表單：表單的提交操作，以及附件的提交操作。
- 樹型結構：包括置空、設置圖標、設置雙擊單擊事件。
界面浮框
基本屬性
<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});
與dialog的混淆
在實際開發中，可能定義一個控件為easyui-window，但是在調用方法的過程中，使用$("#id").dialog(‘functionName‘)。這種情況是不規範的，但是也可以生效，因為dialog是對window的擴展，所以可以認為window可以使用的方法，dialog都可以實現。
dialog可以看作是特殊的window，它具有window所不具有的屬性。比如toolbar，buttons，用於定義上方的工具欄和下方的按鈕。
Destroy銷毀和Close關閉
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‘)等。掌握這些方法可以實現下拉框組件的基本使用。
進階操作
- 初始化下拉框時，自動選擇第一行：解決思路是再combobox初始化完成後，使用getData方法獲取combobox的全部數據，獲取combobox控件中的options屬性，找到textField屬性對應的值，找到valueField屬性對應的值，然後執行select方法。
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]);
}- 設置部分下拉框選項不能選中：解決思路是在返回Json數據給combobox時，手動在需要禁止的數據中設置disabled為true。
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);
}- 設置下拉框的聯動效果：解決思路是在combobox的onSelect方法中使用Ajax方法獲取其他需要聯動的combobox中需要加載的數據。
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);
}- 下拉框帶層級的選項內容：解決思路是在需要顯示的Json字符串中，添加一個group屬性，通過不同的group屬性來對下拉框中的內容進行分類。
表格
基本操作
在js代碼中設置datagrid，需要註意重點的屬性columns，pagination等屬性。column中主要涉及到綁定的表格字段名，paginate涉及到控件默認的分頁參數（該屬性設置為true，在後臺可以拿到"page"參數以及"rows"參數）。需要註意的方法包括appendRow、selectRow、deleteRow等一系列和行相關的操作，主要用於在實際業務中增加行、刪除行。
註意loadData方法，對於表格而言不是單傳的加載Json數據，而是要連同行數一起加載，如下所示：
$('#id').datagrid('loadData',{total: 0, rows: []});進階操作
- 在每一行中添加刪除按鈕：解決思路，在columns屬性中添加一列用於容納按鈕，使用name屬性來識別該表格內的同一類按鈕。
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);
});
}
}- 表格中的formatter使用：使用formatter可以對列屬性進行定制輸出，比如特定的顏色、將value轉換為對應的漢字等。
{
field: 'start_time',
title: '開始時間',
align: 'center',
width: '120px',
formatter: function(value){
if(null == value){
return "--";
}
return '<span style="color:#238E23;">' + value + '</span>';
}
}EasyUI相關知識點整理