==========================EasyUI使用總結=======================
1.彈出框設置標題
$("#win").dialog({'title': '修改'}).dialog('open');
$('#win').dialog('open').dialog('setTitle', '修改系統');
2.下拉框設值
$('#status').combobox('setValue', '00');
3.表單不可編輯
editable="false" 或者 readonly="true"
4.數據網格行適應寬度,防止水平滾動條
fitColumns: true
5.表單校驗
data-options="validType:'myEmail'"
6.窗口遮罩
modal="true"
7.下拉樹設值默認值
$('#' + arr[i]).combotree({
url: 'deptorg/searchOrgTree.do?node=3401000000000000',
idFiled:"businessId",
textFiled:"orgName",
parentField:"pid",
value: org_Id,
})
8.easyui分頁欄
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize: 20,//每頁顯示的記錄條數,默認爲10
pageList: [20, 40, 60, 80],//可以設置每頁記錄條數的列表
beforePageText: '第',//頁數文本框前顯示的漢字
afterPageText: '頁 共 {pages} 頁',
displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
});
9.水平垂直居中
vertical-align:middle;
text-align:center;
display: table-cell;
10.easyUI去除滾動條
#在有滾動條的div中添加
style="overflow: hidden"
11.easyUItree取消層疊選中
cascadeCheck:false,
// 點擊父節點,選中子節點(改造tree,可以只選擇父節點)
onCheck:function(node, checked){
var childList = $(this).tree('getChildren',node.target);
if(childList.length>0){
// 節點被勾選
var checkedTrue = function(){
childList.map(function(currentValue){
$('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox0").addClass("tree-checkbox1");
})
};
// 節點取消勾選
var checkedFalse = function(){
$.each(childList,function(index,currentValue){
$('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox1").addClass("tree-checkbox0");
})
};
// 判斷是否爲checked
var checkChangeProperties = checked==true ? checkedTrue() : checkedFalse();
}
}
})
12.複選框只讀:
1.$(this).attr("disabled","disabled");
2.onClick="return false"
3.動態加載時:$(this).click(function (e) {
e.preventDefault();
});
13.數據網格中鼠標移動事件
onLoadSuccess: function (data) {
$("tr").bind("mouseover", function () {
$(this).css("color", "red");
})
$("tr").bind("mouseout", function () {
$(this).css("color", "black");
})
}
14.數據網格加載對數據處理
rowStyler: function(index,row){
var currentDate = new Date().getTime();
var startDate = new Date(row.startTime).getTime();
var day = (currentDate-startDate)/(24*60*60*1000);
if (day > 15){
return 'color:red;font-weight:bold;';
}
}