jquery easy项ui.docxVIP

JQuery EasyUI下载地址：/download，最新版本1.2.2。首先预览一下界面：本例实现的功能：1、多标签2、分页列表显示数据3、获取选中行的标识值，删除选中行实现以上功能主要使用了：1、layout：布局2、tabs：多标签3、datagrid：表格显示数据，并可以分页4、messager：消息框5、window：窗口要了解用法，下载之后，参阅demo文件夹下的demo和官方文档。二、功能实现分解1、布局（参考layout的各个demo），可以参考上面的界面截图来看下面代码（Main.html）：htmlheadmeta http-equiv=Content-Type content=text/html; charset=UTF-8title系统/titlelink rel=stylesheet type=text/css href=Style/dtree.csslink rel=stylesheet type=text/css href=JQueryEasyUI/themes/default/easyui.cssscript type=text/javascript src=JQueryEasyUI/jquery-1.4.4.min.js/scriptscript type=text/javascript src=JQueryEasyUI/jquery.easyui.min.js/scriptscript type=text/javascript//--Tabs Begin--$(function () {$(#tt).tabs({tools: [{iconCls: icon-add,handler: function () {alert(add);}}, {iconCls: icon-save,handler: function () {alert(save);}}]});});function addTab(tit, link) {if ($(#tt).tabs(exists, tit)) {$.messager.alert(提示消息, 窗口已经打开。,info);} else {$(#tt).tabs(add, {title: tit,//href: link,content: iframe scrolling=yes frameborder=0 src= + link + style=width:100%;height:98%;/iframe,fit: true,closable: true});}}//--Tabs End--/script/headbody class=easyui-layoutdiv region=north border=false style=overflow: hidden; height: 60px; background: #A4BED4;h2Head Part/h2/divdiv region=south split=false style=height: 2px; background: #efefef;/divdiv region=west split=true title=控制面板 style=width: 180px;div id=divTreeimg src=JQueryEasyUI/themes/gray/images/panel_loading.gif//div/div!--overflow:hidden; 设置div无滚动条--div region=center title= style=background: #efefef;overflow:hidden;div id=tt style=width: auto; height: auto;div title=我的桌面 style=padding: 10px;/div/div/div/body/html代码说明：1）addTab函数中添加tab代码中有个参数是content，接受文本格式的数据，content的值就是创建新的tab后显示在tab中内容，这里用了一个iframe加载另外一个页面的内容；2）加载另外一个页面的内容用href参数也可以，但要注意引用的外部文件的路径需要以当前页为参照来写相对路径；3）title：标签标题；4）其它参数请参阅官方文档。2、树形菜单，参考，JQuery EasyUI中也有Tree，这里没有使用。3、添加多标签把2中的添加Tree的JS代码修改一下添加到script/script就可以了1）引用dTree.js：script type=text/javascript src=Scripts/dtree.js/script 2）修改后的代码//!--Tree Be