Paginado grid; obtener valores del control <A/>

Arkhel · #1 (**permalink**) 06/12/2006, 23:35

Hola

Cómo obtengo el valor de una liga desde javascript, este es el escenario:

en el html tengo:

<HTML>
<BODY>
<input id="Button1" style="position: absolute; left: 211px; top: 311px;" type="button" value="Buscar" onclick="CasoFunction('CasoProcess', 'ConsultaCaso')"/>

<a id="P1" onclick="memoriaG(1)" ></a>
<a id="P2" onclick="memoriaG(2)" ></a>
</BODY>
</HTML>

en un archivo js tengo lo siguiente:

CasoFunction()
{
...
imprimirPaginado()
}

function imprimirPaginado()
{

/****************Paginado************************** *****/
var count=-1;
var contadorPagina=0;
var paginado = req.responseXML.getElementsByTagName("grid");

for (var i=0;i<paginado.length;i++)
count=getElementTextNS("", "Paginado", paginado[i], 0);

var arrPagina =document.getElementsByTagName('a');

for(var z=0;z<arrPagina.length;z++)
{ if (Mid(arrPagina[z].id,1,8)=='Paginado')
{
if (contadorPagina < count)
arrPagina[z].innerText = (contadorPagina+1);

contadorPagina = contadorPagina+1;
}

}

}

function memoriaG(pagina)
{

limpiarGrid();
imprimirPaginado();
var items = req.responseXML.getElementsByTagName("objeto"+pagi na);
.....
}

De inicio se presiona el boton buscar y se llena un grid, se escribe en las ligas numeros que representan las paginas del grid, al dar click en una liga manda a llamar a la funcion memoriaG(pagina) dandole el numero de pagina como parametro, y este manda a llamar un xml para traer las filas de dicho conjunto.

Aqui le fijo los parametros onclick="memoriaG(1)"; onclick="memoriaG(2)", quiero saber como hago para mandarle el valor que tiene la liga dinamicaonclick="memoriaG(this.value)" o algo parecido, o dentro de la funcion memoriaG() algo para saber que control fue quien dio el click y asi poder traer el valor que tiene.

Tambien si me pueden dar algunos tips para trabajar con el paginado de los grids.
Saludos

Arkhel · #2 (**permalink**) 12/12/2006, 23:12

Dado que no se vio respuesta, la semana pasada me decidi al hacerlo y no esperar la respuesta, me tomo dos horas con mas maña que conocimiento pero bueno, se los dejo, disculpen si no explico mucho pero he estado con mucho trabajo y en esta semana tengo examenes.
<td>
<a id="Anterior" onclick="nuevoConjunto(0)" class="colorLiga"></a> 
<a id="Paginado1" class="colorLiga"></a> 
<a id="Paginado2" class="colorLiga"></a> 
<a id="Paginado3" class="colorLiga"></a> 
<a id="Paginado4" class="colorLiga"></a> 
<a id="Paginado5" class="colorLiga"></a> 
<a id="Siguiente" onclick="nuevoConjunto(1)" class="colorLiga" ></a>
</td>

en el script:

function memoriaGrid(pagina, obtenerConjuntoActivo)
{

limpiarGrid();
imprimirPaginado(obtenerConjuntoActivo);

var items = req.responseXML.getElementsByTagName("objeto"+pagi na);
......

}

function nuevoConjunto(moverPagina)

{
if (moverPagina==1)
{
var obtenerConjuntoActivo =
Number(document.getElementById("Paginado1").getAtt ribute("name")) + 4;
memoriaGrid(obtenerConjuntoActivo+1,obtenerConjunt oActivo);
}
if (moverPagina==0)
{
var obtenerConjuntoActivo =
Number(document.getElementById("Paginado1").getAtt ribute("name")) - 6;
memoriaGrid(obtenerConjuntoActivo+1,obtenerConjunt oActivo);
}

}

function eventAdder(objAttrib,handler,addFunction){

if ((!document.all)&&(document.getElementById)){

objAttrib.setAttribute(handler,addFunction);
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
objAttrib[handler]=new Function(addFunction);

}
}

