生活随笔
收集整理的這篇文章主要介紹了
jQuery EasyUI window窗口使用实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求：點擊【增加】按鈕，彈出窗口，并對所有輸入項內容進行校驗，校驗通過就提交給后臺的action處理，沒有通過校驗就彈窗提示。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>管理取派員
</title><script type="text/javascript" src="../../js/jquery-1.8.3.js"></script><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").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").click(function(){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;"><div region="center" border="false"><table id="grid"></table></div><div class="easyui-window" title="對收派員進行添加或者修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"><div region="north" style="height:31px;overflow:hidden;" split="false" border="false"><div class="datagrid-toolbar"><a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存
</a></div></div><div 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></div></div><div class="easyui-window" title="查詢快遞員窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px"><div 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></div></div></body></html>
總結
以上是生活随笔為你收集整理的jQuery EasyUI window窗口使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
