選項卡右鍵菜單menu顯示：
//對選項卡添加右鍵事件
$("#tabs1").tabs({
onContextMenu : function(e, title,index) {
//阻止瀏覽器默認右鍵菜單顯示
e.preventDefault();
//顯示自定義右鍵菜單
$("#menu").menu("show",{
left: e.pageX,
top: e.pageY
})
}
})具體步驟：
下拉菜單menubutton設置EasyUI右鍵菜單
calss="easyui-menu" -->初始化默認隱藏
在選項卡右鍵顯示菜單：
//對選項卡添加右鍵事件
$("#tabs").tabs({
onContentMenu : function(e, title, index){
//阻止瀏覽器默認右鍵菜單
e.preventDefault();
//顯示自定義右鍵菜單
$("#menu").menu("show",{
left : e.pageX,
top : e.pageY
})
}
})
對菜單添加圖標：
data-options="iconCls:'icon-cancel'"
具體步驟：<a href="#" class="easyui-menubutton" data-options="iconCls:'icon-remove',menu:'#menu'"> 菜單 </a><!-- 菜單,默認初始化隱藏 --> <div id="menu" class="easyui-menu" style="width:120px"> <div>關閉當前窗口</div> <div>關閉其他窗口</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-cancel'">關閉所有窗口</div> </div>
設置下拉菜單：
class="easyui-menubutton"
設置菜單顯示：
data-options="menu:'#menu'"
消息窗口的使用：
$(function(){
//顯示警告窗口
//$.messager.alert("標題", "警告內容", "warning");
//確認窗口
$.messager.confirm("標題", "確認刪除嗎？", function(result){
if(result) {
alert("刪除中...");
}else{
alert("取消刪除...")
}
});
//輸入窗口
$.messager.prompt("標題", "你的名字？", function(val){
alert("你好！" + val);
});
//右下角窗口
$.messager.show({
title:'標題',
msg:'驚喜！！！<a href="#">點擊</a>',
timeout:5000,
showType:'slide'
});
//進度條
$.messager.progress({
interval:1000 //每秒10%
});
//定時器
window.setTimeout("$.messager.progress('close');",5000);
});
jQuery EasyUI 窗口window 的使用：
<script type="text/javascript">
$(function(){
$("#but").click(function(){
$("#mywindow").window('open');
})
});
</script>
</head>
<body>
<div id="mywindow" class="easyui-window"
data-options="title:'窗口標題',collapsible:false,modal:true,closed:true"
style="width:200px;height:200px">
窗口內容
</div>
<input type="button" value="打開" id="but"/>
<input type="text"/>
</body>具體步驟：
jQuery EasyUI的表單form組件：設置窗口：
class="easyui-window"
窗口屬性:
data-options="
title:'窗口標題',
collapsible:摺疊按鈕,默認true,
minimizable:最小化按鈕,默認true,
maximizable:最大化按鈕,默認true,
closable:關閉按鈕,默認true,
modal:是否是窗口模式,默認false,
closed:初始化是否關閉,默認false"；
觸發顯示窗口：
$("#but").click(function(){
$("#mywindow").window('show');
});
檢驗框：
class="easyui-validatebox"-->設置required屬性爲true
數字檢驗：
class="easyui-numberbox"
日期檢驗框：
class="easyui-datebox"
下拉輸入框：class="easyui-combobox"
jQuery EasyUI的分頁功能：
在頁面顯示錶格的位置：
<table id="grid"></table>
在js代碼中：
$("#grid").datagrid({
//設置表格
columns:[[ //二維數組可做多級表頭
{
field:"", //與返回的json字段一一對應
title:"", //頁面顯示列名
width: //寬度
},
{}
]],
//顯示json數據
url : "",
pagination : true, //分頁工具條
toolbar : [ //頂部工具欄
id : "",
text : "",
iconCls : "",
handler : function(){
...
}
]
});
響應josn數據格式：
{
"total":"",
"rows":[
{},
{}
]
}
-->請求數據：
page頁碼,rows每頁記錄數
total總記錄數,rows當前頁數據記錄
分頁web層：
Pageable pageable = new PageRequest(page-1,rows);
Page<> pagedata = service.findPageData(pageable);
分頁service層：
dao.findAll(pageable);
獲取datagrid選中的數據：
var rows = $("#gird").datagrid("getSelections");
表單回顯操作：
$("#formId").form("load",row); -->datagrid選中的一行數據
清空表單數據：
$("#formId").from("clear");
$("#fromId").form("reset");jQuery EasyUi的下拉列表框：
設置：
class="easyui-combobox"
下拉列表框三個重要屬性：
dataoptions="
valueField:'', //生成選項value屬性依據的字段名
textField:'', //顯示內容字段名
url:'' //回去列表數據
"jQuery EasyUI的綁定表格條件查詢：
條件查詢：
將查詢條件轉換爲json對象綁定到datagrid上
$("#drig").datagrid("load",json);jQuery EasyUI表格顯示批量數據
使用datagrid的列屬性formatter：
$("#drig").datagrid({
formatter : function(value,row,index){
value-->字段值
row-->行記錄數據
index-->行索引
if(value) {
return ..;
}else{
return ..;
}
}
})
獲取所有選擇數據：
$("#grid").datagrid("getSelections");