function imprimirPaginado(conjunto)
{

/**********************Paginado******************** ***********/
//Obtiene cuantas filas fueron encontradas en la consulta
var count=-1;

//Representa el numero a mostrar en el paginado
var contadorPagina=conjunto;

var paginado = req.responseXML.getElementsByTagName("grid");

//El numero de conjuntos de paginas mostradas
// Ejemplo (< 1 2 3 4 5...> ; <6 7>) = 2
var conjuntoActivo;
for (var i=0;i<paginado.length;i++)
count=getElementTextNS("", "Paginado", paginado[i], 0);

var arrPagina =document.getElementsByTagName('a');

for(var z=0;z<arrPagina.length;z++)
{
if (Mid(arrPagina[z].id,1,8)=='Paginado')
{
if (contadorPagina < count)
{
arrPagina[z].innerText = (contadorPagina+1);
arrPagina[z].name = (contadorPagina+1);
eventAdder(arrPagina[z],"onclick","memoriaGrid(" + (contadorPagina+1) + "," + (conjunto) + ")");

}

contadorPagina = contadorPagina+1;

}
}

if ((conjunto+5) < count)
{
// MostrarFilas('Siguiente');
document.getElementById("Siguiente").innerText = "...>";

if ((conjunto) > 4)
//MostrarFilas('Anterior');
document.getElementById("Anterior").innerText = "<...";

else
// OcultarFilas('Anterior');
document.getElementById("Anterior").innerText = "";
}
else
{
if ((conjunto) > 4)
// MostrarFilas('Anterior');

document.getElementById("Anterior").innerText = "<...";

document.getElementById("Siguiente").innerText = "";
}

}

function limpiarGrid()
{
/************************Limpiar Grid*********************/
var arrA =document.getElementsByTagName('a');

for(var z=0;z<arrA.length;z++)
{
if (Mid(arrA[z].id,1,4)=='Liga' || Mid(arrA[z].id,1,8)=='Paginado' || Mid(arrA[z].id,1,8)=='Anterior' || Mid(arrA[z].id,1,9)=='Siguiente')
arrA[z].innerText = "";

}
var arrTd =document.getElementsByTagName('TD');
for(var z=0;z<arrTd.length;z++)
{
if (Mid(arrTd[z].id,1,3)=='Cld' && Mid(arrTd[z].id,1,9)!='CldNombre' && Mid(arrTd[z].id,1,8)!='Paginado')
arrTd[z].innerText = "";

}

var arrTr =document.getElementsByTagName('TR');
for(var z=0;z<arrTr.length;z++)
{
if (Mid(arrTr[z].id,1,4)=='Fila')
OcultarFilas(arrTr[z].id);
}

}

Trate de identarlo, pero es un poco dificil aqui, haber como se ve, haber si tienen comentarios
Saludos

Marckk_ · #3 (**permalink**) 03/01/2007, 09:58

tienes este ejemplo funcionando en algun lado ?

Arkhel · #4 (**permalink**) 05/01/2007, 11:23

Asi es, si quieres puedo exponer el ejemplo a modo de que solo lo corras. pero en este momento que estoy escribiendo no tengo el codigo a la mano, asi que en el momento en que pueda lo subo.

Marckk_ · #5 (**permalink**) 04/02/2007, 02:32

Cita:

Iniciado por Arkhel

Asi es, si quieres puedo exponer el ejemplo a modo de que solo lo corras. pero en este momento que estoy escribiendo no tengo el codigo a la mano, asi que en el momento en que pueda lo subo.

Ya entramos en Febrero seria bueno ver el avance xD ..

Saludos desde Chile !!!

Arkhel · #6 (**permalink**) 16/02/2007, 12:11

ok, hice de uno de ejemplo, esta en vb .net 2005 y sql server.

Se necesita
3 paginas, una para consultar, otra para generar xml y traer datos y otra de pilon ir a un lado cuando le das click a un dato del grid.

2 Jscript, solo para dividirlo, lo que pasa es que yo pongo uno en la master para las funciones comunes, por cierto con esto tuve una duda sobres si hacer esto o no, la pregunta ha de andar por ahi.

1 Css, para darle color al grid.

Pagina1: Inicio.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Inicio.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html Lo que genera el visual politica de foros del web ">

<html xmlns="politica de foros del web " >
<head runat="server">
<title>Página sin título</title>
<script src=JScript1.js type="text/javascript" > </script>
<script src=JScript2.js type="text/javascript" > </script>
<LINK href="Estilo.css" type="text/css" rel="StyleSheet">
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="ButBuscar" value="Buscar" id="ButBuscar" class="button" style="width:50px;"
onclick="CasoFunction('CasoProcess', 'ConsultaCaso')" />
<div> <DIV style="OVERFLOW: auto; WIDTH: 735px; HEIGHT: 289px; text-align:left;">

<table cellspacing="1" cellpadding="0" border=0 name="TblCaso" id="TblCaso" width="100%">
<tr>
<td>
<a id="Anterior" onclick="nuevoConjunto(0)" class="colorLiga"></a> 
<a id="Paginado1" class="colorLiga"></a> 
<a id="Paginado2" class="colorLiga"></a> 
<a id="Paginado3" class="colorLiga"></a> 
<a id="Paginado4" class="colorLiga"></a> 
<a id="Paginado5" class="colorLiga"></a> 
<a id="Siguiente" onclick="nuevoConjunto(1)" class="colorLiga" ></a>

