1.1.1 介绍
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。
插件列表如下:
分类 | 插件 |
Base(基础) | · Parser 解析器 · Easyloader 加载器 · Draggable 可拖动 · Droppable 可放置 · Resizable 可调整尺寸 · Pagination 分页 · Searchbox 搜索框 · Progressbar 进度条 · Tooltip 提示框 |
Layout(布局) | · Panel 面板 · Tabs 标签页/选项卡 · Accordion 折叠面板 · Layout 布局 |
Menu(菜单)与 Button(按钮) | · Menu 菜单 · Linkbutton 链接按钮 · Menubutton 菜单按钮 · Splitbutton 分割按钮 |
Form(表单) | · Form 表单 · Validatebox 验证框 · Combo 组合 · Combobox 组合框 · Combotree 组合树 · Combogrid 组合网格 · Numberbox 数字框 · Datebox 日期框 · Datetimebox 日期时间框 · Calendar 日历 · Spinner 微调器 · Numberspinner 数值微调器 · Timespinner 时间微调器 · Slider 滑块 · textbox基础文本框 · filebox文件上传 |
Window(窗口) | · Window 窗口 · Dialog 对话框 · Messager 消息框 |
DataGrid(数据网格)与 Tree(树) | · Datagrid 数据网格 · Propertygrid 属性网格 · Tree 树 · Treegrid 树形网格 |
1.1.1 执行过程
页面控制:通过在div等标签上加特定的属性,引入easyUI js后,通过js进行相应的处理。或渲染,或者进行数据判断等等。
数据控制:页面通过ajax提交,在controller中准备数据,形成json串格式,返回页面,EasyUI拿到数据json串,利用自身提供的js函数来渲染EasyUI组件。
引入js支持:
<link rel="stylesheet"type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet"type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
1.1.2 布局layout
<body class="easyui-layout">
<divdata-options="region:'west',title:'菜单',split:true" style="width:180px;"></div>
<divdata-options="region:'center',title:''"></div>
</body>
1.1.3 菜单menu
ul和li组合形成多级结构
<ul id="menu"class="easyui-tree">
<li>
<span>第一级菜单</span>
<ul>
<lidata-options="attributes:{'url':'/page/item-add'}">新增商品</li>
</ul>
</li>
</ul>
1.1.4 页夹Tabs
点击自动创建一个新页夹,页夹之间可以随意切换
<divid="tabs" class="easyui-tabs">
<div title="首页"style="padding:20px;">
</div>
</div>
注意:iframe。如果多个表格控件时,它们的值POST发生冲突。参数同名。修改成不同名称。
1.1.5 弹出窗口Window
$("<div>").css({padding:"5px"}).html("<ul>")
.window().window('open');
$(this).window("destroy");
点击自动创建一个新页夹,页夹之间可以随意切换
1.1.6 树形组件Tree
$("ul",_win).tree({(url:ajax访问链接)
1.1.7 链接按钮
<a href="javascript:void(0)"class="easyui-linkbutton selectItemCat">选择类目</a>
1.1.8 提示框
$.messager.alert('提示','表单还未填写完成!');
1.1.9 页面校验
页面加了校验EasyUI(在表单的元素上增加属性,提交时,被js方法拦截,按特殊的属性进行校验,校验通过继续提交到后台,如果校验失败,在对应的元素后面增加错误提示。)
例如:商品信息的校验
标题 | class="easyui-textbox" data-options="required:true" 必填 |
卖点 | class="easyui-textbox" data-options="multiline:true,validType:'length[0,150]'" |
价格 | class="easyui-numberbox" data-options="min:1,max:99999999,precision:2,required:true" |
库存数量 | class="easyui-numberbox" data-options="min:1,max:99999999,precision:0,required:true" |
条形码 | class="easyui-textbox" data-options="validType:'length[1,30]'" |
提交 | class="easyui-linkbutton" οnclick="submitForm()" |