请选择 进入手机版 | 继续访问电脑版

登录  | 立即注册

游客您好!登录后享受更多精彩

查看: 2929|回复: 8

EasyUI(0)——入门

[复制链接]

26

主题

41

帖子

403

积分

中级会员

Rank: 3Rank: 3

积分
403
发表于 2020-1-27 13:58:44 | 显示全部楼层 |阅读模式
文章目录


EasyUI中文官网
Easy介绍

Easyui的目录结构:


Easyui运行需要的依赖文件:


需要引入的文件
  1.            
复制代码
创建easyui组件的2种方式

Html方式

语法格式:class=“easyui-组件名”
  1. class="easyui-panel" 创建组件title="值" 设置标题iconCls="icon-back" 设置图标collapsible="true" 显示折叠按钮
复制代码
JS方式

语法格式:jquery对象.组件名() 或者 jQuery对象.组件名({})
当变成easyui组件之后 他不仅仅可是使用easyui自带的属性和样式,还支持原生的css
  1. $("#mydiv").panel({        title:"这是标题",        iconCls:"icon-ok",        collapsible:true,        width:400,        height:200});
复制代码
设置属性的两种方式

注意:每个组件都依附着指定的标签 就比如说 面板必须依附着div 按钮必须依附这a标签 不能随便依附标签
在easyui组件中html设置属性的方案有两种:

  • 方案一:
  • 方案二:  推荐
常用的组件

linkbutton

linkbutton常见属性


  • iconCls:‘icon-add’ 图标
  • disabled:true 禁用按钮(注意:如果js注册事件,是禁用不了的,如果需要禁用 需要自己写业务逻辑)
  • style=‘width:15%’ 设置按钮的长度
  • iconAlign:默认为left 可选值有top,right,bottom
  • size:‘large’ 大图标
  • plain:true 简介风格 没有边框 ----ugly
html和js创建组件的区别

注意:大家在创建easyui组件的时候,如果创建使用了html方式创建,就不要再使用js创建了  否则将会创建两次 因为html底层就是用js创建的
panel

Easyui组件的三要素:

  • 属性
  • 事件
  • 方法
panel常见属性:

  • title string 在面板头部显示的标题文本
  • iconCls string 设置一个16x16图标的CSS类ID显示在面板左上角。
  • width number 设置面板宽度。
  • height number 设置面板高度。
  • left number 设置面板距离左边的位置(即X轴位置)。  注意:单独用没效果,它是要和cls属性一起用才有效果       了解
  • top number 设置面板距离顶部的位置(即Y轴位置)。   注意:单独用没效果,它是要和cls属性一起用才有效果         了解
  • headerCls string 添加一个CSS类ID到面板头部。  设置面板头部的样式           了解
  • bodyCls string 添加一个CSS类ID到面板正文部分   设置面板体的样式         了解
  • cls string 添加一个CSS类ID到面板。    设置整个面板的样式         了解
  • fit boolean 当设置为true的时候,它会自适应当前window窗体         注意:当用了fit之后,width和height属性就不生效了
  • border boolean 定义是否显示面板边框。
  • content string 面板主体内容,它的值是多少,面板就展示多少,并且会覆盖面板中已有的值
  • collapsible boolean 定义是否显示可折叠按钮。    了解   如果和窗体fit为true一切综合使用的话,效果非常不明显
  • minimizable boolean 定义是否显示最小化按钮。    了解           如果和窗体fit为true一切综合使用的话,效果非常不明显
  • maximizable boolean 定义是否显示最大化按钮。    了解           如果和窗体fit为true一切综合使用的话,效果非常不明显
  • closable boolean 定义是否显示关闭按钮。
  • href string  从URL读取远程数据并且显示到面板   它只会加载body中的内容,body以外的内容根本不执行  了解
  • collapsed boolean 定义是否在初始化的时候折叠面板。
  • minimized boolean 定义是否在初始化的时候最小化面板。   了解
  • maximized boolean 定义是否在初始化的时候最大化面板。  了解
  • closed boolean 定义是否在初始化的时候关闭面板。
  • loadingMessage string 在加载远程数据的时候在面板内显示一条消息。
h5代码
  1. 哈哈哈
  2. 嘻嘻
复制代码
操作easyui默认属性

获取组件拥有默认的属性和事件语法格式:  $.fn.{plugin}.defaults
修改默认属性的值   语法格式: $.fn.{plugin}.defaults.属性 = 值
方法的操作

