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