jqGrid es una excelente grilla (grid) para mostrar y manipular datos en forma tabular. A mi juicio mucho más elegante y potente que el GridView de ASP.NET.
En este articulo veremos el código de ejemplo de implementación de un jqGrid con ASP.NET. Además de poder ver una demo en acción del Grid para jQuery, podremos descargarnos la solución completa.
Pero comentemos el problema que nos planteamos resolver.
jqGrid - ASP.NET, Ejemplo
Asumamos que tenemos una base de datos con una tabla Person, que contiene los datos de determinadas personas y queremos mostrar dicha información en una pagina web, tal como se muestra en la figura:
Para ello decidimos usar el componente jqGrid de jQuery, entre otras cosas porque:
- Es una grilla (grid) vistosa y elegante.
- Nos proporciona gran funcionalidad en el manejo y manipulación de los datos.
- Al usar AJAX y JSON hace más amigable la navegación del cliente.
- Nos permite paginado, ordenación, selección múltiple, contraer todo el grid, etc.
Pero como de costumbre vallamos al código que debemos implementar, y analicémoslo paso a paso.
Nota: Como el código es bastante amplio, al final hemos dejado un enlace donde podrás descargarte la solución demo (de ejemplo) competa, así como un BackUP de la base de datos SQL.
jqGrid – ASP.NET - HTML
1. Veamos el código del fichero jqGridEjemplo.aspx y después lo comentaremos:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqGridEjemplo.aspx.cs" Inherits="JqGridEjemplo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQGrid con JSON Ejemplo Básico</title>
<link type="text/css" rel="stylesheet"
href="css/cupertino/jquery-ui- 1.7.2.custom.css" />
<link type="text/css" rel="stylesheet"
href="css/ui.jqgrid.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript"
src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<script type="text/javascript" src="js/grid.locale-sp.js" ></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="js/grid.base.js" ></script>
<script type="text/javascript" src="js/grid.common.js" ></script>
<script type="text/javascript" src="js/grid.formedit.js" ></script>
<script type="text/javascript" src="js/jquery.fmatter.js" ></script>
<script type="text/javascript" src="js/json2.js" ></script>
<script type = "text/javascript">
jQuery(document).ready(function()
{
$("#grid").jqGrid(
{
datatype: function()
{
$.ajax(
{
url: "jqGridEjemplo.aspx/GetPersons", //PageMethod
data:
"{'pPageSize':'" + $('#grid').getGridParam("rowNum") +
"','pCurrentPage':'" + $('#grid').getGridParam("page") +
"','pSortColumn':'" + $('#grid').getGridParam("sortname") +
"','pSortOrder':'" + $('#grid').getGridParam("sortorder")
+ "'}", //Parametros de entrada del PageMethod
dataType: "json",
type: "post",
contentType: "application/json; charset=utf-8",
complete: function(jsondata, stat)
{
if (stat == "success")
jQuery("#grid")[0].addJSONData(JSON.parse
(jsondata.responseText).d);
else
alert(JSON.parse(jsondata.responseText).Message);
}
});
},
jsonReader : //jsonReader –> JQGridJSonResponse data.
{
root: "Items",
page: "CurrentPage",
total: "PageCount",
records: "RecordCount",
repeatitems: true,
cell: "Row",
id: "ID"
},
colModel: //Columns
[
{ index: 'Name', width: 200, align: 'Left',
label: 'Nombre' },
{ index: 'LastName', width: 300, align: 'Left',
label: 'Apellidos' },
{ index: 'BirthDate', width: 200, align: 'Center',
label: 'Fecha Nacimiento' },
{ index: 'Weight', width: 100, align: 'center',
label: 'Peso (Kg)' }
],
pager: "#pager", //Pager.
loadtext: 'Cargando datos...',
recordtext: "{0} - {1} de {2} elementos",
emptyrecords: 'No hay resultados',
pgtext : 'Pág: {0} de {1}', //Paging input control text format.
rowNum: "10", // PageSize.
rowList: [10,20,30], //Variable PageSize DropDownList.
viewrecords: true, //Show the RecordCount in the pager.
multiselect: true,
sortname: "Name", //Default SortColumn
sortorder: "asc", //Default SortOrder.
width: "760",
height: "230",
caption: "Personas"
}).navGrid("#pager", {edit:false, add:false, search:false,
del:false});
});
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
</html>
En el código anterior, hemos definido el jqGrid, o sea, la tabla de datos de personas.
Dentro de la etiqueta body encontraras solo 2 elementos; table (grid) que será donde se pintaran los valores de las personas en formato tabular, y la etiqueta div (pager) que será donde aparecerán los datos que encontramos en el pie de la tabla (actualizar, paginación e información general).
En el head encontramos 2 hojas de estilos y los javascript necesarios para dotar al grid de la funcionalidad necesaria, pero por esto no nos preocuparemos ahora, más adelante les indicaremos donde nos podemos descargar estos ficheros.
En el head encontramos también la función $("#grid").jqGrid() que es la encargada de configurar todo el comportamiento del jqGrid o grilla. Dentro de esta función definiremos las propiedades, métodos y eventos, en nuestro ejemplo hemos definido algunas funciones que son muy intuitivas y generales. Una de estas propiedades es datatype, a esta le asociaremos la función de la llamada AJAX que nos devolverá la lista de personas a mostrar en formato JSON.
jqGrid – ASP.NET – C#
La carga de los datos a mostrar, se hace de forma parcial vía AJAX, o sea, cada vez que el usuario pagine, ordene o haga cualquier acción que necesite recargar nuevos datos, se llamará a la función $.ajax({ url: "jqGridEjemplo.aspx/GetPersons", data:… en nuestro caso es un WebMethod, también podría ser un WS o WCF, pero veamos ahora el code-behind en C# que invocaremos vía AJAX. Este método recibe 4 parámetros que le pasaremos en el parámetro data que vimos anteriormente (pPageSize, pCurrentPage, pSortColumn, pSortOrder). Veamos el código en C#:
public partial class JqGridEjemplo : Page
{
protected void Page_Load(object sender, EventArgs e) {}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static JQGridJsonResponse GetPersons(int pPageSize,
int pCurrentPage, string pSortColumn, string pSortOrder)
{
return GetPersonasJSon(pPageSize, pCurrentPage, pSortColumn,
pSortOrder);
}
internal static JQGridJsonResponse GetPersonasJSon(int pPageSize,
int pPageNumber, string pSortColumn, string pSortOrder)
{
SqlConnection sqlCon = new SqlConnection ConfigurationManager.
ConnectionStrings["DataConnection"].ConnectionString);
SqlCommand command = new SqlCommand("GetPersons", sqlCon);
command.CommandType = CommandType.StoredProcedure;
command.Parameters.Add("PageSize", SqlDbType.Int).Value = pPageSize;
command.Parameters.Add("CurrentPage", SqlDbType.Int).Value =
pPageNumber;
command.Parameters.Add("SortColumn", SqlDbType.VarChar, 20).Value =
pSortColumn;
command.Parameters.Add("SortOrder", SqlDbType.VarChar, 4).Value =
pSortOrder;
DataSet dataSet = new DataSet();
SqlDataAdapter dataAdapter = new SqlDataAdapter(command);
dataAdapter.Fill(dataSet);
var persons = new List<Person>();
foreach (DataRow row in dataSet.Tables[1].Rows)
{
Person person = new Person
{
ID = Convert.ToInt32(row["ID"]),
Name = row["Name"].ToString(),
LastName = row["LastName"].ToString(),
BirthDate = Convert.ToDateTime(row["BirthDate"]),
Weight = Convert.ToSingle(row["Weight"])
};
persons.Add(person);
}
return new JQGridJsonResponse(Convert.ToInt32(dataSet.Tables[0].
Rows[0]["PageCount"]), Convert.ToInt32(dataSet.
Tables[0].Rows[0]["CurrentPage"]),
Convert.ToInt32(dataSet.Tables[0].Rows[0]["RecordCount"]),
persons);
}
}
En el código anterior, vemos la definición del WebMethod GetPersons, el cual devolverá solo los registros o personas que se mostraran en el jqGrid, estos datos serán devueltos en formato JSON. Si analizamos el código en profundidad, veremos que se hace una llamada a un procedimiento almacenado SQL Server, que devolverá 2 conjuntos de datos, uno con el subconjunto de personas a mostrar y otro con el total de registros de la tabla personas. Pero veamos el procedimiento almacenado:
ALTER procedure [dbo].[GetPersons]
@PageSize int ,
@CurrentPage int ,
@SortColumn varchar(20),
@SortOrder varchar(4)
as
declare @RecordCount int
declare @PageCount int
declare @PageIndex int
Select @RecordCount = count(ID)
from Person
set @PageCount = Ceiling(cast (@RecordCount as float) / cast (@PageSize as float))
if (@CurrentPage > @PageCount) set @CurrentPage = @PageCount
set @PageIndex = @CurrentPage - 1
Select RecordCount = @RecordCount, PageCount = @PageCount, CurrentPage = @CurrentPage
declare @Query varchar(300)
set @Query =
'Select ID, Name, LastName, BirthDate, Weight,
RowNumber = ROW_NUMBER() OVER (ORDER BY ' + @SortColumn + ' ' + @SortOrder + ')
from Person'
set @Query =
'Select ID, Name, LastName, BirthDate, Weight
from (' + @Query + ' )as result
where RowNumber BETWEEN ' + cast(@PageSize * @PageIndex + 1 as varchar(10)) + '
AND ' + cast(@PageSize * (@PageIndex + 1) as varchar(10))
Exec (@Query)
Y con esto y poco más ya tenemos implementado nuestro grid de jQuery (jqGrid), una excelente rejilla de datos que no te dejará indiferente.
Descargar la solución completa de ejemplo de jqGrid en ASP.NET C#.
Para ver otros ejemplos de jqGrid en la página oficial, pinche aquí.
Nota: Existe ya desarrollado un componente jqGrid especial para ASP.NET con un modelo de programación API muy similar al usado en nuestros desarrollos ASP.NET cotidianos, pero la licencia de este otro componente está entre $300.00 y $450.00 (demo), por lo que mi consejo es que usen el jqGrid estándar que hemos explicado aquí que es GRAAAATISSSSSS.
Artículos relacionados:
Entradas