</td>
</tr>
<TR name="Fila" class="visibleFila" id="Fila" >
<TD Class="tittabla">
<input type="checkbox" name="CheckAll" id="CheckAll" onclick="SelectId(this, 0,-2)" value="checkbox">
</TD>
<TD Class="tittabla">Nombre</TD>
<TD Class="tittabla">Funcionalidad</TD>
<TD Class="tittabla">Fecha Captura</TD>
<TD Class="tittabla">Responsable</TD>
<TD Class="tittabla">RF</TD>
<TD Class="tittabla">Prioridad</TD>
</TR>
<TR name="Fila1" class="visibleFila" id="Fila1" >
<TD Class="checkboxGrid">
<input type="checkbox" name="Check1" id="ctl00_ContentPlaceHolder1_Checks1" value="checkbox"></TD>
<TD Class="Grid" id="CldNombre0">
<a id="Liga0" class="colorLiga" onclick="link0()"></a>
</TD>
<TD Class="Grid" id="CldFuncionalidad0"> </TD>
<TD Class="Grid" id="CldFechaCaptura0"> </TD>
<TD Class="Grid" id="CldResponsable0"> </TD>
<TD Class="Grid" id="CldRF0"> </TD>
<TD Class="Grid" id="CldPrioridad0"> </TD>
</TR>
<TR name="Fila2" class="visibleFila" id="Fila2" >
<TD Class="checkboxGrid2" >
<input type="checkbox" name="Check2" id="ctl00_ContentPlaceHolder1_Checks2" value="checkbox">
</TD>
<TD Class="Grid2" id="CldNombre1">
<a id="Liga1" class="colorLiga" onclick="link1()"></a>
</TD>
<TD Class="Grid2" id="CldFuncionalidad1"></TD>
<TD Class="Grid2" id="CldFechaCaptura1"></TD>
<TD Class="Grid2" id="CldResponsable1"></TD>
<TD Class="Grid2" id="CldRF1"></TD>
<TD Class="Grid2" id="CldPrioridad1"></TD>
</TR>
<TR name="Fila3" class="visibleFila" id="Fila3" >
<TD Class="checkboxGrid" >
<input type="checkbox" name="Check3" id="ctl00_ContentPlaceHolder1_Checks3" value="checkbox">
</td>
<TD Class="Grid" id="CldNombre2">
<a id="Liga2" class="colorLiga" onclick="link2()"></a>
</TD>
<TD Class="Grid" id="CldFuncionalidad2"></TD>
<TD Class="Grid" id="CldFechaCaptura2"></TD>
<TD Class="Grid" id="CldResponsable2"></TD>
<TD Class="Grid" id="CldRF2"></TD>
<TD Class="Grid" id="CldPrioridad2"></TD>
</TR>
<TR name="Fila4" class="visibleFila" id="Fila4" >
<TD Class="checkboxGrid2" >
<input type="checkbox" name="Check4" id="ctl00_ContentPlaceHolder1_Checks4" value="checkbox">
</TD>
<TD Class="Grid2" id="CldNombre3">
<a id="Liga3" class="colorLiga" onclick="link3()"></a>
</TD>
<TD Class="Grid2" id="CldFuncionalidad3"></TD>
<TD Class="Grid2" id="CldFechaCaptura3"></TD>
<TD Class="Grid2" id="CldResponsable3"></TD>
<TD Class="Grid2" id="CldRF3"></TD>
<TD Class="Grid2" id="CldPrioridad3"></TD>
</TR>
<TR name="Fila5" class="visibleFila" id="Fila5" >
<td ID="TableCell8" Class="checkboxGrid" >
<input type="checkbox" name="Check5" id="ctl00_ContentPlaceHolder1_Checks5" value="checkbox">
</td>
<TD Class="Grid" id="CldNombre4">
<a id="Liga4" class="colorLiga" onclick="link4()"></a>
</TD>
<TD Class="Grid" id="CldFuncionalidad4"></TD>
<TD Class="Grid" id="CldFechaCaptura4"></TD>
<TD Class="Grid" id="CldResponsable4"></TD>
<TD Class="Grid" id="CldRF4"></TD>
<TD Class="Grid" id="CldPrioridad4"></TD>
</TR>
<TR name="Fila6" class="visibleFila" id="Fila6" >
<TD Class="checkboxGrid2" >
<input type="checkbox" name="Check6" id="ctl00_ContentPlaceHolder1_Checks6" value="checkbox">
</td>
<TD Class="Grid2" id="CldNombre5">
<a id="Liga5" class="colorLiga" onclick="link5()"></a>
</TD>
<TD Class="Grid2" id="CldFuncionalidad5"></TD>
<TD Class="Grid2" id="CldFechaCaptura5"></TD>
<TD Class="Grid2" id="CldResponsable5"></TD>
<TD Class="Grid2" id="CldRF5"></TD>
<TD Class="Grid2" id="CldPrioridad5"></TD>
</TR>
<TR name="Fila7" class="visibleFila" id="Fila7" >
<TD ID="TableCell22" Class="checkboxGrid">
<input type="checkbox" name="Check7" id="ctl00_ContentPlaceHolder1_Checks7" value="checkbox">
</td>
<TD Class="Grid" id="CldNombre6">
<a id="Liga6" class="colorLiga" onclick="link6()"></a>
</TD>
<TD Class="Grid" id="CldFuncionalidad6"></TD>
<TD Class="Grid" id="CldFechaCaptura6"></TD>
<TD Class="Grid" id="CldResponsable6"></TD>
<TD Class="Grid" id="CldRF6"></TD>
<TD Class="Grid" id="CldPrioridad6"></TD>
</TR>
<TR name="Fila8" class="visibleFila" id="Fila8" >
<TD Class="checkboxGrid2" >
<input type="checkbox" name="Check8" id="ctl00_ContentPlaceHolder1_Checks8" value="checkbox">
</td>
<TD Class="Grid2" id="CldNombre7">
<a id="Liga7" class="colorLiga" onclick="link7()"></a>
</TD>
<TD Class="Grid2" id="CldFuncionalidad7"></TD>
<TD Class="Grid2" id="CldFechaCaptura7"></TD>
<TD Class="Grid2" id="CldResponsable7"></TD>
<TD Class="Grid2" id="CldRF7"></TD>
<TD Class="Grid2" id="CldPrioridad7"></TD>
</TR>
<TR name="Fila9" class="visibleFila" id="Fila9" >
<td Class="checkboxGrid">
<input type="checkbox" name="Check9" id="ctl00_ContentPlaceHolder1_Checks9" value="checkbox">
</td>
<TD Class="Grid" id="CldNombre8">
<a id="Liga8" class="colorLiga" onclick="link8()"></a>
</TD>
<TD Class="Grid" id="CldFuncionalidad8"></TD>
<TD Class="Grid" id="CldFechaCaptura8"></TD>
<TD Class="Grid" id="CldResponsable8"></TD>
<TD Class="Grid" id="CldRF8"></TD>
<TD Class="Grid" id="CldPrioridad8"></TD>
</TR>
<TR name="Fila10" class="visibleFila" id ="Fila10" >
<TD Class="checkboxGrid2">
<input type="checkbox" name="Check10" id="ctl00_ContentPlaceHolder1_Checks10" value="checkbox">
</td>
<TD Class="Grid2" id="CldNombre9">
<a id="Liga9" class="colorLiga" onclick="link9()"></a>
</TD>
<TD Class="Grid2" id="CldFuncionalidad9"></TD>
<TD Class="Grid2" id="CldFechaCaptura9"></TD>
<TD Class="Grid2" id="CldResponsable9"></TD>
<TD Class="Grid2" id="CldRF9"></TD>
<TD Class="Grid2" id="CldPrioridad9"></TD>
</TR>
</Table>
</DIV>

