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" οnclick="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:CSDN不走心,我一不小心点了舍弃,连提示都不提示,就把我写的博客删了,找都找不回来,至少应该提示一下的.