jQuery EasyUI

Posted 2020-08-03 厂公

 jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

特点

      jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

      jQuery EasyUI有以下特点：

      1、基于jquery用户界面插件的集合

      2、为一些当前用于交互的js应用提供必要的功能

      3、EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p‘).panel({...})）和html标记方式（如：class="easyui-panel"）

      4、支持HTML5（通过data-options属性）

      5、开发产品时可节省时间和资源

      6、简单，但很强大

      7、支持扩展，可根据自己的需求扩展控件

      8、目前各项不足正以版本递增的方式不断完善

插件

      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 树形网格

方法的使用

 

datagrid

$(‘#dg‘).datagrid(‘getSelected‘); 不带参数的方法，获取当前选中行。 $(‘#dg‘).datagrid(‘‘sort‘, ‘itemid‘); 带参数的方法，按照itemid 排序

事件的使用

 

datagrid

$(‘#dg‘).datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid(‘beginEdit‘, index); var ed = $(this).datagrid(‘getEditor‘, {index:index,field:field}); $(ed.target).focus(); } }); 定义单元格双击事件 开启编辑。