</div>
</form>
</body>
</html>

Arkhel · #7 (**permalink**) 16/02/2007, 12:17

pagina 2: pagina.aspx, lo hice en el code behind, solamente se necesita el evento load

Imports System.Data
Imports System.Data.SqlClient
Partial Class pagina
Inherits System.Web.UI.Page
Dim EnviarXml As String
'Dim CallClass As New SACS.QAConnection
Dim Lectura As SqlDataReader
'Cambie la p por una R
'en el ejemplo tengo por nombre del proyecto website4
Dim url As String = "ConcedidohttR://localhost:2926/WebSite4/"
'Dim url As String = "ConcedidohttR://amiranda/qacenter/"
Dim MensajeExitoso As String = "Se agregó satisfactoriamente"
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
Acciones()
End If
End Sub
#Region "Acciones"
Sub Acciones()
Dim AccionProceso As String = Request.Params("Proceso")
Dim AccionFuncion As String = Request.Params("Funcion")
Response.Clear()
Response.ContentType = "text/xml"
Select Case AccionProceso
Case "CasoProcess"
Select Case AccionFuncion
Case "AltaCaso"
Case "ConsultaCaso"
EnviarXml = BuscarCaso()
Case "BuscarNombreCaso"
Case "BuscarDescripcionCaso"
Case "BajaCaso"
Case "CambioCaso"
End Select
End Select
Response.Write(EnviarXml)
Response.End()
End Sub
#End Region

