一、说明：

JQuery EasyUI下载地址：http://jquery-easyui.wikidot.com/download，最新版本1.2.2。

首先预览一下界面：

本例实现的功能：

1、多标签

2、分页列表显示数据

3、获取选中行的标识值，删除选中行

实现以上功能主要使用了：

1、layout：布局

2、tabs：多标签

3、datagrid：表格显示数据，并可以分页

4、messager：消息框

5、window：窗口

要了解用法，下载之后，参阅demo文件夹下的demo和官方文档。

二、功能实现分解

1、布局（参考layout的各个demo），可以参考上面的界面截图来看下面代码（Main.html）：

  1.  
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>系统</title>
  6.     <link rel="stylesheet" type="text/css" href="Style/dtree.css">
  7.     <link rel="stylesheet" type="text/css" href="JQueryEasyUI/themes/default/easyui.css">
  8.     <script type="text/javascript" src="JQueryEasyUI/jquery-1.4.4.min.js"></script>
  9.     <script type="text/javascript" src="JQueryEasyUI/jquery.easyui.min.js"></script>
  10.     <script type="text/javascript">
  11.         //<--Tabs Begin-->
  12.         $(function () {
  13.             $('#tt').tabs({
  14.                 tools: [{
  15.                     iconCls: 'icon-add',
  16.                     handler: function () {
  17.                         alert('add');
  18.                     }
  19.                 }, {
  20.                     iconCls: 'icon-save',
  21.                     handler: function () {
  22.                         alert('save');
  23.                     }
  24.                 }]
  25.             });
  26.         });
  27.  
  28.         function addTab(tit, link) {
  29.             if ($('#tt').tabs('exists', tit)) {
  30.                 $.messager.alert('提示消息', '窗口已经打开。','info');
  31.             } else {
  32.                 $('#tt').tabs('add', {
  33.                     title: tit,
  34.                     //href: link,
  35.                     content: '<iframe scrolling="yes" frameborder="0"  src="' + link + '" style="width:100%;height:98%;"></iframe>',
  36.                     fit: true,
  37.                     closable: true
  38.                 });
  39.             }
  40.         }
  41.         //<--Tabs End-->
  42.         
  43.     </script>
  44. </head>
  45. <body class="easyui-layout">
  46.     <div region="north" border="false" style="overflow: hidden; height: 60px; background: #A4BED4;">
  47.         <h2>Head Part</h2>
  48.     </div>
  49.     <div region="south" split="false" style="height: 2px; background: #efefef;">
  50.     </div>
  51.     
  52.     <div region="west" split="true" title="控制面板" style="width: 180px;">
  53.         <div id="divTree">
  54.             <img src="JQueryEasyUI/themes/gray/images/panel_loading.gif" />
  55.         </div>
  56.     </div>
  57.     <!--overflow:hidden; 设置div无滚动条-->
  58.     <div region="center" title=" " style="background: #efefef;overflow:hidden;">
  59.         <div id="tt" style="width: auto; height: auto;">
  60.             <div title="我的桌面" style="padding: 10px;">
  61.             </div>
  62.         </div>
  63.     </div>
  64. </body>
  65. </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）修改后的代码

  1.  
  2.         //<!--Tree Begin-->
  3.         d = new dTree('d');
  4.         d.add(0, -1, '个人面板');
  5.         function getData(id) {
  6.             $.ajax({
  7.                 url: 'ASHX/ModuleHandler.ashx?parentID=' + id,
  8.                 type: 'post',
  9.                 datatype: 'json',
  10.                 success: function (returnJsonValue) {
  11.                     if (returnJsonValue.length > 0) {
  12.                         //格式化为JSON数据格式
  13.                         var json = eval("(" + returnJsonValue + ")");
  14.                         //遍历集合，添加树节点
  15.                         $.each(json.Module, function (key, value) {
  16.                             if (id == 0) {
  17.                                 d.add(value.ModuleCode, value.ParentCode, value.ModuleName, '', value.ModuleName,'', 'Style/dtreeimg/folder.gif', 'Style/dtreeimg/folderopen.gif');
  18.                             }
  19.                             else {
  20.                                 d.add(value.ModuleCode, value.ParentCode, value.ModuleName, "javascript:addTab('" + value.ModuleName + "','" + value.ModuleLinkUrl + "')", value.ModuleName, '');
  21.                             }
  22.                             //根据模块的ParentID递归绑定数据
  23.                             getData(value.ModuleCode);
  24.                         })
  25.                     }
  26.                     else {
  27.                         $("#divTree").html(d.toString());
  28.                     }
  29.                 }
  30.             })
  31.         }
  32.         $(getData(0));
  33.         //<!--Tree End-->

