2021-05-18

EasyUI组件实例化常用用法：

1、使用class属性渲染实例化EasyUI组件：

在html代码的某些特定标签元素中，通过添加class=“easyui-组件名”来对其进行初始化渲染并实例化EasyUI组件

注意：未渲染之前的html标签元素定义的样式效果在渲染后会保持原状。

<div id="panel01" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;">
        实例化面板组件
</div>

2、使用class和data-options属性实例化EasyUI组件

data-options是jQueryEasyUI最近两个版本才添加的一个特殊属性，通过该属性，开发人员可以对EasyUI组件的实例化及其初始化属性定义，并将其完全写入到html标签元素的属性中。

语法：<特定标签元素 data-option=“属性名称：‘属性值’，属性名称：‘属性值’”></特定标签元素>

注意：属性名称和属性值之间通过“：”符号相连接，“属性名称：‘属性值’”表示一对数据项，每对数据项之间通过“，”隔开

<div id="panel01" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;"
        data-option="iconCls:'icon-save',collapsible:true,title:'面板标题信息-dataoption'">
        实例化面板组件
</div>

3、EasyUI组件属性以标签元素属性的形式初始化

data-options属性定义和标签元素属性定义的呈现效果是一致的，仅赋值方式不同，官方API中，大部分示例是按照data-options或脚本代码来定义组件属性的。

语法：<特定标签元素 EasyUI组件属性名=“值”></特定标签元素>

<div id="panel01" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;"
        iconcls="icon-save" collapsible="true" title="面板标题信息-dataoption">
        实例化面板组件
</div>

4、使用脚本代码实例化EasyUI组件

本方式是在<script>代码片段中通过jQuery选择器获取相应的节点，然后调用jQueryEasyUI的初始化函数，函数的第一个参数是一个对象，该对象中配置了组件的相关属性及事件。

语法：$("#ID选择器").渲染EasyUI组件名称({属性1：值，属性2：值，事件：function(){执行代码}});

<script type="text/javascript">
        $(function () {
            loadPanel();
        });

        function loadPanel() {
            $("#panel01").panel({
                title: "面板标题信息-dataoption",
                collapsible: "true",
                iconcls: "icon-save"
            })
        }
</script>

<div id="panel01" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px;">
        实例化面板组件
</div>