easyui学习笔记

RollingInTheDeepc

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2024-04-08 13:00:00 发布 446 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

easyui学习笔记

依赖说明

1.easyui依赖于jquery框架之上，在使用easyui需要导入jquery相关的文件。
2.引入文件说明

 //样式文件必选
<link rel="stylesheet" type="text/css" href="${Config.baseURL }view/demoframe/style/css/easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="${Config.baseURL }view/demoframe/style/css/easyui/icons/icon.css">

<body class="easyui-layout">
<div data-options="region:'north',title:'控制面板'"></div>
<div data-options="region:'east',title:'东部区域'" style="width: 50px"></div>
<div data-options="region:'west',title:'西部区域'" style="width: 250px">
</div>
<div data-options="region:'south',title:'南部区域'"></div>
<div data-options="region:'center',title:'中心区域'">
    <div id="tt" class="easyui-tabs" fit="true"></div>
  </div>

//easyui和jquery这两者必选
<script type="text/javascript" src="${Config.baseURL }view/demoframe/js/easyui/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${Config.baseURL }view/demoframe/js/easyui/jquery.easyui.min.js"></script>

easyui布局方式

布局方式两种，通过class创建hejquery脚本创建（建议使用class创建布局方式）

easyui佈局方式，將整个父级元素，分为五大块

2.注意easyui中layout中url属性，只加载body中的代码片段

表单控件

1.表单控件使用的思想
（1）直接使用控件的方式，隐藏使用iframe的方式，通过表单的方式提交（页面的效果没有刷新）
用于表单提交文件内容

（2）只使用form控件的检验功能，使用ajax提交的方式，for控件和校验插件，两者相互依赖
ajax提交内容
(3)用于表单修改时，填充数据表单中的表单项。修改数据