2.EasyUI入门--easyui的两种渲染页面方法及API文档介绍

本文介绍了EasyUI的两种页面渲染方法，包括通过纯HTML和jQuery结合的方式创建dialog组件。讲解了如何导入依赖，使用CSS主题，以及如何实现中文显示。同时，文章探讨了EasyUI的parser功能，以及dialog组件的API属性，提供了通过JS配置dialog的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导入依赖包到WebRoot目录下

页面引入css、js

css是easyui的主题，在themes下,default是蓝色的, easyui.css内包含了所有的easyui样式，所以只需要导入这一个就可以了。

有时候还需要一些小图标，这些图标虽然可以自己添加，但是建议在写一个css样式放到自己的文件夹下，这样以后升级easyui的时候，可以直接删除原来的easyui版本，换成新的版本，这样不会影响到原先的样式文件。

如何变为中文的easyui？

easyui是支持国际化的，只需引入locale下的对应语言js文件就可以。

我们easyui所有需要引入的文件都引入进来了。

解决乱码的几种方法：页面编码、javascript编码、项目编码一致。

以dialog为例，找一找这个dialog有什么属性，然后他构造的时候，创建的时候怎么去应用？

easyui创建组件的方法有几种：

第一种是纯HTML方式，我们只需要写一个class，div就可以变成easyui的dialog，不需要js。

这也是easyui比较简单的地方。

第二种是我们先写一个div，然后jquery通过id去找到这个div，然后再把这个div变成dialog。

第一种，通过class渲染出dialog：

div中的 class必须以" easyui-"开头，class=" easyui-dialog"自动把div变成dialog，data-options是配置dialog组件的一些属性用的，属性的概念在后面会讲到，API内dialog不只有这么点属性，还有继承自父类的属性。

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"

data-options="iconCls:'icon-save',resizable:true,modal:true">

hello easyui

</div>

为什么没有经过任何js,div就能变成这个样子？

因为easyui有一个功能，在Base下的parser，是通过它来将div里加了class=" easyui- dialog "的标签，变成你想要的样子。

右键查看源码是没有经过parser之后的。

通过控制台去看是经过parser之后的。

第二种，通过js渲染出dialog：

jquery选中id为#dd的div，调用dialog方法对应div应用easyui样式，dialog方法内参数配置采用json格式，json格式可以省略某个参数不写，表示这个参数使用默认值或之前最后一次设置的值，如果设置为null，表示不使用该样式，比如title:null，表示没有标题栏。

$(function(){

//jquery选中id为#dd的div，调用dialog方法对应div应用easyui样式

console.info($('#dd'));

$('#dd').dialog({

title: 'My Dialog',

width: 400,

height: 200,

closed: false,

cache: false,

//href: 'http://www.baidu.com', 无法跳转到百度，用iframe

modal: true

});

这些参数就是dialog的API文档下的属性(Properties)。

这种写法是表示所有DOM节点加载之后(不包括图片)，执行的方法

$(function(){

});

F12调试的时候常用的方法

console.info($('#dd'));

不推荐使用alert，这种方式不知道里面有什么内容。

不给任何参数也是可以的，只要调用了dialog()方法，div就会变成dialog。

视频作者孙宇

博客整理llsses

网址大部分不可用了。。

有兴趣的可以看我上传的孙宇老师的视频。

https://download.csdn.net/download/dsa572713470/11131154