easyui的一些总结（一）

来源：互联网发布：修改游戏数据编辑：程序博客网时间：2024/06/07 02:08

一、首先要导入js文件，easyui基于jQuery所以至少应有以下两个：（刚上来点了半天ajax不发送，后来发现jQuery居然没导日了...）

二、基本布局

<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:1350px;height:650px;">
<div data-options="region:'north'" style="height:50px"></div>

<div data-options="region:'south',split:true" style="height:50px;"></div>

<div data-options="region:'west',split:true" title="主菜单" style="width:150px;">
<ul id="tree" class="easyui-tree"></ul>
</div>
//我没用到east删掉了
<div data-options="region:'center',title:'欢迎使用',iconCls:'icon-ok'">
<div id="tabs" fit="true" class="easyui-tabs" border="false">
<div title="系统首页" id="subWarp" style="width:100%;height:100%;overflow:hidden">
<iframe src="${pageContext.request.contextPath }/jsps/welcome.html" style="width:100%;height:100%;border:0;"></iframe>
</div>
</div>
</div>
</div>

三、菜单栏及点击菜单栏之后切换tab

后台json数据：（例子）

[
{ "id":1, "text":"店面管理", "iconCls":"icon-save", "children":
[
{ "text":"店面列表", "checked":true,"attributes":{"url":"/shop/shop_list.jsp" }},
{ "text":"复尺店面列表", "checked":true },
{ "text":"其他店面列表", "checked":true }
]
},

{ "id":2, "text":"照片上传", "iconCls":"icon-save", "children":
[
{ "text":"复尺照片", "checked":true,"attributes":{"url":"/photo/photoupload.jsp" } },
{ "text":"收货照片", "checked":true },
{ "text":"完工照片", "checked":true },
{ "text":"整改照片", "checked":true },
{ "text":"其它照片", "checked":true }
]
},

{ "id":3, "text":"店面复尺管理", "iconCls":"icon-save", "children":
[
{ "text":"复尺照片审核", "checked":true },
{ "text":"复尺照片报表", "checked":true }
]
},

{ "id":4, "text":"店面收货管理", "iconCls":"icon-save", "children":
[
{ "text":"上传照片审核", "checked":true },
{ "text":"收货照片报表", "checked":true }
]
},

{ "id":5, "text":"店面完工管理", "iconCls":"icon-save", "children":
[
{ "text":"上传照片审核", "checked":true },
{ "text":"完工照片报表", "checked":true }
]
},

{ "id":6, "text":"店面整改管理", "iconCls":"icon-save", "children":
[
{ "text":"上传照片审核", "checked":true },
{ "text":"整改照片报表", "checked":true }
]
},

{ "id":7, "text":"其它管理", "iconCls":"icon-save", "children":
[
{ "text":"上传照片审核", "checked":true },
{ "text":"其它照片报表", "checked":true }
]
},

{ "id":8, "text":"系统设置", "iconCls":"icon-save", "children":
[
{ "text":"用户管理", "checked":true },
{ "text":"角色管理", "checked":true },
{ "text":"客户公司管理", "checked":true,"attributes":{"url":"/company/company_list.jsp" }},
{ "text":"品牌形象管理", "checked":true }
]
}

]

html:

</div>

js:

四、表单上传之前将其中的参数进行序列化（目前暂认为是因为列表按条件查询时想要带参数否则直接提交表单不就行了）

$(function(){
//工具方法，可以将指定的表单中的输入项目序列号为json数据
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};

//绑定事件
$("#btn").click(function(){
var p = $("#searchForm").serializeJson();//{id:xx,name:yy,age:zz}
//重新发起ajax请求，提交参数
$("#grid").datagrid("load",p);
//关闭查询窗口
$("#searchWindow").window("close");
});
});

五、datagrid（包含分页、工具栏、表头）

//工具栏
var toolbar = [ {
id : 'button-view',
text : '查询',
iconCls : 'icon-search',
handler : doQuery
}, {
id : 'button-add',
text : '增加',
iconCls : 'icon-add',
handler : doAdd
}, {
id : 'button-edit',
text : '编辑',
iconCls : 'icon-edit',
handler : doEdit
}, {
id : 'button-delete',
text : '删除',
iconCls : 'icon-cancel',
handler : doDelete
}];

// 定义标题栏
var columns = [ [{
field : 'shopid',
checkbox : true
}, {
field : 'shopname',
title : '店面名称',
width : 120,
align : 'center'
},{
field : 'shopaddress',
title : '店面地址 ',
width : 120,
align : 'center'
}, {
field : 'shoplinkname',
title : '店面联系人',
width : 150,
align : 'center'
},{
field : 'shopphone',
title : '店面联系电话',
width : 220,
align : 'center'
} ] ];

$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true,
fitColumns : true, //自适应宽度
border : false,
rownumbers : true,//显示行号
striped : true,
pageList: [10,20,50],
pagination : true,//是否需要分页条（它会向后台传两个参数page当前页、rows每页几条记录）
toolbar : toolbar,//显示工具栏
url : "${pageContext.request.contextPath}/shop/list.action",//获得数据的路径（应返回json类型数据在springmvc中只需加responseBody注解即可）（若为了能分页数据中应有俩个类型的东西private Integer total; private List<?> rows;）
idField : 'shopid',
columns : columns//显示标题栏
});

六、datagrid的增删改查

//添加

function doAdd(){
window.location.href = '${pageContext.request.contextPath}/shop/pre.action';
}

//编辑
function doEdit(){
//获得选中的行
var rows = $("#grid").datagrid("getSelections");
if(rows.length != 1){
//没有选中，提示
$.messager.alert("提示信息","请选择一条需要编辑的信息！","warning");
}else{
var id = rows[0].shopid;
window.location.href = '${pageContext.request.contextPath}/shop/pre.action?id='+id;
}
}

//查询

查询最为麻烦

css（js控制）：

$('#searchWindow').window({
title: '查询窗口',
width: 400,
modal: true,//遮罩效果
shadow: true,//阴影效果
closed: true,//关闭状态
height: 400,
resizable:false//是否可以调整大小
});

HTML：

<div class="easyui-window" title="查询信息" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
<div region="center" style="overflow:auto;padding:5px;" border="false">
<form id="searchForm" action="${pageContext.request.contextPath }/shop/list.action"
method="post">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="2">查询信息</td>
</tr>
<tr>
<td>店面名称</td>
<td><input type="text" name="shopname" class="easyui-validatebox"/></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">
<a id="btn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-search'">查询</a>
<script>
$(function(){
//工具方法，可以将指定的表单中的输入项目序列号为json数据
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};

//绑定事件
$("#btn").click(function(){
var p = $("#searchForm").serializeJson();//{id:xx,name:yy,age:zz}
//重新发起ajax请求，提交参数
$("#grid").datagrid("load",p);
//关闭查询窗口
$("#searchWindow").window("close");
});
});
</script>
</td>
</tr>
</table>
</form>
</div>
</div>

0 0