jQuery EasyUI window窗口使用實(shí)例代碼
更新時(shí)間：2017年12月25日 10:56:45 作者：你我他學(xué)習(xí)吧
本文通過實(shí)例代碼給大家介紹了jQuery EasyUI window窗口使用功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
需求：點(diǎn)擊【增加】按鈕，彈出窗口，并對所有輸入項(xiàng)內(nèi)容進(jìn)行校驗(yàn)，校驗(yàn)通過就提交給后臺(tái)的action處理，沒有通過校驗(yàn)就彈窗提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理取派員</title>
<!-- 導(dǎo)入jquery核心類庫 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 導(dǎo)入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 : '手機(jī)號',
width : 120,
align : 'center'
}, {
field : 'checkPwd',
title : '查臺(tái)密碼',
width : 120,
align : 'center'
}, {
field : 'pda',
title : 'PDA號',
width : 120,
align : 'center'
}, {
field : 'standard.name',
title : '取派標(biāo)準(zhǔn)',
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隱藏，再顯示，不會(huì)出現(xiàn)頁面刷新效果
$("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
});
//對收派標(biāo)準(zhǔn)save按鈕，添加點(diǎn)擊事件
$("#save").click(function(){
//判斷是否form中的所有表單對象都通過校驗(yàn)
if($("#standardForm").form('validate')){
//都通過校驗(yàn)
$("#standardForm").submit();
}else{
$.messager.alert("警告","表單存在非法內(nèi)容，請重新填寫","warning");
}
//關(guān)閉窗口
$("#addWindow").window('sclose');
});
});
function doDblClickRow(){
alert("雙擊表格數(shù)據(jù)...");
}
</script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
<table id="grid"></table>
</div>
<div class="easyui-window" title="對收派員進(jìn)行添加或者修改" 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>手機(jī)</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>查臺(tái)密碼</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>取派標(biāo)準(zhǔn)</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>收派標(biāo)準(zhǔn)</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>
總結(jié)
以上所述是小編給大家介紹的jQuery EasyUI window窗口使用實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
利用JavaScript編寫一個(gè)花里胡哨的點(diǎn)擊按鈕
這篇文章主要介紹了如何利用HTML+CSS+JavaScript制作一個(gè)花里胡哨的點(diǎn)擊按鈕。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-03-03
淺談layer的Icon樣式以及一些常用的layer窗口使用方法
今天小編就為大家分享一篇淺談layer的Icon樣式以及一些常用的layer窗口使用方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了uniapp做小程序的圖片(視頻)上傳的組件封裝,要求實(shí)現(xiàn)多張圖片的上傳 ,可以限制圖片上傳的數(shù)量,圖片預(yù)覽,多次使用對圖片的上傳順序排序,需要的朋友可以參考下2024-02-02
這篇文章主要還是繼續(xù)學(xué)習(xí)javascript閉包，理解JavaScript的閉包是邁向高級JS程序員的必經(jīng)之路，需要的朋友可以參考下2015-12-12![IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]](http://img.jbzj.com/images/xgimg/bcimg5.png)
IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個(gè)主要問題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10
JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03
原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
本文主要介紹了原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了解決echarts官網(wǎng)打不開訪問失敗的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾門戶式風(fēng)格頁面
這篇文章主要介紹了Bootstrap編寫一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾門戶式風(fēng)格頁面，感興趣的小伙伴們可以參考一下2016-07-07