一个高度封装的easyui插件，让开发者更加简便使用easyui进行交互，增删改查仅需几行代码。
目前封装的内容有：
1、easyui验证框的扩展，支持更多类型验证
2、可编辑的DataGrid
3、增删改查交互的高度封装，仅需一个方法
4、封装了弹出窗口，点击确定按钮可提交AJAX
5、封装了消息提示，显示在顶部
6、封装了AJAX和FormSubmit 支持在提交过程中显示“加载中...”
- 示例
<table id="url_dategrid_add" title="URL列表" style="width:690px;">
</table>var datagrid = UI.initEditDataGrid("#url_dategrid_add",{
//参数与easyui原参数一致
columns:[[
{field:'id',hidden:true,width:40},
{field:'url',title:'URL',width:540,align:'center',
editor:{type:'textbox',options:{required:true,align:'center'}}
},
{field:'timeout',title:'超时(毫秒)',width:100,align:'center',
editor:{type:'numberbox',options:{required:true,align:'center'}}
},
{field:'status',title:'状态',width:40,align:'center',
editor:{type:'checkbox',options:{on:1,off:0}},
formatter:$.format.statusFormat
}
]]
});## 新增数据 - 说明
UI.addByWindow({
title:'你的标题',
windowUrl:"User/toAdd",//HTML或JSP地址
width:800,
height:450,
formId:'#formUserAdd', //表单ID
url:'User/add', //提交表单的URL
datagrid:userDatagrid// dataGrid的对象
}
});-
示例
var userDatagrid = $("#userDatagrid"); function addUser(){ UI.addByWindow({ title:'你的标题', windowUrl:"User/toAdd",//HTML或JSP地址 width:800, height:450, formId:'#formUserAdd', //表单ID url:'User/add', //提交表单的URL datagrid:userDatagrid// dataGrid的对象 } }); }
返回JSON的封装对象,msg为提示消息，当不为空时自动显示提示框
public class Result {
private boolean success = false;
private String msg;
private Integer statusCode=200;
private Map<Object,Object> attribute = new HashMap<>();
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getStatusCode() {
return statusCode;
}
public void setStatusCode(Integer statusCode) {
this.statusCode = statusCode;
}
public Map<Object, Object> getAttribute() {
return attribute;
}
public void addAttribute(Object key,Object value){
getAttribute().put(key, value);
}
}- 示例
和添加方法大同小异
var userDatagrid = $("#userDatagrid");
UI.updateByWindow({
title:'',
windowUrl:"User/toEdit", //编辑页面的跳转URL
width:800,
height:450,
formId:"#formUserEdit", //表单ID
url:"User/update", //提交表单时的URL
datagrid:userDatagrid,
idField:"userId", //ID列名,使用getUrl获得数据时才需要
getUrl:"User/getById",//获得用户信息详情的请求URL
onLoad:function(data){ //页面加载完毕事件
},
onSubmit:function(){
}
});- 说明
UI.deleteByDatagrid(userDatagrid, 'User/delete', "userId","您确定要删除所选数据吗？");参数1、2、3是必填参数，分别为datagrid对象，删除的Controller地址、ID列名，参数4为可选，是删除确认框的提示消息
- 注意
**使用该方法必须使用datagrid的checkbox:true ，该方法仅识别勾选的数据,如：columns:[[{field:"userId",checkbox:true}]]
-
示例
function deleteUser(){ UI.deleteByDatagrid(userDatagrid, "User/delete", "userId"); }
提示消息
UI.showMessage("删除成功！");创建窗口
UI.createWindow({
url:'',
title:'',
width:111,
height:222,
callback:function(){},
tools:[{
iconCls: 'icon-remove',
plain:true,
text:'删除',
handler: function(){
}
}]
});- 说明
创建窗口说明
* 创建窗口 参数是json格式
* @param url url
* @param title 窗口标题
* @param callback 点击确定按钮的回调函数
* @param width 窗口宽度 可以不指定
* @param height 窗口高度 可以不指定
* @param tools 添加额外按钮
- ** 提交表单说明
/**
* easyui FORM表单说明
* @param id FORM的ID 如'#form'
* @param parament json格式 名称和原来的一样 添加了progressText(进度条文本),dataType(设置dataType='json')回调函数返回的值会 自动转换成json格式
* parament.autoCloseProgress 关闭进度条方式，默认在success回调函数中关闭,设置为false则在回调函数执行完毕后再关闭进度条
* parament.autoValidate 是否自动验证，设置false不自动验证表单，默认自动验证在onSumit时验证
* parment.progress false表示不显示进度条
* parment.ok 配置createWindow使用的 确定按钮，如传入则用此方法控制该按钮
*/
UI.formSubmit("#formId",{
url:'user/sava',
success:function(){
}
}) 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent