jquery-easyUI的应用与拓展

     做JAVA开发一年多了，还没有写过原创博客，这是第一次。写这次博客的目的为了备忘，个人对ajax的东西都非常感兴趣，无意中接触到jquery-easyUI框架，里面封装了平常经常会用到的UI界面和一些简便实用的功能，自己觉得一些很必要的功能里面没有，我自行做了拓展。以前做ajax开发对dwr最有爱，现在发现jquery的ajax能与struts2很好的关联，用着也挺简洁方便的。

     后台用到了spring、struts2、ibatis，数据库用的是oracle9i，下面是测试用的数据表结构：

   下面就是用jquery layout做出来的示例效果：

TAB右键以及双击功能事件的添加与实现：

js代码：

function tabClose() { /*双击关闭TAB选项卡*/ $(".tabs-inner").dblclick(function(){ if(!collapse){ $('body').layout('collapse','west'); $('body').layout('collapse','north'); }else{ $('body').layout('expand','west'); $('body').layout('expand','north'); } }) $(".tabs-inner").bind('contextmenu',function(e){ $('#mm').menu('show', { left: e.pageX, top: e.pageY }); var subtitle =$(this).children("span").text(); $('#mm').data("currtab",subtitle); return false; }); } //绑定右键菜单事件 function tabCloseEven() { $('#mm-tabmax').click(function(){ if(!collapse){ $('body').layout('collapse','west'); $('body').layout('collapse','north'); }else{ $('body').layout('expand','west'); $('body').layout('expand','north'); } }) //关闭当前 $('#mm-tabclose').click(function(){ var currtab_title = $('#mm').data("currtab"); if(currtab_title!='主页') $('#tabs').tabs('close',currtab_title); }) //全部关闭 $('#mm-tabcloseall').click(function(){ $('.tabs-inner span').each(function(i,n){ var t = $(n).text(); if(t!='主页') $('#tabs').tabs('close',t); }); }); //关闭除当前之外的TAB $('#mm-tabcloseother').click(function(){ var currtab_title = $('#mm').data("currtab"); $('.tabs-inner span').each(function(i,n){ var t = $(n).text(); if(t!=currtab_title && t!='主页') $('#tabs').tabs('close',t); }); }); //关闭当前右侧的TAB $('#mm-tabcloseright').click(function(){ var nextall = $('.tabs-selected').nextAll(); if(nextall.length==0){ //msgShow('系统提示','后边没有啦~~','error'); return false; } nextall.each(function(i,n){ var t=$('a:eq(0) span',$(n)).text(); $('#tabs').tabs('close',t); }); return false; }); //关闭当前左侧的TAB $('#mm-tabcloseleft').click(function(){ var prevall = $('.tabs-selected').prevAll(); if(prevall.length==0){ return false; } prevall.each(function(i,n){ var t=$('a:eq(0) span',$(n)).text(); if(t!='主页') $('#tabs').tabs('close',t); }); return false; }); }  

datagrid宽度自适应的方法拓展：

function fillsize(percent){ var bodyWidth = document.body.clientWidth; return (bodyWidth-80)*percent; } 

datagrid右键功能的拓展与实现，需要修改jquery.easyui.min.js源代码：

在1227行加入以下JS代码：

.bind("contextmenu.datagrid",function(e){ var _116=$(this).attr("datagrid-row-index"); if(opts.OnContextmenu){ opts.OnContextmenu.call(_113,_116,data.rows[_116],e); } return false; }) 

在datagrid的属性中这样写：

OnContextmenu:function(row,data,e){ $('#mm-people').menu('show', { left: e.pageX, top: e.pageY }); rowdata = data; } 

easyUI的validate自定义：

$.extend($.fn.validatebox.defaults.rules, { number: { validator: function(value, param){ return !isNaN(value); }, message: '必须为数字' } });