jQuery EasyUI window窗口使用实例
2024-05-11 14:43:35
需求：点击【增加】按钮，弹出窗口，并对所有输入项内容进行校验，校验通过就提交给后台的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;"><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窗口使用实例相关推荐
- php能调用easyui窗口,关于jQuery EasyUI window窗口使用实例详解
本文主要给大家介绍了jQuery EasyUI window窗口使用功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 需求:点击[增加]按钮,弹出窗口,并对所有 ...
- jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
- EasyUI Window学习总结
Custom Window Tools http://www.jeasyui.net/demo/420.html Custom Window Tools - jQuery EasyUI Demo Cu ...
- EasyUI中Window窗口的简单使用
场景 效果 属性 该属性扩展自面板(panel),下面是为窗口(window)重写和添加的属性. 名称 类型 描述 默认值 title string 窗口的标题文本. New Window colla ...
- mui点击添加类名_Mui使用jquery并且使用点击跳转新窗口的实例
网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; ...
- jQuery EasyUI 选项卡面板tabs使用实例精讲
1. 对选项卡面板区域 div 设置 class="easyui-tabs" 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性 ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- jquery+easyui开发、培训文档
目 录 1.... Accordion(可折叠标签)......................................................................... ...
最新文章
- [linux]ps结果计算行数
- JAVA的网络编程【转】
- 不需要安装max或者xcode的object C开发环境
- 寄宿于CS程序的WCF服务
- php oracle 存储过程 返回值,PHP 调用 Oracle 存储过程 之 查询
- kodi android 目录,Kodi使用豆瓣刮削器建立媒体库，以及把资料库导出到片源目录...
- P2P流量的监控与管理方案
- android 动态 设置layout_weight,android - 如何从代码中动态设置layout_weight属性？
- 转使用chrome命令行：disable
- 手机无法被计算机识别,手机usb无法被电脑识别怎么办_电脑无法识别手机usb设备的解决方法...
- Matlab画圆方向图,如何在matlab里画天线的立体方向图？
- Adobe Photoshop CS6
- iOS自带地图纠偏问题
- 选择小红书素人笔记推广有什么好处？
- ensp配置FTP进行文件操作
- [JS]JS模拟Alert弹出框效果--自定义CSS样式
- 未来教育1级计算机基础及ms,未来教育·全国计算机等级考试教程：一级计算机基础及MS Office应用...
- 关于Wav音频压缩MP3
- C语言内存管理机制精讲-高手必修课视频教程-黄强-专题视频课程
- 计算机硬盘空间不足怎么删,电脑d盘的空间不足怎么办_电脑怎么清空d盘-win7之家...