这样修改之后，当点击Tree的Node的时候，就会在【我的桌面】标签后依次添加新的标签，标签的内容就是iframe中嵌入的网页。

4、列表显示角色（RoleList.html），使用datagrid，可以看JQuery EasyUI中demo/datagrid.html这个demo

1）构造datagrid：设置表格显示哪些列，列名及与数据源中列名的对应，如果使用了toolbar，还要设置一下各Button的事件处理代码，其它属性根据需要设置（对属性不清楚的，查阅官方文档）；

下面是全部前台代码：

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <title>角色列表</title>
  7.     <link rel="stylesheet" type="text/css" href="../JQueryEasyUI/themes/default/easyui.css">
  8.     <link rel="stylesheet" type="text/css" href="../JQueryEasyUI/themes/icon.css">
  9.     <script type="text/javascript" src="../JQueryEasyUI/jquery-1.4.4.min.js"></script>
  10.     <script type="text/javascript" src="../JQueryEasyUI/jquery.easyui.min.js"></script>
  11.     <script type="text/javascript" src="../JQueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
  12.     <script type="text/javascript">
  13.         $(function () {
  14.             $('#roleList').datagrid({
  15.                 title: '',
  16.                 loadMsg: "数据加载中，请稍后……",
  17.                 nowrap: false,
  18.                 striped: true,
  19.                 collapsible: true,
  20.                 url: '../ashx/RoleHandler.ashx',
  21.                 pageList: [10, 15, 20, 25, 30, 40, 50],
  22.                 pageSize: 15,
  23.                 sortName: 'RoleSort',
  24.                 sortOrder: 'asc',
  25.                 remoteSort: false,
  26.                 idField: 'RoleCode',
  27.                 frozenColumns: [[
  28.                     { field: 'ck', checkbox: true },
  29.                     { title: '角色编码', field: 'RoleCode', width: 120, align: 'center', sortable: true }
  30.                 ]],
  31.                 columns: [[
  32.                     { field: 'RoleName', title: '角色名称', width: 120, align: 'center', sortable: true },
  33.                     { field: 'RoleSort', title: '默认排序', width: 80, align: 'center', sortable: true },
  34.                     { field: 'opt', title: '操作', width: 100, align: 'center',
  35.                         formatter: function (value, rec) {
  36.                             return '<a href="#" onclick="parent.addTab(\'编辑角色[' + rec.RoleName + ']\', \'Role/Edit.aspx?RoleCode=' + rec.RoleCode + '&RoleName=' + rec.RoleName + '\')"><span style="color:red">编辑</span></a>';
  37.                         }
  38.                     }
  39.                 ]],
  40.                 pagination: true,
  41.                 rownumbers: true,
  42.                 onLoadSuccess: function () {
  43.                     $('.datagrid-toolbar').append($('#txtSearch'));
  44.                     $('#txtSearch').show();
  45.                 },
  46.                 toolbar: [
  47.                  {
  48.                      id: 'btnadd',
  49.                      text: '添加',
  50.                      iconCls: 'icon-add',
  51.                      handler: function () {
  52.                          parent.addTab('添加角色', 'Role/Edit.aspx');
  53.                      }
  54.                  }, {
  55.                      id: 'btncut',
  56.                      text: '删除',
  57.                      iconCls: 'icon-cut',
  58.                      handler: function () {
  59.                          var codes = getSelections();
  60.                          if (codes == '') {
  61.                              $.messager.alert('提示消息', '请选择要删除的数据！', 'info');
  62.                          } else {
  63.                              $.messager.confirm('提示消息', '确定要删除所选数据吗？', function (r) {
  64.                                  if (r) {
  65.                                      $('#processWindow').window('open', 'aadasdsads');
  66.                                      $.ajax({
  67.                                          url: '../ashx/RoleHandler.ashx?Codes=' + codes,
  68.                                          type: 'post',
  69.                                          datatype: 'text',
  70.                                          success: function (returnValue) {
  71.                                              if (returnValue) {
  72.                                                  $('#processWindow').window('close');
  73.                                                  $('#roleList').datagrid('reload');
  74.                                                  $('#roleList').datagrid('clearSelections');
  75.                                              }
  76.                                          }
  77.                                      });
  78.                                  }
  79.                              });
  80.                          }
  81.                      }
  82.                  }, '-',
  83.                 {
  84.                     id: 'btnSearch',
  85.                     text: '搜索',
  86.                     disabled: false,
  87.                     iconCls: 'icon-search',
  88.                     handler: function () {
  89.                         $('#roleList').datagrid('options').url = '../ashx/RoleHandler.ashx?RoleName=' + escape($('#txtSearch').val());
  90.                         $('#roleList').datagrid("reload");
  91.                     }
  92.                 }
  93.                 ]
  94.             });
  95.         });
  96.  
  97.         function getSelections() {
  98.             var ids = [];
  99.             var rows = $('#roleList').datagrid('getSelections');
  100.             for (var i = 0; i < rows.length; i++) {
  101.                 ids.push(rows[i].RoleCode);
  102.             }
  103.             return ids.join(',');
  104.         }
  105.     </script>
  106. </head>
  107. <body>
  108.     <table id="roleList">
  109.     </table>
  110.     <div id="processWindow" class="easyui-window" closed="true" modal="true" title="提示消息"
  111.         style="width: 300px; height: 60px;">
  112.         <div id="windowContent" class="general-font">
  113.             <img src="../JQueryEasyUI/themes/gray/images/panel_loading.gif" />
  114.             操作进行中，请稍后...
  115.         </div>
  116.     </div>
  117.     <input type="text" id="txtSearch" title="请输入角色名称" style="display: none;" />
  118. </body>
  119. </html>

