这是我自己闲暇之余封装的一个工具，当然还有一大堆BUG，但是对于自己接接小活还是挺方便的，分享出来。后面会慢慢持续更新。
image.png
1. 插件安装
使用该框架非常简单，首先，准备一下easyUI的资源和框架js
image.png
随便创建一个test.html，引入必要的资源。
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
然后，在页面的末尾引入：
<script src="very-easyui-1.0.0.js"></script>
2. data-grid 列表
首先，在body中声明一个grid0，（grid0代表第一个grid）
<div id="grid0" style="height:500px;width:100%;"></div>
然后在js中设置grid0的详细：
var grid0 = {
title : '学生列表' ,
url : '/queryStudents.do',
singleSelect : true ,
hasSelect : true ,
paging : true ,
fields : [
'50|id|学生编号',
'100|username|学生姓名',
'100|classname|学生班级'
],
buttons : [
{name:'新增学生',actionName:'addStudent'},
] ,
search : {
fields : [
's_username|学生姓名'
],
}
}
效果：
image.png
属性：
title： 列表名称
url： 列表加载数据的接口地址
singleSelect ： 是否是单选
hasSelect ： 是否有选择列
paging： 是否要分页
fields ： 字段详情，是一个数组，每一个数组项是一个这样的字符串： ** '100|username|学生姓名' **， 分别代表 长度|字段名|字段中文
注意： 可以在字段中文后面加一项，代表字段的特殊化,目前支持的有：
| view | 字段会变成超链接，点击会弹出页面，展示该条数据的详情 |
| download | 字段会变成下载链接，能够下载该字段指向的具体内容 |
buttons： 设置该列表拥有的按钮，每一个按钮对应的点击事件就是actionName
search: 设置列表的查询条件。
3. 灵活表单
你可以通过以下代码迅速打开一个新的表单：
var option = {
title : '创建新的分组',
fields : [
{id:'id',name:'分组编号(新增不填)',type:'text'},
{id:'groupName',name:'分组名称',type:'text'},
],
url : '/t002.do'
}
openWin(400,300,option);
以上代码可以快速打一个新的窗口，窗口里面是一个表单，每一项通过fields来配置。
需要注意的是，field的type属性支持这样几个值：text，textarea，file
file是文件上传框，如果需要使用这个配置，你还需要在页面上加这一段：
<div class="easyui-dialog" id="UploadWin" style="width: 670px;height: 450px;padding: 10px 20px" closed="true">
<iframe scrolling="no" src="${pageContext.request.contextPath}/upload.jsp"></iframe>
</div>
这是文件上传所需要的iframe，upload.jsp在示例项目中有。
你也可以实现勾选列表的一条数据，然后打开表单，表单会自动填充勾选的数据。参考代码如下：
var selectedRows=$("#dg0").datagrid('getSelections');
var row=selectedRows[0];
if(!row){
M("请选择一个联系人！");
return;
}
var option = {
title : '发邮件',
fields : [
{id:'userName',name:'联系人邮箱',type:'text'},
{id:'userDescription',name:'联系人名称',type:'text'},
{id:'content',name:'邮件内容',type:'textarea'},
{id:'fj',name:'附件上传',type:'file'},
],
url : '/t001.do'
}
openWin(500,400,option,row);
open方法最后一个参数row是可选项，这种需求row不能为空。
4. 大M方法
你可以通过大M方法，快速产生一个弹出框。例如：
M("请选择一个群组！");
其实就是用了easyui弹出层：
function M(msg){
$.messager.alert('系统提示',msg);
}
附录：
easyUI常用代码
获取选中行
var selectedRows=$("#dg1").datagrid('getSelections');
var row=selectedRows[0];
手动刷新Grid
$('#dg0').datagrid('load',{
fieldXXX:xxx
});
grid行点击
$('#dg1').datagrid({
onClickRow:function(rowIndex,rowData){
console.log(rowData);
$('#dg0').datagrid('load',{
userCode6:rowData.id
});
}
});
手动打开dialog
$("#dlg").dialog("open").dialog("setTitle","添加信息");
通用批量删除逻辑：
function deleteObj(){
var selectedRows=$("#dg").datagrid('getSelections');
if(selectedRows.length==0){
$.messager.alert('系统提示','请选择要删除的数据！');
return;
}
var strIds=[];
for(var i=0;i<selectedRows.length;i++){
strIds.push(selectedRows[i].id);
}
var ids=strIds.join(",");
$.messager.confirm("系统提示","您确认要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
if(r){
$.post("types/delete.do",{ids:ids},function(result){
if(result.code == 0){
$.messager.alert('系统提示',"您已成功删除数据！");
$("#dg").datagrid("reload");W
}else{
$.messager.alert('系统提示',result.errorMsg);
}
},"json");
}
});
}
打开tab页（iframe版本）
function openTab(text,url,iconCls){
if($("#tabs").tabs("exists",text)){
$("#tabs").tabs("select",text);
}else{
var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}/"+url+"'></iframe>";
$("#tabs").tabs("add",{
title:text,
iconCls:iconCls,
closable:true,
content:content
});
}
}
下载地址：
（本文档正在全力更新中... ... ）
网友评论