EasyUI总结

一般表格都需要添加一个查询的功能，这时候可能需要获取原先的表格加载参数，然后将新的查询参数添加进去重新加载即可。

var params = $('#dataTable').datagrid('options').queryParams; //先取得 datagrid 的查询参数
var fields =$('#searchForm').serializeArray(); //自动序列化表单元素为JSON对象
$.each( fields, function(i, field){
params[field.name] = field.value; //设置查询参数
});
$('#dataTable').datagrid('reload'); //设置好查询参数 reload 一下就可以了

</pre></li><li><pre name="code" class="javascript">

表格动态隐藏/显示某一列，这个偶尔会用到，api里方法写的很清楚，只需要把field名称传进来就可以了。$("#dataTable").datagrid('hideColumn', 'zdmc');//隐藏

$("#dataTable").datagrid('showColumn', 'zdmc');//显示对应的字段

<th data-options="field:'zdmc',width:150,align:'center',title:'字段名称',hidden:true"></th>

表格datagrid中column的单元格样式函数styler，例如：对于不同状态的数据显示不同的颜色。

<th data-options="field:'spztText',width:80,align:'center',title:'审批状态',styler : mystyler"></th>

js函数：

function mystyler(value,row,index){
if (value == '未提交'){
return 'background-color:#FFFF00;color:#000;';
}else if(value == '审批中'){
return 'background-color:#FFA500;color:#FFF;';
}else if(value == '待审批'){
return 'background-color:#FF4500;color:#FFF;';
}else if(value == '已审批'){
return 'background-color:#4682B4;color:#FFF;';
}else if(value == '同意'){
return 'background-color:#32CD32;color:#FFF;';
}else if(value == '驳回'){
return 'background-color:#808080;color:#FFF;';
}
}

设置日期组合框的日期时间为当前时间。

var curr_date = new Date();
var y = curr_date.getFullYear();
var m = curr_date.getMonth()+1;
var d = curr_date.getDate();
var h = curr_date.getHours();
var min = curr_date.getMinutes();
var sec = curr_date.getSeconds();
$("#add_time").datebox("setValue", y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d))+ ' '
+ (h<10?('0'+h):h) +':' + (min<10?('0'+min):min) + ':' + (sec<10?('0'+sec):sec);

在combobox中输入一个关键字，下拉选项自动过滤，类似搜索引擎功能。

$("#user_combo").combobox({
url : "getUserListByKeyword?keyword=",
onChange : function(newValue, oldValue){
if(newValue != null){
var thisKey = $("#user_combo").combobox('getText');
var url = "getUserListByKeyword?keyword=" + encodeURICoponent(encodeURIComponent(thisKey)); //防止中文乱码
$("#user_combo").combobox('reload',url);
}
},
onSelect : function(rec){
// 再次查询一遍，避免出现不符合条件的选项的bug
var thisKey = $("#user_combo").combobox('getText');
var url = "getUserListByKeyword?keyword=" + encodeURIComponent(encodeURIComponent(thisKey));
$("#user_combo").combobox('reload',url);
}
});

美化消息窗口。用过qq邮箱的大多知道删除一个邮件时不是弹出一个确认操作窗口，而是直接删除掉并在提示窗口有个撤回删除的按钮，个人觉得这个真的很实用，毕竟让用户再在确认窗口点击确定删除一个操作实在是太繁琐了，耽误不少时间，影响用户体验性，所以我就用show类型的消息框做了一个类似的提示窗口。

$.messager.show({
title:'提示',
msg:'删除成功  [<a href="#" id="" onclick="cancelDelete(this)">点此撤销</a>]',
showType:'slide',
timeout : 6 * 1000,// 6秒后隐藏
width : 200,
height : 80,
style:{
top:document.body.scrollTop+document.documentElement.scrollTop //在浏览器上部显示
}
});

效果图如下：



隐藏数据表格datagrid顶部面板的工具栏toolbar（这个是当时涉及到权限操作时用到的）

$(".datagrid-toolbar").hide();