#Region "Funciones Caso"
Function BuscarCaso() As String
Try
Dim count, i As Integer
Dim Conn As New SqlConnection(System.Configuration.ConfigurationMa nager.AppSettings("ConnectionInfo"))
Dim com As SqlCommand
Conn.Open()
com = New SqlCommand("Select campo1, campo2, campo3, campo4, campo5, campo6, campo7 from tabla", Conn)
com.CommandType = CommandType.Text
Lectura = com.ExecuteReader()
i = 0
count = 1
EnviarXml = "<?xml version=""1.0"" encoding=""utf-8"" ?> "
EnviarXml += "<datos>"
While Lectura.Read
i += 1
If i > 10 Then
i = 1
count += 1
End If
EnviarXml += " <objeto" & count & "> "
EnviarXml += " <Campo1>" & Trim(Lectura("Campo1")) & "</Campo1> "
EnviarXml += " <Campo2>" & Trim(Lectura("Campo2")) & "</Campo2> "
EnviarXml += " <Campo3>" & Trim(Lectura("Campo3")) & "</Campo3> "
EnviarXml += " <Campo4>" & Trim(Lectura("Campo4")) & "</Campo4> "
EnviarXml += " <Campo5>" & Trim(Lectura("Campo5")) & "</Campo5> "
EnviarXml += " <Campo6>" & Trim(Lectura("Campo6")) & "</Campo6> "
EnviarXml += " <Campo7>" & Trim(Lectura("Campo7")) & "</Campo7> "
EnviarXml += " </objeto" & count & "> "
End While
EnviarXml += " <grid> "
EnviarXml += " <Paginado>" & count & "</Paginado> "
EnviarXml += " </grid> "

EnviarXml += "</datos>"
If Lectura.HasRows = True Then
Lectura.Close()
Else
EnviarXml = MensajeXml(False, "No se encontraron registros.")
End If

Catch ex As Exception
EnviarXml = MensajeXml(False, ex.Message)
End Try
Return EnviarXml
End Function
#End Region

#Region "Mensajes"
Function MensajeXml(ByVal fv As Boolean, ByVal MensajeSistema As String) As String

MensajeSistema = MensajeSistema

EnviarXml = ""
EnviarXml = "<?xml version=""1.0"" encoding=""utf-8"" ?> "
EnviarXml += " <mensajes> "
EnviarXml += " <mensaje> "
EnviarXml += " <msgbox>" & MensajeSistema & "</msgbox> "
EnviarXml += " </mensaje> "
EnviarXml += " </mensajes> "
Return EnviarXml
End Function
#End Region

End Class

Arkhel · #8 (**permalink**) 16/02/2007, 12:21

Script 1: Jscript2.js
// JScript File
var isIE = false;
var controles;
var req;
//CAMBIAR LA R POR UNA P
var url = "httR://localhost:2926/WebSite4/pagina.aspx"
//var url = "httR://amiranda/qacenter/Ajax/QAProcess.aspx"
//var prefijo = "ctl00_ContentPlaceHolder1_";
var precision = 27;//length del ctl00_ContentPlaceHolder1_ esto lo agrega el visual al control
//Si le das view source y te fijas en el nombre del control y no lo tiene "ctl00_ContentPlaceHolder1_"
//dale a la variable precision 0
//var consultaCaso = "../Control de Consultado/ConsultaCaso.aspx";
function Proceso(datos, execute, control) {
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = Mensajes(objeto);
req.open("POST", url, true);
req.send(datos);
}
else if (window.ActiveXObject)
{
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
if (execute=="nonquery")
{
// if (control=="IniciarSesion")
//{

// req.onreadystatechange = IniciarSesion;
//}
//else
//{

req.onreadystatechange = Mensajes;
// }
}
if (execute=="reader")
{
controles = control;
req.onreadystatechange = TraerDatos;
}

req.open("POST", url, true);

req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

req.send(datos);

}
}
}
function Mensajes() {

if (req.readyState == 4) {

if (req.status == 200) {

var items = req.responseXML.getElementsByTagName("mensaje");
for (var i = 0; i < items.length; i++)
{
messages=getElementTextNS("", "msgbox", items[i], 0);

if (messages=="Se agregó satisfactoriamente")
{
alert(messages);
}
else
{
if (Mid(String(messages),1,9)=="Concedido")
{

window.location=Mid(String(messages),10,0)
}else
{
alert("El usuario o el password es incorrecto.");
//document.getElementById("HLinkRecuperar").innerTex t = "Olvido su contraseña. Haga click aqui para recuperla.";
}
}
}
} else {
alert("Problema al intentar obtener el documento XML:\n" + req.statusText);

}
}
}

