sshjqueryeqsyui文档.docx

jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）博客分类：?Jquery框架jQueryjsonCSSJavaScript??前几天心血来潮用jquery-easyui+spring、struts2、hibernate实现了一个系统的一小部分功能，下面给大家分享一下。?首先看运行效果：【图一：登录页】???【图二：页面布局】??【图三：用户编辑层】???【图四：确认弹出框】???准备easyui插件简介在这就不赘述了，大家可以在iteye上找到很多该插件的相关消息。如果页面需要使用easyui插件，需要引进一下js和css（使用的时候需要注意easyui版本依赖的jquery.js版本要对应）：Html代码??script?type=text/javascript?src=%=root%/Web/common/js/jquery-1.4.4.min.js/script??Html代码??link?rel=stylesheet?type=text/css?href=%=root%/Web/common/js/easyui/themes/default/easyui.css??link?rel=stylesheet?type=text/css?href=%=root%/Web/common/js/easyui/themes/icon.css??script?type=text/javascript?src=%=root%/Web/common/js/easyui/js/jquery.easyui.min.js/script??script?type=text/javascript?src=%=root%/Web/common/js/easyui/js/easyui-lang-zh_CN.js/script???布局为了让一个主页实现上下左右中的布局方式显示，这里就需要用到easyui一个叫layout的东西，通常有多种方式可以实现布局。①使用js创建layout首先定义一个div，设置region，title等属性（注html是没有region属性的，这是easyui专属属性）?Html代码??div?id=cc?style=width:600px;height:400px;??????div?region=north?title=North?Title?split=true?style=height:100px;/div??????div?region=south?title=South?Title?split=true?style=height:100px;/div??????div?region=east?iconCls=icon-reload?title=East?split=true?style=width:100px;/div??????div?region=west?split=true?title=West?style=width:100px;/div??????div?region=center?title=center?title?style=padding:5px;background:#eee;/div??/div??然后在js中指定id为cc的div为layout：?Html代码??$(#cc).layout(options);???简单介绍几个layout属性：??属性名数据类型功能默认值titlestring指定布局的标题名称无regionstring指定布局位置，分：东、西、南、北、中?borderboolean是否显示边界truesplitboolean是否显示分界线从而用户可以拖动改变其大小falseiconClsstring指定布局的图标样式无hrefstring指定该布局远程调用的html路径无?②让整个body使用easyui的cssclass：class=easyui-layout自动创建layout这也是我使用的方式，看下面代码：Html代码??body?class=easyui-layout??????!--?正上方panel?--??????div?region=north?style=height:100px;padding:10px;?href=%=root%/Web/common/page/top.html/div??????!--?正左边panel?--??????div?region=west?title=菜单栏?split=true?style=width:280px;padding1:1px;overflow:hidden;??????????div?class=easyui-accordion?fit=true?border=false???