关于easyui的记录

Posted 2021-01-11 dengsheng

easyui的简单实用一定要结合文档。

1、首先easyui是jq编写的一个框架。

2、通过class="easy-xxx"的形式定义该元素为easyui的元素，可以通过标签实现easyui，也可以通过js+标签的方式实现easyui。实用js+标签的话需要在js中获取对应的标签。操作如下

1 <!--生成一个dialog组件，生成什么组件就使用什么方法创建，以键值对的形式初始化属性-->
2 $("#标签id").dialog({
3     title: ‘My Dialog‘,
4     width: 400,
5     height: 200,
6 });
<!--直接使用标签的时候属性的配置放置在data-options="以键值对的形式设置属性"-->

3、注意easyui的属性值如果为数字不需要带单位，区别于使用style设置样式。

4、easyui的方法调用以dialog为例，操作如下

1 <!--使用dialog的open方法打开dialog-->
2 $("#标签id").dialog("open");
3 
4 <!--以使用dialog的方法传递方法名为参数，实现easyui组件的方法 -->

5.通常使用$("#标签id").val()获取标签的value值，但是在easyui中一些组件的值需要使用组件的getValue方法来获取。

具体没有整理，datetimebox，combotree这两个组件是需要通过getValue来获取value的。

 

具体的实现需要查看文档，easyui扫描元素有class="easyui-xxx"的形式会自动渲染为easyui的组件，组件的属性设置数值类型的不要带单位，组件的方法调用需要注意，和以往的调用方式不同，

easyui提供了许多的插件供我们使用。如果没有前端人员，easyui是可选的一个前端框架。