function TraerDatos() {
if (req.readyState == 4) {
if (req.status == 200) {
if (controles =="DataGrid") {
var itemss = req.responseXML.getElementsByTagName("mensaje");

for (var i = 0; i < itemss.length; i++)
{
messages=getElementTextNS("", "msgbox", itemss[i], 0);
alert(messages);
}
memoriaGrid(1,0);
}
else {
alert("NO ES GRID")
}
}
else {
alert("Problema al intentar obtener el documento XML:\n" + req.statusText);
}
}
}
// Obtiene el texto de un elemento de un documento XML
// incluyendo elementos usando espacios de nombre (namespaces)
function getElementTextNS(prefix, local, parentElem, index) {
var result = "";
if (prefix && isIE) {
// IE/Windows way of handling namespaces
result = parentElem.getElementsByTagName(prefix + ":" + local)[index];
} else {
// the namespace versions of this method
// (getElementsByTagNameNS()) operate
// differently in Safari and Mozilla, but both
// return value with just local name, provided
// there aren't conflicts with non-namespace element
// names
result = parentElem.getElementsByTagName(local)[index];
}
if (result) {
// get text, accounting for possible
// whitespace (carriage return) text nodes
if (result.childNodes.length > 1) {
return result.childNodes[1].nodeValue;
} else {
return result.firstChild.nodeValue;
}
} else {
return "n/a";
}
}
/************************************************** *****/

function Agregarmodulo(objetos, value, content) {

/*if (objetos.type=="text")
{
objetos.value = content;
}
else
{*/
var opt;
opt = document.createElement("option");
opt.value = value;
opt.appendChild(content);
objetos.appendChild(opt);
//}

}
function Mid(s, n, c){
// Devuelve una cadena desde la posición n, con c caracteres
// Si c = 0 devolver toda la cadena desde la posición n

var numargs=Mid.arguments.length;

// Si sólo se pasan los dos primeros argumentos
if(numargs<3)
c=s.length-n+1;

if(c<1)
c=s.length-n+1;
if(n+c >s.length)
c=s.length-n+1;
if(n>s.length)
return "";

return s.substring(n-1,n+c-1);
}
function SelectAll(obj, th){
var chk;

if (obj!=null){

chk = document.getElementById(th);
if (chk!=null){chk.checked=obj.checked;}
chk = document.getElementById(th);
if (chk!=null){chk.checked=obj.checked;}
chk = document.getElementById(th);
if (chk!=null){chk.checked=obj.checked;}
chk = document.getElementById(th);
if (chk!=null){chk.checked=obj.checked;}
}
}
function UnSelectAll(todos, ids)
{
var arr =document.getElementsByTagName('input');
for(i=0;i<arr.length;i++)
{
if(arr[i].type=="checkbox")
{
if(Mid(arr[i].id, 12, 0)=="todos" + String(todos) + String(ids))
arr[i].checked = false;
}

}
}
function SelectId(obj, idlength, ids)

{
var arr =document.getElementsByTagName('input');
for(i=0;i<arr.length;i++)
{ //se barre el arreglo de inputs
if(arr[i].type=="checkbox")
{
if (ids>0)
{
//son 12 posiciones de la cadena CheckModulo + 1, una posicion que ocupa el
//len del Idlenthg (puesto que el idlength tambien se pone en la cadena
//despues de CheckModulo, ej. checkmodulo2. +
if(Mid(arr[i].id, (precision + 12 + idlength), 0)==ids && arr[i].disabled==false)
SelectAll(obj, arr[i].id);

}
if (ids==-1)
{
//Variable precision = ctl00_ContentPlaceHolder1_ 27 caracteres

if ((Mid(arr[i].id,precision, 11)) == "CheckModulo" && arr[i].disabled == false)
SelectAll(obj, arr[i].id);

}
if (ids==-2)
{

if ((Mid(arr[i].id,precision, 6)) == "Checks" && arr[i].disabled == false)
SelectAll(obj, arr[i].id);

}

}
}
}

Arkhel · #9 (**permalink**) 16/02/2007, 12:27

Sript 2: JScript1.js
// JScript File
function CasoFunction(proceso, accion) {

if (accion=="ConsultaCaso") {
Proceso(
"Proceso="
+ proceso

+ "&Funcion="
+ accion, "reader", "DataGrid");

}

}
function nuevoConjunto(moverPagina)

{
if (moverPagina==1)
{
var obtenerConjuntoActivo = Number(document.getElementById("Paginado1").getAtt ribute("name")) + 4;
memoriaGrid(obtenerConjuntoActivo+1,obtenerConjunt oActivo);
}
if (moverPagina==0)
{
var obtenerConjuntoActivo = Number(document.getElementById("Paginado1").getAtt ribute("name")) - 6;
memoriaGrid(obtenerConjuntoActivo+1,obtenerConjunt oActivo);
}
}

