带ASP.NET 2005的AJAX网格
2.94/5 (25投票s)
2007年3月1日
12分钟阅读
97554
699
一个非常可定制的AJAX网格。提供英文和西班牙文版本
英文翻译
引言
在设计具有多个模块的内部网结构时，我遇到了“动态网格问题”。我真的需要一个可定制、易于应用和使用的网格，最重要的是，它要采用AJAX技术。
在网上、CodeProject和许多其他页面上寻找，我没有找到一个能满足我期望的。
我只发现了一些零碎的东西，这些东西经过适当组合，就构成了今天的“LeleGrid”。
链接
http://www.prototypejs.org
要求
添加方法
我创建这个新方法是为了在使用函数（toogle、show或hide）时避免“上下”效果。
它的用法是
invisible: function(type) {$(arguments[0]).style.visibility = arguments[1];
},
修改方法
我对其进行了修改，因为如果在MasterPages中使用网格，控件的ID将以以下形式呈现：ctl00_contentPagina + ControlName
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string'){
if (document.getElementById(element) != null)
element = document.getElementById(element);
else
element = document.getElementById("ctl00_contentPagina_"+element);
}
results.push(Element.extend(element));
}
return results.length < 2 ? results[0] : results;
}
操作 (Operation)
网格使用HttpHandler获取XML（通过其信息）或删除网格中的某些元素。
这两个文件是：DatosGrilla.ashx 和 EliminarFilaGrilla.ashx。
DatosGrilla.ashx 文件的XML格式如下
<Contenido>
<Cantidad></Cantidad> 返回的行数。
<Filas>
<Fila> 行 1
<Celda></Celda> 字段 1..
<Celda></Celda> 字段 2..
...
<Celda></Celda> 字段 N..
</Fila>
<Fila> 行 2
<Celda></Celda>
<Celda></Celda>
<Celda></Celda>
</Fila>
...
<Fila> 行 N
<Celda></Celda>
<Celda></Celda>
<Celda></Celda>
</Fila>
<Filas>
</Contenido>
在不同的示例中，您会发现它与SQL Express数据库交互，但它也可以与其他数据库交互。
代码
您会发现各种不同配置的示例。
在web.config中
<add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Desarrollo\NET\LeleGrid\App_Data\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
您必须根据ZIP文件的下载位置修改“AttachDbFilename”的路径。
在.aspx文件中我们必须有这个
在head部分
<script type="text/javascript" src="../JavaScripts/protoype.js"></script>
<script type="text/javascript" src="../JavaScripts/grillaV2.js"></script>
在body部分或内容部分
<CNC:Grilla runat="server" ID="grillaCategorias" NombreSector="COT" NombreGrilla="Categorias" NombreTabla="tblCategorias" />
强制参数是
重要
它们的ID必须是“grilla”+ NombreGrilla的形式。
可选参数是
OpcionesAvanzadas：是否具有高级选项。TRUE/FALSE。默认值TRUE
在表头中放置网格的表头。为每列分配的宽度是您自己的选择。
此外，如果希望通过特定列对表进行排序，则应将onclick事件添加到每个td。
OrdenarTabla 函数接收的参数分别是：列索引、表名和排序类型（0=数字，1=字符串，2=$）。
<table id="tblCategorias" class="grilla" cellspacing="0">
<thead>
<tr>
<td style="width: 90px; display: block;">选项</td>
<td style="cursor: pointer; width: 50%;" title="按名称排序" onclick="OrdenarTabla(1,'tblCategorias', 1);">名称</td>
<td style="cursor: pointer; width: 50%;" title="按翻译排序" onclick="OrdenarTabla(2,'tblCategorias', 1);">翻译</td>
<td style="width: 10px;">活动</td>
</tr>
</thead>
<tbody id="trFilasCategorias">
<tr>
<td colspan="4">未找到结果。</td>
</tr>
</tbody>
<tfoot id="trCargandoCategorias" style="display:none;">
<tr>
<td colspan="4" style="background-color:#fff;">
<CNC:Cargando ID="CargandoCategorias" runat="server" />
</td>
</tr>
</tfoot>
</table>
TBody的ID必须是：“trFilas”+ NombreGrilla。
在页脚中通常会添加一个使用“加载”控件的行。这只是一个图形细节，但看起来非常漂亮！一旦网格运行起来，您就会明白。哈！
<asp:HiddenField runat="server" ID="hidVuelveDeEdicion" />
<asp:HiddenField runat="server" ID="hidValorPagina" />
这两个隐藏字段用于当网格重定向到另一个页面，然后又从该页面返回到网格时。这些字段将确保网格以其先前的信息加载。
在.aspx.cs或类似文件中
protected void Page_Load(object sender, EventArgs e) {
if(!IsPostBack) {
CargarBusqueda();
Page.ClientScript.RegisterStartupScript(this.GetType(), "Load", "RecuperarBusqueda('COT','Categorias','tblCategorias', 10 ,true, true, true);",true);
grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("名称", "Nombre"));
grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("翻译", "Traduccion"));
}
grillaCategorias.ValorBusqueda.Focus();
}
private void CargarBusqueda() {
string valorPagina = Request.QueryString["valorPagina"];
string valorCampo = Request.QueryString["valorCampo"];
string valorBusqueda = Request.QueryString["valorBusqueda"];
if(string.IsNullOrEmpty(valorPagina) || string.IsNullOrEmpty(valorCampo) || string.IsNullOrEmpty(valorBusqueda)) {
hidVuelveDeEdicion.Value = "FALSE";
}
else {
hidVuelveDeEdicion.Value = "TRUE";
hidValorPagina.Value = valorPagina;
grillaCategorias.ValorBusqueda.Text = valorBusqueda;
grillaCategorias.ValoresBusqueda.SelectedValue = valorCampo;
}
}
在文件grillaV2.js中
它是网格的主文件。它可能包含全局变量。
var indiceColAnt = 0;
var classAnt;
var _imgPath = "../Imagenes/Grilla/"; 这是您可以修改的唯一变量。
var _tipoGrilla = null;
var _sector = null;
var _table = null;
var _opcionesBasicas = null;
var _opcionesAvanzadas = null;
var _paginaActual = null;
var _valorCantReg = null;
var _valorCampo = null;
var _valorBusqueda = null;
var _realizaPaginacion = null;
除了包含所有相关函数外，它还包含一个EjecutarAccion函数。
此函数用于网格的高级选项。
样式
我们可以将这些CSS放在主题中，或者直接放在.css文件中。
请记住更改图像的引用！
.grilla {
background:Window;
border:Solid 1px #c4bdb0;
color:WindowText;
font:Icon;
width:100%;
}
.grilla thead{
BACKGROUND: url(../../Imagenes/menuBg.gif) repeat-x;
color:black;
}
.grilla td {
padding:2px 5px;
}
.grilla thead td {
border:1px solid;
border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.grilla select {
font-family:Verdana;
font-size:7pt;
}
.descendente {/* 降序排序的列 */
font-weight:bold;
height:11px;
width:11px;
}
.ascendente{ /* 升序排序的列 */
font-weight:bold;
height:11px;
width:11px;
}
.AlternatingItemTemplate {/* 偶数行 */
background-color:#fff;
background-position:center center;
}
.ItemTemplate{/* 奇数行 */
background-color:#fff;
background-position:center center;
}
#cmbCantFilas{
font-family:Verdana;
font-size:8pt;
}
测试
西班牙文翻译
引言
在设计具有多个模块的内部网结构时，我遇到了动态网格的问题。
我需要一个高度可定制、易于应用和使用的网格，最重要的是，它要采用AJAX技术。
在网上、CodeProject和许多其他页面上寻找，我没有找到一个能满足我期望的。
我只发现了一些零碎的东西，这些东西汇集在一起，就构成了今天的“LeleGrid”。
有用链接
http://www.prototypejs.org
要求
1) 已安装SQL Server Express 2005。
2) 如今，网格需要Prototype库，因为我将其用于AJAX和DOM操作。
此外，它还有一个新方法和一个修改过的方法，我将在下面描述。
添加方法
我创建它以避免在使用函数（toogle、show或hide）时出现上下效果。
它的用法是
Element.invisible('nombrecontrol','visible') 或 Element.invisible('nombrecontrol','hidden')
invisible: function(type) {
$(arguments[0]).style.visibility = arguments[1];
},
修改方法
我对其进行了修改，因为如果我们在MasterPages中使用网格，控件的ID将以ctl00_contentPagina + NombreDelControl的形式呈现。
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string'){
if (document.getElementById(element) != null)
element = document.getElementById(element);
else
element = document.getElementById("ctl00_contentPagina_"+element);
}
results.push(Element.extend(element));
}
return results.length < 2 ? results[0] : results;
}
运作方式
网格使用HttpHandler获取包含数据的XML或删除网格中的某些元素。
这两个文件是：DatosGrilla.ashx 和 EliminarFilaGrilla.ashx。
DatosGrilla.ashx 文件的XML格式如下 <Contenido>
<Cantidad></Cantidad> 返回的行数。
<Filas>
<Fila> 行 1
<Celda></Celda> 字段 1..
<Celda></Celda> 字段 2..
...
<Celda></Celda> 字段 N..
</Fila>
<Fila> 行 2
<Celda></Celda>
<Celda></Celda>
<Celda></Celda>
</Fila>
...
<Fila> 行 N
<Celda></Celda>
<Celda></Celda>
<Celda></Celda>
</Fila>
<Filas>
</Contenido>
在示例中，您会发现它与SQL Express数据库交互，但它也可以与其他数据库交互。
代码
您会发现各种不同配置的示例。
在web.config中
<add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Desarrollo\NET\LeleGrid\App_Data\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
根据您下载ZIP文件的位置修改“AttachDbFilename”的路径。
在.aspx文件中我们必须有这个
在head中
<script type="text/javascript" src="../JavaScripts/protoype.js"></script>
<script type="text/javascript" src="../JavaScripts/grillaV2.js"></script>
在body或内容中
<CNC:Grilla runat="server" ID="grillaCategorias" NombreSector="COT" NombreGrilla="Categorias" NombreTabla="tblCategorias" />
此控件显示用于在网格中过滤数据的搜索字段。
它包含一个“字段”组合框，即用于搜索值的字段。
另一个是“值”，即值本身。
所需的强制参数是
NombreSector：正如文章引言中提到的，我需要一个用于具有多个模块/部分的内部网的网格。这个字段就是为此而设的。
NombreGrilla：网格的名称
NombreTabla：表的名称。
重要提示：这3个参数都不能相同。ID必须是“grilla”+ NombreGrilla的形式。
可选参数是
OpcionesAvanzadas：是否具有高级选项。TRUE/FALSE。默认值TRUE
OpcionesBasicas：是否具有基本选项。TRUE/FALSE。默认值TRUE
CantRegistros：每页显示的记录数量。默认值10
Oculto：是否显示搜索字段。TRUE/FALSE。默认值FALSE
Paginacion：是否具有分页功能。TRUE/FALSE。默认值TRUE
在表的thead中放置网格的表头。为每列分配的宽度是您自己的选择。
此外，如果希望能够按该列对表进行排序，则应将onclick事件添加到每个td。
OrdenarTabla 函数接收的参数分别是：列索引、表名和排序类型（0=数字，1=字符串，2=货币）。
<table id="tblCategorias" class="grilla" cellspacing="0">
<thead>
<tr>
<td style="width: 90px; display: block;">选项</td>
<td style="cursor: pointer; width: 50%;" title="按名称排序" onclick="OrdenarTabla(1,'tblCategorias', 1);">名称</td>
<td style="cursor: pointer; width: 50%;" title="按翻译排序" onclick="OrdenarTabla(2,'tblCategorias', 1);">翻译</td>
<td style="width: 10px;">活动</td>
</tr>
</thead>
<tbody id="trFilasCategorias">
<tr>
<td colspan="4">未找到结果。</td>
</tr>
</tbody>
<tfoot id="trCargandoCategorias" style="display:none;">
<tr>
<td colspan="4" style="background-color:#fff;">
<CNC:Cargando ID="CargandoCategorias" runat="server" />
</td>
</tr>
</tfoot>
</table>
重要提示：TBody的ID必须是“trFilas”+ NombreGrilla的形式。
TFoot的ID必须是“trCargando”+ NombreGrilla的形式。
加载控件的ID必须是“Cargando”+ NombreGrilla的形式。
在页脚中，通常会添加一行带有“加载”控件的行，这只是一个图形细节，但看起来非常漂亮！
当您看到网格运行时，您会更好地理解……哈！
<asp:HiddenField runat="server" ID="hidVuelveDeEdicion" />
<asp:HiddenField runat="server" ID="hidValorPagina" />
这两个隐藏字段用于当网格将您重定向到另一个页面，然后您又从该页面返回网格时，
网格会重新加载其原有的值。
在.aspx.cs或类似文件中
protected void Page_Load(object sender, EventArgs e) {
if(!IsPostBack) {
CargarBusqueda();
Page.ClientScript.RegisterStartupScript(this.GetType(), "Load", "RecuperarBusqueda('COT','Categorias','tblCategorias', 10 ,true, true, true);",true);
grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("名称", "Nombre"));
grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("翻译", "Traduccion"));
}
grillaCategorias.ValorBusqueda.Focus();
}
private void CargarBusqueda() {
string valorPagina = Request.QueryString["valorPagina"];
string valorCampo = Request.QueryString["valorCampo"];
string valorBusqueda = Request.QueryString["valorBusqueda"];
if(string.IsNullOrEmpty(valorPagina) || string.IsNullOrEmpty(valorCampo) || string.IsNullOrEmpty(valorBusqueda)) {
hidVuelveDeEdicion.Value = "FALSE";
}
else {
hidVuelveDeEdicion.Value = "TRUE";
hidValorPagina.Value = valorPagina;
grillaCategorias.ValorBusqueda.Text = valorBusqueda;
grillaCategorias.ValoresBusqueda.SelectedValue = valorCampo;
}
}
在grillaV2.js中
这是网格的主文件。
它包含的全局变量如下
var indiceColAnt = 0;
var classAnt;
var _imgPath = "../Imagenes/Grilla/"; 这是唯一需要修改的变量。它是图像文件夹的路径。
var _tipoGrilla = null;
var _sector = null;
var _table = null;
var _opcionesBasicas = null;
var _opcionesAvanzadas = null;
var _paginaActual = null;
var _valorCantReg = null;
var _valorCampo = null;
var _valorBusqueda = null;
var _realizaPaginacion = null;
除了包含所有相关函数外，它还包含一个名为EjecutarAccion的函数。
此函数用于网格的高级选项。
样式
我们可以将这些CSS放在主题中，或者直接放在.css文件中。
记住更改图像的引用。
.grilla {
background:Window;
border:Solid 1px #c4bdb0;
color:WindowText;
font:Icon;
width:100%;
}
.grilla thead{
BACKGROUND: url(../../Imagenes/menuBg.gif) repeat-x;
color:black;
}
.grilla td {
padding:2px 5px;
}
.grilla thead td {
border:1px solid;
border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.grilla select {
font-family:Verdana;
font-size:7pt;
}
.descendente {/* 降序排序的列 */
font-weight:bold;
height:11px;
width:11px;
}
.ascendente{ /* 升序排序的列 */
font-weight:bold;
height:11px;
width:11px;
}
.AlternatingItemTemplate {/* 偶数行 */
background-color:#fff;
background-position:center center;
}
.ItemTemplate{/* 奇数行 */
background-color:#fff;
background-position:center center;
}
#cmbCantFilas{
font-family:Verdana;
font-size:8pt;
}
测试
其在IE 6+和Mozilla 1.5+中的正常运行已得到验证。