本文主要給大家介紹了jQuery EasyUI window窗口使用功能，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能幫助到大家。

需求：點擊【增加】按鈕，彈出窗口，并對所有輸入項內容進行校驗，校驗通過就提交給后臺的action處理，沒有通過校驗就彈窗提示。

管理取派員

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("雙擊表格數據...");

}

保存

收派員信息
快遞員工號		姓名
手機		所屬單位
查臺密碼		PDA號碼
快遞員類型		取派標準	class="easyui-combobox" data-options="required:true,valueField:'id',textField:'name', url:'../../standard_findAll.action'"/>
車型		車牌號

查詢條件
工號
收派標準
所屬單位
類型
查詢

相關推薦：

總結

以上是生活随笔為你收集整理的php能调用easyui窗口,关于jQuery EasyUI window窗口使用实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。