EasyUI富客户端

来源：互联网发布：java excel 小数 4位编辑：程序博客网时间：2024/04/29 04:03

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支持：

1.1.2 布局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组合形成多级结构

<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>

注意：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 链接按钮

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" onclick="submitForm()"

0 1