本文主要给大家介绍了jquery easyui window窗口使用功能，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下，希望能帮助到大家。
需求：点击【增加】按钮，弹出窗口，并对所有输入项内容进行校验，校验通过就提交给后台的action处理，没有通过校验就弹窗提示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>管理取派员</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_cn.js" type="text/javascript"></script>
<script type="text/javascript">
function doadd(){
$('#addwindow').window("open");
}
function doedit(){
alert("修改...");
}
function dodelete(){
alert("删除...");
}
function dorestore(){
alert("将取派员还原...");
}
//工具栏
var toolbar = [ {
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
},{
id : 'button-restore',
text : '还原',
iconcls : 'icon-save',
handler : dorestore
}];
// 定义列
var columns = [ [ {
field : 'id',
checkbox : true,
},{
field : 'couriernum',
title : '工号',
width : 80,
align : 'center'
},{
field : 'name',
title : '姓名',
width : 80,
align : 'center'
}, {
field : 'telephone',
title : '手机号',
width : 120,
align : 'center'
}, {
field : 'checkpwd',
title : '查台密码',
width : 120,
align : 'center'
}, {
field : 'pda',
title : 'pda号',
width : 120,
align : 'center'
}, {
field : 'standard.name',
title : '取派标准',
width : 120,
align : 'center',
formatter : function(data,row, index){
if(row.standard != null){
return row.standard.name;
}
return "";
}
}, {
field : 'type',
title : '取派员类型',
width : 120,
align : 'center'
}, {
field : 'company',
title : '所属单位',
width : 200,
align : 'center'
}, {
field : 'deltag',
title : '是否作废',
width : 80,
align : 'center',
formatter : function(data,row, index){
if(data=="0"){
return "正常使用"
}else{
return "已作废";
}
}
}, {
field : 'vehicletype',
title : '车型',
width : 100,
align : 'center'
}, {
field : 'vehiclenum',
title : '车牌号',
width : 120,
align : 'center'
} ] ];
$(function(){
// 先将body隐藏，再显示，不会出现页面刷新效果
$("body").css({visibility:"visible"});
// 取派员信息表格
$('#grid').datagrid( {
iconcls : 'icon-forward',
fit : true,
border : false,
rownumbers : true,
striped : true,
pagelist: [30,50,100],
pagination : true,
toolbar : toolbar,
url : "../../data/courier.json",
idfield : 'id',
columns : columns,
ondblclickrow : dodblclickrow
});
// 添加取派员窗口
$('#addwindow').window({
title: '添加取派员',
width: 800,
modal: true,
shadow: true,
closed: true,
height: 400,
resizable:false
});
//对收派标准save按钮，添加点击事件
$("#save").click(function(){
//判断是否form中的所有表单对象都通过校验
if($("#standardform").form('validate')){
//都通过校验
$("#standardform").submit();
}else{
$.messager.alert("警告","表单存在非法内容，请重新填写","warning");
}
//关闭窗口
$("#addwindow").window('sclose');
});
});
function dodblclickrow(){
alert("双击表格数据...");
}
</script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<p region="center" border="false">
<table id="grid"></table>
</p>
<p class="easyui-window" title="对收派员进行添加或者修改" id="addwindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
<p region="north" style="height:31px;overflow:hidden;" split="false" border="false">
<p class="datagrid-toolbar">
<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
</p>
</p>
<p region="center" style="overflow:auto;padding:5px;" border="false">
<form id="standardform" action="../../standard_save.action" method="post">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="4">收派员信息</td>
</tr>
<tr>
<td>快递员工号</td>
<td>
<input type="text" name="couriernum" class="easyui-validatebox" required="true" />
</td>
<td>姓名</td>
<td>
<input type="text" name="name" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>手机</td>
<td>
<input type="text" name="telephone" class="easyui-validatebox" required="true" />
</td>
<td>所属单位</td>
<td>
<input type="text" name="company" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>查台密码</td>
<td>
<input type="text" name="checkpwd" class="easyui-validatebox" required="true" />
</td>
<td>pda号码</td>
<td>
<input type="text" name="pda" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>快递员类型</td>
<td>
<input type="text" name="type" class="easyui-validatebox" required="true" />
</td>
<td>取派标准</td>
<td>
<input type="text" name="standard.id"
class="easyui-combobox"
data-options="required:true,valuefield:'id',textfield:'name',
url:'../../standard_findall.action'"/>
</td>
</tr>
<tr>
<td>车型</td>
<td>
<input type="text" name="vehicletype" class="easyui-validatebox" required="true" />
</td>
<td>车牌号</td>
<td>
<input type="text" name="vehiclenum" class="easyui-validatebox" required="true" />
</td>
</tr>
</table>
</form>
</p>
</p>
<!-- 查询快递员-->
<p class="easyui-window" title="查询快递员窗口" closed="true" id="searchwindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px">
<p style="overflow:auto;padding:5px;" border="false">
<form id="searchform">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="2">查询条件</td>
</tr>
<tr>
<td>工号</td>
<td>
<input type="text" name="couriernum" />
</td>
</tr>
<tr>
<td>收派标准</td>
<td>
<input type="text" name="standard.name" />
</td>
</tr>
<tr>
<td>所属单位</td>
<td>
<input type="text" name="company" />
</td>
</tr>
<tr>
<td>类型</td>
<td>
<input type="text" name="type" />
</td>
</tr>
<tr>
<td colspan="2"><a id="searchbtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-search'">查询</a> </td>
</tr>
</table>
</form>
</p>
</p>
</body>
</html>
相关推荐：
jquery easyui中实现表格的跨行跨列的方法
如何解决easyui和bootstrap不兼容的问题
jquery中关于easyui的treegrid查询功能的实现
以上就是关于jquery easyui window窗口使用实例详解的详细内容。