function memoriaGrid(pagina, obtenerConjuntoActivo)
{
// var obtenerConjuntoActivo = document.getElementById("Paginado1").getAttribute( "name");

//if (obtenerConjuntoActivo)

limpiarGrid();
// nuevoConjunto

imprimirPaginado(obtenerConjuntoActivo);
//pagina = pagina + 5;

var items = req.responseXML.getElementsByTagName("objeto"+pagi na);
for (var i = 0; i < items.length; i++)
{
var arr =document.getElementsByTagName('TD');
for(var z=0;z<arr.length;z++)
{ //se barre el arreglo de inputs

if(arr[z].id =="CldNombre" + i)
{

MostrarFilas('Fila');
MostrarFilas('Fila'+(i+1));

document.getElementById("Liga"+i).innerText = getElementTextNS("", "Campo2", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Campo1", items[i], 0);

}
if(arr[z].id =="CldFuncionalidad" + i)
{
//arr[z].innerText = "";
//MostrarFilas("Fila1");
arr[z].innerText = getElementTextNS("", "Campo3", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Identificador", items[i], 0);

}

if(arr[z].id =="CldFechaCaptura" + i)
{
//arr[z].innerText = "";
arr[z].innerText =getElementTextNS("", "Campo4", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Identificador", items[i], 0);

}
if(arr[z].id =="CldResponsable" + i)
{
//arr[z].innerText = "";
arr[z].innerText =getElementTextNS("", "Campo5", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Identificador", items[i], 0);

}
if(arr[z].id =="CldRF" + i)
{
//arr[z].innerText = "";
arr[z].innerText = getElementTextNS("", "Campo6", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Identificador", items[i], 0);

}
if(arr[z].id =="CldPrioridad" + i)
{
//arr[z].innerText = "";
arr[z].innerText = getElementTextNS("", "Campo7", items[i], 0);
document.getElementById("Liga"+i).name = getElementTextNS("", "Identificador", items[i], 0);

}

// OcultarFilas('Fila');

}

}
}
function eventAdder(objAttrib,handler,addFunction){

if ((!document.all)&&(document.getElementById)){

objAttrib.setAttribute(handler,addFunction);
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
objAttrib[handler]=new Function(addFunction);

}
}
function imprimirPaginado(conjunto)
{

/**********************Paginado******************** ***********/
var count=-1; //Obtiene cuantas filas fueron encontradas en la consulta
var contadorPagina=conjunto; //Representa el numero a mostrar en el paginado
var paginado = req.responseXML.getElementsByTagName("grid");
var conjuntoActivo; //El numero de conjuntos de paginas mostradas Ejemplo (< 1 2 3 4 5...> ; <6 7>) = 2
for (var i=0;i<paginado.length;i++)
count=getElementTextNS("", "Paginado", paginado[i], 0);
var arrPagina =document.getElementsByTagName('a');

for(var z=0;z<arrPagina.length;z++)
{
if (Mid(arrPagina[z].id,1,8)=='Paginado')
{
if (contadorPagina < count)
{
arrPagina[z].innerText = (contadorPagina+1);
arrPagina[z].name = (contadorPagina+1);
eventAdder(arrPagina[z],"onclick","memoriaGrid(" + (contadorPagina+1) + "," + (conjunto) + ")");

}

contadorPagina = contadorPagina+1;

}

}

if ((conjunto+5) < count)
{
document.getElementById("Siguiente").innerText = "...>";
// MostrarFilas('Siguiente');
if ((conjunto) > 4)
document.getElementById("Anterior").innerText = "<..."; // MostrarFilas('Anterior');
else
document.getElementById("Anterior").innerText = ""; // OcultarFilas('Anterior');
}
else
{
if ((conjunto) > 4)
document.getElementById("Anterior").innerText = "<..."; // MostrarFilas('Anterior');

document.getElementById("Siguiente").innerText = "";
}
/************************************************** **/

}
function limpiarGrid()
{
/************************Limpiar Grid*********************/
var arrA =document.getElementsByTagName('a');

for(var z=0;z<arrA.length;z++)
{
if (Mid(arrA[z].id,1,4)=='Liga' || Mid(arrA[z].id,1,8)=='Paginado' || Mid(arrA[z].id,1,8)=='Anterior' || Mid(arrA[z].id,1,9)=='Siguiente')
arrA[z].innerText = "";
}
var arrTd =document.getElementsByTagName('TD');
for(var z=0;z<arrTd.length;z++)
{
if (Mid(arrTd[z].id,1,3)=='Cld' && Mid(arrTd[z].id,1,9)!='CldNombre' && Mid(arrTd[z].id,1,8)!='Paginado')
arrTd[z].innerText = "";
}

var arrTr =document.getElementsByTagName('TR');
for(var z=0;z<arrTr.length;z++)
{
if (Mid(arrTr[z].id,1,4)=='Fila')
OcultarFilas(arrTr[z].id);
}
/************************************************** **/

}

function MostrarFilas(Fila) {
var elementos = document.getElementsByName(Fila);
for (i = 0; i< elementos.length; i++) {
if(navigator.appName.indexOf("Microsoft") > -1){
var visible = 'block'
} else {
var visible = 'table-row';
}

elementos[i].style.display = visible;
}
}

function OcultarFilas(Fila) {
var elementos = document.getElementsByName(Fila);
for (k = 0; k< elementos.length; k++) {
elementos[k].style.display = "none";
}
}

function CargaGrid()
{
var arr =document.getElementsByTagName('TD');
for(i=0;i<arr.length;i++)
{ //se barre el arreglo de inputs
if(arr[i].id =="CldCategoria1")
{

arr[i].innerText = "SSA";

}
}
}

function link0()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga0").name;
}

function link1()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga1").name;
}

function link2()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga2").name;
}

function link3()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga3").name;
}

function link4()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga4").name;
}
function link5()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga5").name;
}
function link6()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga6").name;
}
function link7()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga7").name;
}