2）查询数据并生成JSON格式的数据返回

（1）datagrid请求的URL是../ashx/RoleHandler.ashx，在RoleHandler.ashx的ProcessRequest(HttpContext context)方法中构造后输出即可。如何将查询出来的数据构造为JSON格式的数据，参考这里。

（2）JsonName请使用“rows”，不要使用实体类名

5、添加

调用主窗体中的addTab方法创建新标签，定义toolbar时已经写了相关代码

  1. id: 'btnadd',
  2. text: '添加',
  3. iconCls: 'icon-add',
  4. handler: function () {
  5.   parent.addTab('添加角色', 'Role/Edit.aspx');
  6. }

6、编辑

在定义列的时候已经写了相关代码

  1. { field: 'opt', title: '操作', width: 100, align: 'center',
  2.      formatter: function (value, rec) {
  3.            return '<a href="#" onclick="parent.addTab(\'编辑角色[' + rec.RoleName + ']\', \'Role/Edit.aspx?RoleCode=' + rec.RoleCode + '&RoleName=' + rec.RoleName + '\')"><span style="color:red">编辑</span></a>';
  4.      }
  5. }

7、删除

调用getSelections()函数获得选中项的标识值的列表（以","间隔），然后请求一般处理程序RoleHandler.ashx并把获取的值的列表作为参数实现删除。

$('#roleList').datagrid('reload')，重新加载datagrid，并停留在当前页。

$('#roleList').datagrid('clearSelections') ，清空已获得的选中项的标识值的列表。

8、查询

没找到可以直接在toolbar中添加查询输入框等的方法，于是通过下面方法来实现

1）在body中添加如下代码：<input type="text" id="txtSearch" title="请输入角色名称" style="display: none;" />

2）添加datagrid的onLoadSuccess事件及处理代码:

  1. onLoadSuccess: function () {
  2.     $('.datagrid-toolbar').append($('#txtSearch'));
  3.     $('#txtSearch').show();
  4. }

$('.datagrid-toolbar') 就是datagrid的toobar。

3）toolbar中的搜索按钮定义及事件处理代码

  1.  
  2. id: 'btnSearch',
  3. text: '搜索',
  4. disabled: false,
  5. iconCls: 'icon-search',
  6. handler: function () {
  7.     $('#roleList').datagrid('options').url = '../ashx/RoleHandler.ashx?RoleName=' + escape($('#txtSearch').val());
  8.     $('#roleList').datagrid("reload");
  9. }

9、分页

要显示分页栏（pager），在定义datagrid代码中需将属性pagination的值设置为true，这时默认一页显示10行数据，可选择的pageSize为10,20,30,40,50，如果不用默认可以自定义：

pageList: [10, 15, 20, 25, 30, 40, 50],

pageSize: 15,

当客户端发起新的请求时，rows（每页显示的行数）和page（新的页码值）会作为参数一起传递，所以服务器端只要获得这两个参数的值就知道一行显示多少条数据和页码是多少了。

