在Asp.Net中使用jQueryEasyUI

Sun, 25 Nov 2012 00:00:00 +0800

前言

最近做一个小工具，列表显示页面准备使用jQuery的UI框架，因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现有几个问题就果断放弃了使用jQWidgets:

页面加载速度比较慢
当列表字段过多出现横向滚动条时,拖动滚动条非常卡(在IE下都很卡,Chrome好点)
分页取数稍显麻烦,也可能是我没研究透。

经过一番比较选择了jQueryEasUI，目前最新版本为1.3.1：

其实是用类似的框架，看看官网的文档也就OK了，本文是我最近是用jQueryEasyUI的一个总结，也可以让初使用jQueryEasyUI的朋友少走弯路。

下载引用

下载后解压的文件目录如下图：

demo：JQueryEasyUI的一些示例页面，在项目使用可以将该目录删除
locale：该目录中是一些本地化文件，用来支持不同的语言，如中文可以引用其中的easyui-lang-zh_CN.js
plugins和src：这两个目录中是支持JQueryEasyUI各种功能的js文件
themes：主题目录，目录中有三种主题，default、gray和metro，另外还有一个icons目录和icon.css，在页面使用引用icon.css即可。

使用jQueryEasyUI需要引用四个文件，两个css和两个js文件：

<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/icon.css" />
<script type="text/javascript" src="../Scripts/jqueryeasyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jqueryeasyui/jquery.easyui.min.js"></script>

如果需要使用本地化还需要引用：

<script type="text/javascript" src="../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>

jQueryEasyUI Grid的分页

根据官网的文档可以很容易的构建Grid，期初我没有引用本地化文件easyui-lang-zh_CN.js，列表的分页栏显示出来是英文的，在网上查阅后得知可以用代码的方式重新构建分页栏：

//设置分页控件 var p = $('#dg').datagrid('getPager');
$(p).pagination({
 pageSize: 10, //每页显示的记录条数，默认为10 
 pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表 beforePageText: '第', //页数文本框前显示的汉字 
 afterPageText: '页 共 {pages} 页',
 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
 /*onBeforeRefresh:function(){ $(this).pagination('loading'); 
 alert('before refresh'); $(this).pagination('loaded'); }*/
});

后来发现只需要引用本地化文件easyui-lang-zh_CN.js后分页栏就自动显示为中文了。引用本地化文件还可以解决日历控件格式的问题，所以如果是做中文系统建议还是在页面中引用本地化文件。

jQueryEasyUI控件的取值

使用JQuery取控件的值很简单，如下：

$("#CstName").val();
$("#TaskNo").val(),

如果要使用jQueryEasyUI的日历控件、下拉控件或其他的一些控件，给普通的input、select控件添加一个class即可：

<input id="FeedBackDate" name="FeedBackDate" class="easyui-datebox" maxlength="10"
 style="width: 150px;" />
<select id="IsKfCl" class="easyui-combobox" name="IsKfCl" style="width:150px;"> 
 <option value=""></option> 
 <option value="是">是</option> 
 <option value="否">否</option> 
</select>

现在取这些控件的值需要使用下面的方法：

$("#FeedBackDate").datebox("getValue");
$("#IsKfCl").combobox("getValue");

Grid ToolBar的两种方式

通常在Grid列表控件的上方会添加一些按钮如：新增、编辑、删除等，如下面效果：

在jQueryEasyUI中可以使用ToolBar来实现，ToolBar可以在DataGrid初始化时定义，如下：

JQueryEasyUI on 冯威的博客

在Asp.Net中使用jQueryEasyUI

前言

下载引用

jQueryEasyUI Grid的分页

jQueryEasyUI控件的取值

Grid ToolBar的两种方式