EasyUI成效-右击菜单
之前写了一篇博客，关于EasyUI效果的，当时我是将EasyUI的demo一个一个打开,在浏览器中查看他们的效果,因为是英文版的,很多单词不认识,还一个个查了意思.后来,我发现了EasyUI的中文官网的EasyUIDemo 在线实例,顿时觉得,当初自己好浪费时间.不过好在,一,认识了不少单词;二,对于EasyUI的样式了解了不少.现在,做项目总是会想着将这些效果融进去.
现在,我打算写一些关于EasyUI效果的博客,1.右击菜单;2.datagrid的编辑效果;3.弹出页面效果(这个效果还有些问题),这些是我目前用上的,其他效果还没有用.
关于EasyUI的右击效果,EasyUI官方翻译是叫数据表格DataGrid中的语境菜单,效果就是这样.将datagrid的所有列,生成菜单.默认是全都显示,点击一下,去掉勾,则那一列隐藏.
我的效果,和这个差不多.代码就是EasyUI的源码,所以就不贴大段大段的代码了.
<table id="dg" title="学生信息" class="easyui-datagrid"
url="${pageContext.request.contextPath}/queryPageStudent"
style="width: 100%; height: 400px" toolbar="#toolbar"
pagination="true" rownumbers="true" fitColumns="true"
singleSelect="true" data-options="autoRowHeight:false">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th field="id" hidden="true"></th>
<th field="student.name"
data-options="formatter: function (value, rec) {
return rec.student['name'];}"
width="100px">学生名</th>
<th field="applicantDate"
data-options="formatter:function(value,row,index){ var applicantDate = new Date(value); return applicantDate.toLocaleString(); }"
width="100px">时间</th>
</tr>
</thead>
</table>
<div id="toolbar" width="50">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-save" plain="true" onclick="exportInfo()">导出</a>
</div>
首先是一个id为dg的datable,根据url查询到的数据,对应的显示到每列上.其中除了正常的列外,还有复选框列和隐藏列.
其中,由于数据是有级联效果,所以用formatter将数据进行格式化显示.其中,二级级联用rec.student['name'],而三级级联同理,rec.student['name']['name'],这样就能显示.
<th field="student.name" data-options="formatter: function (value, rec) {
return rec.student['name'];
}"
width="100px">学生名</th>
还有日期效果,也是用formatter来处理.而官网上,对于formatter也进行了详细介绍.
上面是对table的介绍,还没有提到菜单效果,下面就是菜单效果的js代码.分成两段介绍.首先是,在table上添加onHeaderContextMenu,右击事件.在右击时,若有菜单就显示菜单,并控制显示位置;没有,就先创建菜单,再显示.
<script type="text/javascript">
<%--右击菜单效果--start---刘艳玲---2期 2015年2月2日17:03:54--%>
//有菜单就显示,没有就创建菜单,再显示.
$(function() {
$('#dg').datagrid({
onHeaderContextMenu : function(e, field) {
e.preventDefault();
if (!cmenu) {
createColumnMenu();
}
cmenu.menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
});
然后创建菜单,就是将table中的所有的列字段获取到,然后将这些列字段,添加到menu中,并且默认带上icon-ok的图标,显示的是列名,而对应的是列字段的名.其中由于隐藏列和复选框列没有列名,所以生成的菜单名是空的,就是这样.
而隐藏列不管隐不隐藏都是隐藏的,所以根据他们的列名是undefined的,控制一下不生成菜单.
而如果有点击某一个菜单,则显示变隐藏,隐藏变显示.不仅修改hideColumn和showColumn,还修改图标.
//创建菜单
var cmenu;
function createColumnMenu() {
cmenu = $('<div/>').appendTo('body');
//点击,若原来图标是icon-ok,则该列隐藏,并且图标变为icon-empty.
//而原来是empty,点击一下,则变为icon-ok,该列也显示.
cmenu.menu({
onClick : function(item) {
if (item.iconCls == 'icon-ok') {
$('#dg').datagrid('hideColumn', item.name);
cmenu.menu('setIcon', {
target : item.target,
iconCls : 'icon-empty'
});
} else {
$('#dg').datagrid('showColumn', item.name);
cmenu.menu('setIcon', {
target : item.target,
iconCls : 'icon-ok'
});
}
}
});
//获取datagrid的所有列字段,添加图标icon-ok效果,并且显示的值是列名,对应的是列字段.
var fields = $('#dg').datagrid('getColumnFields');
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $('#dg').datagrid('getColumnOption', field);
//隐藏和复选框不生成菜单
if (typeof (col.title) != "undefined") {
cmenu.menu('appendItem', {
text : col.title,
name : field,
iconCls : 'icon-ok'
});
}
}
}
<%--右击菜单效果--end---刘艳玲---2期 2015年2月2日17:03:54--%>
</script>
其中,对于这些用到的方法,hideColum,showColumn,getColumnFields,getColumnOption,和事件onHeaderContextMenu,官网都提供了很详细的资料.
事件:
而事件的写法都是,这么写的,
$('#dg').datagrid({
onHeaderContextMenu: function(index,field,value){
}
});
方法:
方法的写法都是这么写的.其中field就是参数.
$('#dg').datagrid('getColumnOption', field);
这个还有一个小问题,就是当所有的列都隐藏之后,datagrid的头部右击效果就没了,无法恢复数据.当然页面刷新就可以重新再来一遍了.
以上,就是用到的EasyUI的语境菜单效果,做起来不费劲,但是感受到了EasyUI的强大,顺便总结下EasyUI的方法和事件的写法,顺便再次觉得官网/文档很重要.
PS:****不走心,我一不小心点了舍弃,连提示都不提示,就把我写的博客删了,找都找不回来,至少应该提示一下的.
- 1楼jyhye昨天 10:05
- 挺好的，感觉easyui用起来跟Extjs好像啊