jQuery EasyUI API 中文文档 – EasyLoader 加载器

jQuery EasyUI 是一个非常流行的前端 UI 框架，EasyLoader 加载器是其中的一个重要组件。下面我将为你提供关于 EasyLoader 加载器的完整攻略。

EasyLoader 加载器

EasyLoader 是 jQuery EasyUI 框架中的一个模块加载器，能够自动加载和管理 EasyUI 组件。 EasyLoader 支持自动按需加载所需的 JavaScript 和 CSS 文件，并且能通过扩展和重写可以提供更加灵活的加载方式。下面是一些 EasyLoader 的基本用法示例。

使用示例一

首先，我们需要引入 EasyUI 库和 EasyLoader 插件，并且确保 EasyUI 库已经成功加载。

<!-- 引入 EasyUI 样式文件 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<!-- 引入 EasyUI 图标样式文件 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<!-- 引入 jQuery 库文件 -->
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<!-- 引入 EasyUI 核心库文件 -->
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<!-- 引入 EasyLoader 插件库文件 -->
<script type="text/javascript" src="jquery-easyui/plugins/jquery.easyui.loader.min.js"></script>

然后，在页面上我们需要显示一个 EasyUI 的数据表格，在使用 EasyLoader 加载之前，我们需要写如下的代码：

<table id="datagrid"></table>

接着，我们使用 EasyLoader 加载 EasyUI 的 datagrid 组件，代码如下所示：

$.parser.auto = false;
$.easyui.load({
    name: 'datagrid',
    onLoadSuccess: function () {
        $('#datagrid').datagrid({
            url: 'data/data.json'
        });
    }
});

解释一下该代码的含义：

• $.parser.auto = false; 表示禁止自动解析和渲染 EasyUI 组件，这样可以避免冲突和性能问题。
• $.easyui.load() 函数用于加载 EasyUI 组件，其中的 name 属性表示要加载的组件名称，onLoadSuccess 属性表示加载成功之后的回调函数，这里我们使用它来初始化数据表格。
• $('#datagrid').datagrid() 函数用于创建一个数据表格，其中的 url 属性表示采用 Ajax 的方式从 data.json 文件中获取数据并显示到表格中。

使用示例二

另外一个使用 EasyLoader 加载 EasyUI 组件的方法是利用 linkbutton 控件实现动态加载。代码如下所示：

<div id="content">
    <!-- 用于容纳动态添加的 linkbutton 控件 -->
    <div id="tools"></div>

    <!-- 用于容纳动态添加的 datagrid 控件 -->
    <div id="grid"></div>
</div>

在页面上我们定义了一个空的 tools 容器和一个空的 grid 容器，接下来我们将会在这两个容器中通过 EasyLoader 加载 EasyUI 组件。

$.parser.auto = false;
$('#tools').append($('<a href="#">').linkbutton({
    plain: true,
    iconCls: 'icon-search',
    text: '查询',
    onClick: function () {
        $.easyui.load({
            name: 'datagrid',
            onLoadSuccess: function () {
                $('#grid').datagrid({
                    url: 'data/data.json'
                });
            }
        });
    }
}));

解释一下该代码的含义：

• 我们用 $('<a href="#">').linkbutton() 函数来创建一个链接按钮，其中的 onClick 属性表示单击按钮后的回调函数。
• 在回调函数中我们利用 EasyLoader 加载 EasyUI 的 datagrid 组件，并在加载成功后初始化表格控件。这里我们仍然采用了 Ajax 的方式从 data.json 文件中获取数据并显示到表格中。

这两个示例说明了 EasyLoader 加载器的基本用法和优点，应该能够为你提供在实际工作中的帮助。