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 LicenseWeb 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 + '&nbsp;&nbsp;<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>';
    }
}

表单

基本操作

表格一定得保证排版整洁、清晰，一般会在外面使用一个div框，包含相关的内容。里面可以包括多个form表单、以及通过该表单出现的浮窗、其他被div包裹的工具栏等信息。然后使用固定的样式对元素进行排版，还可以加上fieldset元素、legend元素（这两个元素一般一起使用），美化表单界面如下所示：

<div>
  <form>
    <fieldset>
      <legend>
      </legend>
      <div>
        //每一行用一个div包裹起来，并且给每个div加上class属性，控制样式
      </div>
      <div>
        <span>描述</span>
        <input/>      //输入栏
      </div>
    </fieldset>
  </form>
  <div id="buttons">
    <a id="submit" onclick="submitForm()" href="javascript:void(0)"                    class="easyui-linkbutton">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"                           onclick="closeWindow()"></a>
  </div>
</div>

submitForm: function(){
  $("#formid").form({
    url:url,
    onSubmit: function(param){
      //to do something
    },
    success: function(data){
      //to do something
    }
  });
}

• 表单中的附件提交
  
  使用form元素，需要加上enctype="multipart/form-data" 的属性，method使用post属性。

树形结构

使用div包裹树状图以及工具栏

<div id="window" class="easyui-window" title="所属模块" hidden data-options="iconCls:'icon-save',modal:true,closed:true">
  <div id="tree">
    <ul id="structure_tree"></ul>
  </div>
  <hr>
  <div id="test">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="select()">确定</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="close()">取消</a>
  </div>
</div>

$('#structure_tree').tree({
    lines: true,
    animate: true,
    dnd: true,
    url: url
})

基本操作

• 设置图标
  
  在返回后台的数据中遍历每一个节点对象，然后设置其iconCls属性即可
• 置空
  
  如果要将树形结构控件置空，需要使用$('#tree').tree('loadData',{})进行数据清空
• 双击事件
  
  存在一个onDblClick()方法，用于监听树状控件的双击事件

进阶操作

• 异步树
  
  用户需要在返回的节点设置"state:closed"的属性，这样用户在点击展开按钮时会往url中添加一个参数id，用户可以通过这个id获取到该节点下的Children，从而构造JsonArray结构的数据返回。

• 树形结构数据的构造
  
  需要让节点具备以下的条件：

• 具有parentId属性。叫什么名字无所谓，只需要能够通过这个parentId属性找到父节点即可。如果是处在顶层的节点，则需要给parentId一个默认的值，比如-1。
• 具有Children属性。这个属性是一个JsonArray，所有该节点下的子节点，都会保存在该属性中。
• 具有id属性。节点本身的id。

有了以上三个属性即可参与到树形结构数据的创建中，只需要一次遍历即可得到树形结构。每遍历到一个节点，就找到他的父节点，然后将他放入父节点的children属性中；如果找不到父节点，表示该节点是顶层节点，单独放入到一个列表中。

如此遍历一遍，顶层节点中实际上就已经包含了所有的节点，然后构造一个总的根节点，将顶层节点放到根节点的children属性中即可。代码如下：

JSONObject directoryRootNode = new JSONObject(true);
directoryRootNode.put("id","dir_-1");
directoryRootNode.put("text","root");
directoryRootNode.put("state","open");
directoryRootNode.put(CHILDREN, new JSONArray());
……
for(Integer directoryId : directoryNodeMap.keySet()){
    JSONObject directoryNode = directoryNodeMap.get(directoryId);
    JSONObject parentNode = directoryNodeMap.get(directoryNode.getInteger("parentId"));
    if(null == parentNode){
    directoryRootNode.getJSONArray(CHILDREN).add(directoryNode);
    continue;
    }
    parentNode.getJSONArray(CHILDREN).add(directoryNode);
}
……
JSONArray result = new JSONArray();
result.add(directoryRootNode);
return result;