context.Request["rows"] ;

context.Request["page"] ;

【别自作聪明用context.Request.QueryString["rows"]，道理都明白】

pager的其它事件可以不做任何处理。

全部参考代码（略去引用命名空间）：

  1.  
  2.     public class RoleHttpHandler : IHttpHandler
  3.     {
  4.         #region IHttpHandler Members
  5.  
  6.         public bool IsReusable
  7.         {
  8.             get { return true; }
  9.         }
  10.  
  11.         public void ProcessRequest(HttpContext context)
  12.         {
  13.             context.Response.ContentType = "text/plain";
  14.             BaseSqlHelper helper = new BaseSqlHelper();
  15.             if (!String.IsNullOrEmpty(GetRoleCodes(context)))
  16.             {
  17.                 String codes = GetRoleCodes(context);
  18.                 codes = "'" + codes.Replace(",", "','") + "'";
  19.                 helper.ExecuteNonQuery(string.Format("delete from Roles where RoleCode in({0})", codes));
  20.                 context.Response.Write("true");
  21.             }
  22.             else
  23.             {
  24.                 DataTable dt = new DataTable();
  25.                 string sqlWhere = string.Format(" from Roles where RoleVisible=1 and RoleName like '%{0}%'", GetRoleName(context));
  26.                 helper.FillDataTable("select * " + sqlWhere, GetPageSize(context), GetPageIndex(context), dt);
  27.                 IList<Roles> list = new List<Roles>();
  28.                 if (dt != null && dt.Rows.Count > 0)
  29.                 {
  30.                     foreach (DataRow dr in dt.Rows)
  31.                     {
  32.                         list.Add(new Roles()
  33.                         {
  34.                             RoleCode = dr["RoleCode"].ToString(),
  35.                             RoleName = dr["RoleName"].ToString(),
  36.                             RoleSort = int.Parse(dr["RoleSort"].ToString())
  37.                         });
  38.                     }
  39.                 }
  40.  
  41.                 if (list.Count > 0)
  42.                 {
  43.                     dt.Clear();
  44.                     BaseFormatToJson toJson = new BaseFormatToJson();
  45.                     string data = toJson.ListToJson<Roles>(list, "rows");
  46.                     data = data.Substring(1);
  47.                     context.Response.Write(
  48.                         "{ \"total\":" +
  49.                         helper.ExecuteScalar("select count(*) "+sqlWhere) + "," +data);
  50.                 }
  51.             }
  52.         }
  53.  
  54.         public String GetRoleCodes(HttpContext context)
  55.         {
  56.             return context.Request["Codes"];
  57.         }
  58.  
  59.         public Int32 GetPageSize(HttpContext context)
  60.         {
  61.             try
  62.             {
  63.                 return Int32.Parse(context.Request["rows"].ToString());
  64.             }
  65.             catch
  66.             {
  67.                 return 10;
  68.             }
  69.         }
  70.  
  71.         public Int32 GetPageIndex(HttpContext context)
  72.         {
  73.             try
  74.             {
  75.                 return Int32.Parse(context.Request["page"].ToString());
  76.             }
  77.             catch
  78.             {
  79.                 return 1;
  80.             }
  81.         }
  82.  
  83.         public String GetRoleName(HttpContext context)
  84.         {
  85.             return context.Request["RoleName"];
  86.         }
  87.  
  88.         #endregion
  89.     }
  90. }

10、禁止点击行时选中行，要选中行，仅能通过点击行前的CheckBox ，代码加在onLoadSuccess事件中：

  1.  
  2. onLoadSuccess: function () {
  3.                     $('.datagrid-toolbar').append($('#txtSearch'));
  4.                     $('#txtSearch').show();
  5.                     //禁止点击行就选中
  6.                     function bindRowsEvent() {
  7.                         var panel = $('#List').datagrid('getPanel');
  8.                         var rows = panel.find('tr[datagrid-row-index]');
  9.                         rows.unbind('click').bind('click', function (e) {
  10.                             return false;
  11.                         });
  12.                         rows.find('div.datagrid-cell-check input[type=checkbox]').unbind().bind('click', function (e) {
  13.                             var index = $(this).parent().parent().parent().attr('datagrid-row-index');
  14.                             if ($(this).attr('checked')) {
  15.                                 $('#List').datagrid('selectRow', index);
  16.                             } else {
  17.                                 $('#List').datagrid('unselectRow', index);
  18.                             }
  19.                             e.stopPropagation();
  20.                         });
  21.                     }
  22.                     setTimeout(function () {
  23.                         bindRowsEvent();
  24.                     }, 10);   
  25.                 }, 