function link8()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga8").name;
}

function link9()
{
location.href ="ElementoConsultado.aspx?idcaso="+ document.getElementById("Liga9").name;
}

Arkhel · #10 (**permalink**) 16/02/2007, 12:30

CSS: EStilo.css, nada mas copie y pegue del mio, hay unos estilos de mas ahi se los quitas.

body {
margin: 0;
padding: 0px;
background-color: #ccc;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-position: center;
}
.legal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
background-color: #999999;
padding-right: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
text-align: right;
}
.field
{
border: 1px solid #999999;
padding: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333;
margin-right: 7px;
margin-left: 3px;
}
.button {
height: 19px;
padding-top: 1px;
padding-bottom: 1px;
vertical-align: top;
background-image: url(../img/backbto.gif);
border: 1px solid #fff;
cursor: hand;
font-family: Verdana, sans-serif;
font-size: 9px;
font-weight: bold;
color: #666;
margin-top: 10px;
margin-left: 5px;
}
.tablageneral {
background-color: #FFFFFF;
padding: 15px;
background-position: top;
}
.tabla {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
background-color: #f5f5f5;
}
.tabla2 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffcc33;
background-color: #f5f5f5;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
padding: 15px;
}
.txtbold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: right;
padding-left: 6px;
}
.txtbold2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
padding-left: 6px;
}

.txtlinkbold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-decoration: underline;
}
.txtlinkbold:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #990000;
text-decoration: underline;
}
.tabla3 {
background-color: #FFFFFF;
border: 1px solid #cccccc;
}
.txt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666666;
text-decoration: none;
text-align: right;
vertical-align: middle;
}.tittabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #ffffff;
background-color: #999999;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
.txttabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
text-align: center;
vertical-align: middle;
}
.titulo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-variant: normal;
color: #666666;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #990000;
vertical-align: top;
}
.txtlinktabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
text-align: center;
vertical-align: middle;
text-decoration: underline;
}
.txtlinktabla:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #990000;
text-align: center;
vertical-align: middle;
text-decoration: underline;
}

.BotonEnlace
{
border-style:none;
background-color:Transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #ffffff;
background-color: #999999;
text-align: center;
vertical-align: middle;

}

.Grid
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333;
text-align:left;

background-color:GrayText;
height:10px;
}
.Grid2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333;
text-align:left;

background-color:Silver;
height:10px;
}

.tittablas
{
display:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
background-color: #999999;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
.checkboxGrid {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: normal;
color: #666666;
text-align: center;
vertical-align: middle;
background-color:GrayText;
height:10px;
}
.checkboxGrid2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: normal;
color: #666666;
text-align: center;
vertical-align: middle;
background-color:Silver;
height:10px;
}

.visibleFila
{
display:none;

}

.colorLiga

{
cursor:pointer;
color:Blue;
border-bottom-width:thin;

}

.Consulta
{

border-style:dotted;

}

Arkhel · #11 (**permalink**) 16/02/2007, 12:36

y de una vez la tabla ja,

Create table Tabla (
Campo1 int primary key not null,
Campo2 varchar(50) null,
Campo3 varchar(50) null,
Campo4 varchar(50) null,
Campo5 varchar(50) null,
Campo6 varchar(50) null,
Campo7 varchar(50) null)

Para que le metas datos a la tabla:

declare @x varchar(10)
set @x = 1
while @x < 100
begin
insert into tabla
(campo1, campo2, campo3, campo4, campo5, campo6, campo7)
values
(@x,
'campo' + @x,
'campo' +@x,
'campo' +@x,
'campo' +@x,
'campo' +@x,
'campo' +@x)
set @x = @x + 1
end

FIN

Otra cosa, en este ejemplo utilizo un xml para el ajax, y lo hago desde una variable string, asi que puede haber problemas al utilizar consultas con demasiados registros, en el ejemplo le meto 100 registros.

Ademas en el web.config por la conexion

<configuration>
<appSettings>
<add key="ConnectionInfo" value="max pool size=10000; server=TUSERVIDOR;Database=TU_BASE; uid=angel; pwd=angel1;"/>
</appSettings>

<connectionStrings/>...

Espero haber ayudado, me dicen si funciono con solo haber copiado y pegado.

Saludos desde Monterrey, México.