easyui操作方法的语法格式:
jquery对象.组件(“方法名”,参数)
Tree

animate boolean 定义节点在展开或折叠的时候是否显示动画效果。
checkbox boolean 定义是否在每一个借点之前都显示复选框。
h5代码:
  1. [list]   
  2. [/list]  
复制代码
json代码:
  1. [{        "id":1,            "text":"总经办",        "state":"closed",    "iconCls":"icon-ok",            "children":[                {                        "id":11,                    "iconCls":"icon-remove",                            "text":"教学部",                        "attributes":{                                "url":"https://baidu.com",                                "name":"这是百度"                        }                },{                        "id":12,                    "iconCls":"icon-cancel",                            "text":"学工部",                        "checked":true,                        "attributes":{                                "url":"https://baidu.com",                                "name":"这是百度"                        }                }        ]},{        "id":2,            "text":"总公司",        "children":[                {                        "id":21,                        "text":"小卖部",                        "checked":true,                        "name":"随便加",                        "url":"dsfjhsakfdh"                },{                        "id":22,                        "text":"销售部"                }        ]}]  
复制代码
datagrid


  • fitColumns boolean 自适应列
  • toolbar array,selector  工具栏
  • striped boolean 是否显示斑马线效果。
  • method string 该方法类型请求远程数据。   GET/POST
  • url string 一个URL从远程站点请求数据。
  • pagination boolean  时候显示分页条
  • rownumbers boolean 如果为true,则显示一个行号列。
  • singleSelect boolean 如果为true,则只允许选择一行
  • ctrlSelect boolean   如果为true,它支持shift+鼠标左键多选
  • pagePosition string 定义分页工具栏的位置。可用的值有:‘top’,‘bottom’,‘both’
  • pageNumber number 在设置分页属性的时候初始化页码
  • pageSize number 在设置分页属性的时候初始化页面大小。
  • pageList array 在设置分页属性的时候 初始化页面大小选择列表。
  • rowStyler function  它对行进行上色
  1. [table]        [tr]        ID        用户名        密码        邮箱        头像        年龄        部门    [/tr]    [/table]
复制代码
                                                                                                                                       
                                                    
  • 点赞                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        此生只愿你笑靥如繁花                                                                发布了60 篇原创文章 · 获赞 9 · 访问量 2240                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:Div 用图片作为背景
下一篇:HTML实现网页内部的跳转
回复

使用道具 举报

12

主题

35

帖子

529

积分

高级会员

Rank: 4

积分
529
发表于 2020-2-5 12:39:00 | 显示全部楼层
这个帖子不回对不起自己![www.12360.co]
回复

使用道具 举报

0

主题

34

帖子

724

积分

高级会员

Rank: 4

积分
724
发表于 2020-2-11 00:42:16 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享![www.12360.co]
回复

使用道具 举报

0

主题

16

帖子

346

积分

中级会员

Rank: 3Rank: 3

积分
346
发表于 2020-2-17 10:09:32 | 显示全部楼层
楼主,大恩不言谢了![www.12360.co]
回复

使用道具 举报

0

主题

18

帖子

388

积分

中级会员

Rank: 3Rank: 3

积分
388
发表于 2020-2-24 03:42:32 | 显示全部楼层
我看不错噢 谢谢楼主![www.12360.co]
回复

使用道具 举报

0

主题

30

帖子

640

积分

高级会员

Rank: 4

积分
640
发表于 2020-2-27 04:15:14 | 显示全部楼层
感谢楼主的无私分享![www.12360.co]
回复

使用道具 举报

0

主题

28

帖子

598

积分

高级会员

Rank: 4

积分
598
发表于 2020-3-14 20:50:29 | 显示全部楼层
楼主太厉害了!楼主,I*老*虎*U![www.12360.co]
回复

使用道具 举报

0

主题

31

帖子

661

积分

高级会员

Rank: 4

积分
661
发表于 2020-3-17 05:36:48 | 显示全部楼层
楼主,我太崇拜你了![www.12360.co]
社区不能没有像楼主这样的人才啊!
回复

使用道具 举报

0

主题

30

帖子

640

积分

高级会员

Rank: 4

积分
640
发表于 2020-3-17 06:22:22 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

动物之森

GMT+8, 2020-3-30 14:12 , Processed in 0.087663 second(s), 26 queries .

www.12360.co 集合吧!动物之森

Copyright © 2019-2020.

快速回复 返回顶部 返回列表