jQuery EasyUI window窗口实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI window窗口</title>
<link rel="stylesheet" id="easyuiTheme" type="text/css" href="/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/demo.css">
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/jquery.easyui.mobile.js"></script>
<script>
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窗口实例的更多相关文章
- jQuery EasyUI window窗口使用实例
需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示. <!DOCTYPE html> <html> ...
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- easyui window窗口 随body的滚动条 滚动
问题描述: 当easyui window窗口弹出的时候,依然可以滚动body 的滚动条,而且window窗口也会随它一起滚动 思路:bootstrap 模态框弹出的时候,给body 添加了 .moda ...
- 前端基础教程-jQuery EasyUI 的EasyLoader实例
兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...
- Jquery EasyUI Tree .net实例
图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...
- Jquery EasyUI DataGrid .net实例
前台界面:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- jquery easyui window中的datagrid，只能显示一次问题
最近项目中用到easyui 的动态创建window ,window中嵌入了datagruid.第一次打开是能显示数据,但再次打开时确没显示: 注:url已成功返回了数据. 多次查阅easyui帮助文档 ...
- JQuery EasyUI window 用法
var $win; $win = $('#test-window').window({ title: '添加课程设置信息', width: 820, height: 450, top: ($(wind ...
- easyui window窗口 不垂直居中
$('#hotelDetailWrap').window({ width: 1040, height: 160, collapsible: false, minimizable: false, max ...
随机推荐
- Unix系统级I/O
在Unix系统中,一且皆为文件.一个Linux文件就是一个字符序列,并且所有的I/O设备都被模型化成了文件.而所有的输入输出都被当作对对应文件的读和写.Linux提供了一组简单.低级的接口,使得所有的 ...
- POJ3264 Balances Lineup
建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...
- leetcode 0218
目录 ✅ 1200. 最小绝对差 描述 解答 cpp py ✅ 897. 递增顺序查找树 描述 解答 cpp 指针问题? fuck ptr py ✅ 183. 从不订购的客户 描述 解答 sql to ...
- android studio 导入主题设置，代码风格（附带eclipse 主题代码样式）
在这里我最想说的,android studio默认主题样式,太low.不适合长时间写代码,看代码颜色不好识别,相对于背景的代码样式,我都不想吐槽了.还是网上下载主题代码样式导入样式.在这里我推荐 Su ...
- pip-9.0.1更新到pip-10.0.1遇到的问题
使用 pip 安装第三方库时,报错: You are using pip version 9.0.3, however version 10.0.1 is available. You should ...
- 洛谷 P1119 灾后重建（Floyd）
嗯... 题目链接:https://www.luogu.org/problem/P1119 这道题是一个Floyd的很好的题目,在Floyd的基础上加一点优化: 中转点k在这里不能暴力枚举,否则会超时 ...
- java 基础--8 种基本数据类型：整型、浮点型、布尔型、字符型 整型中 byte、short、int、long 的取值范围 什么是浮点型？什么是单精度和双精度？为什么不能用浮点型表示金额？
一.8种基本数据类型(4整,2浮,1符,1布): 整型:byte(最小的数据类型).short(短整型).int(整型).long(长整型): 浮点型:float(浮点型).double(双精度浮点 ...
- Python 基础之面向对象之异常处理
一.认识异常 1.常用异常报错的错误类型 IndexError 索引超出序列的范围 KeyError 字典中查找一个不存在的关键字 Na ...
- C++关键字总结【新手必学】
const 关键字——常量const 与definedefine是预编译器的编译指令,它从C语言兼容下来,工作方式与文本编辑器中的全局搜索和替换相似.define定义的常量的意义在它开始的地方持续到文 ...
- springboot下使用dubbo的简单demo
1.一些话 现在java后端开发大多用springboot来简化环境搭建,现在一直使用的是springcloud和k8s有关的东西,以前用过dubbo,但那会儿的开发环境搭建流程较为繁琐,而且不支持r ...