11、我使用IE、FF、Chrome的最新版本进行测试，结果还是对IE（9 Beta）的兼容性最好。

ASP.NET网站权限设计实现（三）——套用JQuery EasyUI列表显示数据、分页、查询的更多相关文章

  1. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

  2. ASP.NET网站权限设计实现（二）——角色权限绑定

    1.关于使用的几张表的说明  (1)Module:模块表,记录模块名称.编码等模块基本数据.   (2)Permissions:权限表,记录所有模块权限distinct之后的数据.   (3)Modu ...

  3. ASP.NET网站权限设计实现（一）——使用PowerDesigner进行数据库设计

    这里用PowerDesigner做一个初步的设计,后面可能会有修改. 1.启动PowerDesigner新建物理数据模型 2.工具栏 3.新建表模型 4.添加第一张表,可以双击表或右键菜单打开下面窗口 ...

  4. WisDom.Net 框架设计(五) 权限设计

    WisDom.Net --权限设计 1.需求分析     基本在所有的管理系统中都离不开权限管理.可以这么说,权限管理是管理系统的核心所在. 权限管理说白一些就是每个人能够做什么,不能够做什么.可以说 ...

  5. ASP.NET 网站管理工具介绍

    有没有感觉对 web.config 的操作很烦呢? 老是手动来编辑 web.config 确实挺麻烦的, 不过自 ASP.NET 2.0 起便有了 ASP.NET 网站管理工具, 这个工具呢,其实就是 ...

  6. asp.net web网站权限系统的简单设计

    权限设计总结一句话就是:拥有权限的主体来管控系统的各种资源资源,及在资源上体现的各种操作. 概括来说就是,权限离不开三要素: 1:权限的主体 2:管控的资源 3:各种操作 现对三要素分别做简单的阐述 ...

  7. ASP.NET MVC +EasyUI 权限设计(三)基础模块

    请注明转载地址:http://www.cnblogs.com/arhat 在上一章中呢,我们基本上搭建好了环境,那么本章我们就从基础模块开始写起.由于用户,角色,动作三个当中,都是依赖与动作的,所以本 ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据 ...

  9. ASP.NET MVC +EasyUI 权限设计(二)环境搭建

    请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...

随机推荐

  1. OO第二次单元总结

    OO第二次单元总结 前言 第二单元的三次作业:系列电梯与多线程. 第五次作业 (1)设计策略 电梯的第一次作业是单部傻瓜电梯,采用FAFS调度策略,电梯按队列顺序依次处理请求,单次只处理一个请求.本次 ...

  2. hpu 1267 Cafeteria (01背包)

    1267: Cafeteria [DP] 时间限制: 1 Sec 内存限制: 128 MB提交: 76 解决: 31 统计 题目描述 Nanae把饥肠辘辘的josnch带去一家自助餐厅,面对面前眼花缭 ...

  3. TV-B-Gone Kit - Universal v1.2

  4. "Incorrect string value: '\\xE7\\x89\\x8C\\xE5\\xB1\\x80...' for column 'name' at row 1")

    出现这个错误的原因是,数据库的编码格式为latin1 而我要将utf8的中文插入到数据库中. mysql> alter database xxx default character set ut ...

  5. vue|html5 form 验证

    html:<form id="scoreForm" @submit="fsub" > <template v-for="(item, ...

  6. 在本地设置 http-proxy 代理 (前后端分离)

    1. 利用package.json 安装nodejs,创建package.json文件:内容如下 "dependencies": { "http-proxy": ...

  7. NBUT 1217 Dinner 2010辽宁省赛

    Time limit  1000 ms Memory limit  32768 kB Little A is one member of ACM team. He had just won the g ...

  8. magento的常用调用

    1,CMS调用网站的Url <a href="{{store direct_url="about-us"}}">About Us</a> ...

  9. Object Tracking Benchmark

    Abstract 问题: 1)evaluation is often not suffcient 2)biased for certain types of algorthms 3)datasets ...

  10. Win10：已禁用IME

    问题 windows10莫名其妙地禁用了IME,导致的结果便是浏览器不能输入中文. 百度搜索的答案都是tmd 控制中心-->管理-->任务XXX,但是我的 任务XXX打不开啊. 解决 go ...