elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Limitar número de caracteres en un input con edatagrid?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Limitar número de caracteres en un input con edatagrid?  (Leído 4,458 veces)
Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
¿Limitar número de caracteres en un input con edatagrid?
« en: 26 Noviembre 2014, 12:40 pm »

Tengo un formulario en edatagrid jQuery EasyUI, bien pues quisiera saber de que manera podría limitar el número de caracteres ya que cuando en un textarea por ejemplo inserto más de 6307 de caracteres no me lo inserta, pero si lo inserto a través de la base de datos si me deja insertarlo ya que en el campo de la tabla tiene un varchar de 50.000, pero el problema creo que está en el input y aún no encuentro la propiedad en edatagrid jQuery EasyUI del manual oficial que pueda limitar el número de carácter.

¿Alguna solución?


En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #1 en: 26 Noviembre 2014, 15:39 pm »

- Buenas Polamski, la verdad no conozco el Datagrid Jquery EasyUI pero es posible que que dentro del Datagrid Jquery EasyUI exista una funcion que limite la cantidad de caracteres del textarea deberias verificar eso, por otro lado podrias buscar en el html el textarea y verificar si posee un maxlength que este influyendo y si es asi incrementarlo o bien si quieres eliminarlo.

ejemplo.

Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <meta charset="UTF-8">
  4.    <title>Document</title>
  5. </head>
  6.    <textarea maxlength="50"></textarea>
  7. </body>
  8. </html>
  9.  

- Saludos...


« Última modificación: 26 Noviembre 2014, 15:41 pm por Slikp » En línea

MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.021


I'm fourth.


Ver Perfil WWW
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #2 en: 26 Noviembre 2014, 17:30 pm »

¿Cuando dices que no se inserta, te refieres a que no se inserta en el navegador o no se inserta al enviar el formulario?

¿Como estas enviando la informacion, GET o POST?
En línea

Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #3 en: 26 Noviembre 2014, 17:37 pm »

- Buenas Polamski, la verdad no conozco el Datagrid Jquery EasyUI pero es posible que que dentro del Datagrid Jquery EasyUI exista una funcion que limite la cantidad de caracteres del textarea deberias verificar eso, por otro lado podrias buscar en el html el textarea y verificar si posee un maxlength que este influyendo y si es asi incrementarlo o bien si quieres eliminarlo.

ejemplo.

Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <meta charset="UTF-8">
  4.    <title>Document</title>
  5. </head>
  6.    <textarea maxlength="50"></textarea>
  7. </body>
  8. </html>
  9.  

- Saludos...

Eso mismo hice, de echo lo hice con javascript con este código:

Código:
<script type="text/javascript">
$(document).ready(function(){ // Función a lanzar cada vez que se presiona una tecla en un textarea // en el que se encuentra el atributo maxlength
     $("textarea[maxlength]").keyup(function() {
        var limit   = $(this).attr("maxlength"); // Límite del textarea
        var value   = $(this).val();             // Valor actual del textarea
        var current = value.length;              // Número de caracteres actual
        if (limit < current) {                   // Más del límite de caracteres?
             // Establece el valor del textarea al límite
             $(this).val(value.substring(0, limit));
         }
     });
 });
 
</script>

Código:
<td colspan="8"><textarea maxlength="50000" name="cuerpo" id="cuerpo" rows="4" style="width:99.5%;height:200px;resize:none"></textarea></td>

Me hace la función de la escritura pero sigue sin ir...
En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #4 en: 26 Noviembre 2014, 17:41 pm »

¿Cuando dices que no se inserta, te refieres a que no se inserta en el navegador o no se inserta al enviar el formulario?

¿Como estas enviando la informacion, GET o POST?

No se envía el formulario al servidor y lo estoy haciendo por GET.

En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.021


I'm fourth.


Ver Perfil WWW
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #5 en: 26 Noviembre 2014, 17:48 pm »

No se envía el formulario al servidor y lo estoy haciendo por GET.



¿Como tienes tu HTML markup?
En línea

Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #6 en: 26 Noviembre 2014, 18:30 pm »

¿Como tienes tu HTML markup?

Código:
<table id="capaEdicion" style="margin-left:25px; margin-top:-120px;width:860px;border-style: solid;border-width: 1px; display:none" align="center" border="0">
<tr>
<!--td>Id Noticia:</td>-->
         <input type="hidden" name="id_noticia" id="id_noticia" style="width:80px"/>
         
         <td>Titulo:</td>
         <td><input type="text" name="titulo" id="titulo" style="width:200px"/></td>
         
         <td>Entradilla:</td>
         <td><input type="text" name="entradilla" id="entradilla" style="width:200px"/></td>

<td>URL:</td>
<td><input type="text" name="url" id="url" style="width:200px" /></td>

<td>Fuente:</td>
<td><input type="text" name="fuente" id="fuente" style="width:200px" /></td>
   
    <tr>     
         <td>Fecha:</td>
         <td><input type="text" name="fecha" id="fecha" style="width:100px"/></td>

         <td>Galeria:</td>
         <td><select name="id_galeria" id="id_galeria">
<?php
        while ($columna=mysql_fetch_row($resultado_galerias)){
                            echo "<option value=\"$columna[0]\">$columna[1]</option>";
                    }
                         ?>
           </td>
       
         <td><span id='etqAnchura'>Anchura:</span></td>
         <td><input type="text" name="anchura" id="anchura" style="width:100px"/></td>
         
         <td><span id='etqAltura'>Altura:</span></td>
         <td><input type="text" name="altura" id="altura" style="width:100px"/></td>

    </tr>
   
    </tr>
      <td>Cuerpo:</td>      
     <tr><!--<td colspan="4">&nbsp;</td>-->

         <td colspan="8"><textarea maxlength="50000" name="cuerpo" id="cuerpo" rows="4" style="width:99.5%;height:200px;resize:none"></textarea></td>          
                       
    </tr>

<tr>
<td colspan="8"><hr></td>
    </tr>
     
    <tr>
<td colspan="8" align="center" >
<input type="button" onclick="guardar()" value="Guardar" />
    <input type="button" onclick="cancelar()" value="Cancelar" />
</td>
    </tr>
</table>
En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.021


I'm fourth.


Ver Perfil WWW
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #7 en: 26 Noviembre 2014, 18:37 pm »

Eso no parece ser edatagrid:

http://www.jeasyui.com/extension/edatagrid.php

Puedes poner el HTML que te genera edatagrid (codigo fuente desde el navegador) y revisa en tu consola de errores a ver si no tienes un error de javascript or ahí.
En línea

Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #8 en: 26 Noviembre 2014, 19:13 pm »

Eso no parece ser edatagrid:

http://www.jeasyui.com/extension/edatagrid.php

Puedes poner el HTML que te genera edatagrid (codigo fuente desde el navegador) y revisa en tu consola de errores a ver si no tienes un error de javascript or ahí.


He hecho eso que dices y en el código fuente no he visto ningún tipo de error en javascript.

Este es el código completo que tengo, es el mantenimiento de un portal de noticias.


Código:
<?php

session_start();
 
 if (!isset($_SESSION["logado"])) {
echo "<html>";
echo "<head><script language='javascript'>location.href='login.php?pagina=newsMnto.php';</script><body></body>";
echo "</html>";
 } else {
if (isset($_SESSION["usuario"])) {
         $usuario = $_SESSION["usuario"];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php

/*echo "CONSULTA: ";*/

$conexion=mysql_connect("localhost","user","pass") or die ("ERROR CONEXION MySQL.");
@mysql_select_db("informatica");
$select_galerias="select id_galeria, nombre from GALERIAS order by nombre; ";

$resultado_galerias=@mysql_query($select_galerias);


?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="es-es" />

<title>Informática</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="../engine1/style.css" />
<link href="../Styles/master_style.css" rel="stylesheet" type="text/css" />
<link href="../Styles/quienes_somos_style.css" rel="stylesheet" type="text/css" />
<link href="../Styles/noticias.css" rel="stylesheet" type="text/css" />
<link href="../Styles/login.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="../Styles/easyui.css">

<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>



<script type="text/javascript">
function doSearch(){
$('#listaNoticias').datagrid('load',{
NBtitulo: $('#NBtitulo').val(),
NBentradilla: $('#NBentradilla').val(),
NBurl: $('#NBurl').val(),
NBfuente: $('#NBfuente').val(),
NBfecha: $('#NBfecha').val()
});
}
</script>

<script type="text/javascript">
$(document).ready(function(){ // Función a lanzar cada vez que se presiona una tecla en un textarea // en el que se encuentra el atributo maxlength
     $("textarea[maxlength]").keyup(function() {
        var limit   = $(this).attr("maxlength"); // Límite del textarea
        var value   = $(this).val();             // Valor actual del textarea
        var current = value.length;              // Número de caracteres actual
        if (limit < current) {                   // Más del límite de caracteres?
$(this).val(value.substring(0, limit)); // Establece el valor del textarea al límite
             
         }
     });
 });
 
</script>


<script language="javascript">

var edicionHabilitada = false;
var modoInsercion = false;


function mostrarEdicion(valor) {
if (valor) {
$('#capaBotones').hide();
    $('#capaEdicion').show();
} else {
$('#capaBotones').show();
    $('#capaEdicion').hide();
}
}

function alta() {
document.getElementById('id_noticia').readOnly=true;
mostrarEdicion(true);
modoInsercion = true;
$('#anchura').hide();
$('#altura').hide();
$('#etqAnchura').hide();
$('#etqAltura').hide();
}

function modificar() {

var fila = $('#listaNoticias').datagrid('getSelected');

if (fila == null) {
alert('Seleccione el titular que desee modificar.');
return;
}

$.ajax({url : "getInfoNews.php",
    data : { 'id' : fila.id_noticia },
        success : function(result){
var obj;
eval ('obj=' + result);
if (obj.total == 1) {
document.getElementById('id_noticia').readOnly=true;
rellenarFormulario(obj.rows[0]);
mostrarEdicion(true);
$('#anchura').show();
$('#altura').show();
$('#etqAnchura').show();
$('#etqAltura').show();
modoInsercion = false;
} else {
alert('No se ha encontrado el registro en la Base de Datos');
}

                       }
         });

}

function borrar() {

        var fila = $('#listaNews').datagrid('getSelected');

if (fila == null) {
alert('Seleccione el titular que desee eliminar.');
return;
}

if (confirm('¿Desea eliminar la noticia ' + fila.id_noticia + ' - ' + fila.titulo + '?')) {

$.ajax({url : "deleteNews.php",
data : { 'id' : fila.id_noticia },
success : function(result){
var obj;
            eval('obj = ' + result);

                            if (obj.resultado == 'ok') {
                          buscar();
                          } else {
    alert('No se pudo eliminar el titular.');
    }

   }
});
}
}


function rellenarFormulario(data) {
$('#id_noticia').val(data.id_noticia);
$('#titulo').val(data.Ntitulo);
$('#entradilla').val(data.Nentradilla);
$('#cuerpo').val(data.Ncuerpo);
$('#url').val(data.Nurl);
$('#fuente').val(data.Nfuente);
$('#fecha').val(data.Nfecha);
$('#anchura').val(data.Nanchura);
$('#altura').val(data.Naltura);
$('#id_galeria').val(data.NidGaleria);
}

function limpiarFormulario() {
    $('#id_noticia').val('');
$('#titulo').val('');
$('#entradilla').val('');
$('#cuerpo').val('');
$('#url').val('');
$('#fuente').val('');
$('#fecha').val('');
$('#anchura').val('');
$('#altura').val('');
$('#id_galeria').val('');
}

function cancelar() {
mostrarEdicion(false);
limpiarFormulario();
}

function validarNumero(valor, minimo, maximo) {
if (isNaN(valor)) {
return false;
}
var entero = parseInt(valor);
//var flotante = parseFloat(valor);

if (minimo != null && entero < minimo) {
return false;
}

if (maximo != null && entero > maximo) {
return false;
}

return true;

}


function validarFecha(fec) {

if (fec.length > 0) {

var partes = fec.split('/');

if (partes.length != 3) {

return false;

}

var ano = partes[2];

var mes = partes[1];

var dia = partes[0];

mes = mes - 1;

valor =

new Date(ano, mes, dia);

if( isNaN(valor) ) {

return false;

}

else {

//Si el dia, mes y año concuerdan...

if ((dia==valor.getDate()) && (mes==valor.getMonth()) && (ano==valor.getFullYear())) {

return true;

}

else {

return false;

}

}

return true;

}

else {

return false;

}

}

function validar() {
if ($('#titulo').val() == '') {
alert('Introduzca el Titular');
document.getElementById('titulo').focus();
return false;
} else if ($('#entradilla').val() == '') {
alert('Introduzca la Entradilla');
document.getElementById('entradilla').focus();
return false;
} else if ($('#cuerpo').val() == '') {
alert('Introduzca el Cuerpo');
document.getElementById('cuerpo').focus();
return false;
    } else if ($('#fecha').val() != '' && !validarFecha($('#fecha').val())) {
alert('Introduzca una Fecha válida');
document.getElementById('fecha').focus();
return false;
}
   
return true;
}

function buscar() {

$.ajax({url : "getNoticias.php",
        success : function(result){
            var obj;
            eval('obj = ' + result);
                        $('#listaNoticias').datagrid({
                        data: obj.rows
                        });

                       }
         });
}

function guardar() {
//Falta validar los campos obligatorios
if (validar()) {
if (modoInsercion) {

               $.ajax({url : "addNews.php",
      type : 'GET',
      data : {
"id_noticia" : $('#id_noticia').val(),
"titulo" : $('#titulo').val(),
"entradilla" : $('#entradilla').val(),
"cuerpo" : $('#cuerpo').val(),
"url" : $('#url').val(),
"fuente" : $('#fuente').val(),
"fecha" : $('#fecha').val(),
"anchura" : $('#anchura').val(),
"altura" : $('#altura').val(),
"idGaleria" : $('#id_galeria').val()

      },
                success : function(result){
        var obj;

        eval('obj = ' + result);

                        if (obj.resultado == 'ok') {
                      limpiarFormulario();
                      mostrarEdicion(false);
                      buscar();
                      } else {
alert('No se pudo insertar la noticia.');
}

                     }
                 });

} else {

               $.ajax({url : "updateNews.php",
      type : 'GET',
      data : {
"id_noticia" : $('#id_noticia').val(),
"titulo" : $('#titulo').val(),
"entradilla" : $('#entradilla').val(),
"cuerpo" : $('#cuerpo').val(),
"url" : $('#url').val(),
"fuente" : $('#fuente').val(),
"fecha" : $('#fecha').val(),
"anchura" : $('#anchura').val(),
"altura" : $('#altura').val(),
"idGaleria" : $('#id_galeria').val()
   },
             success : function(result){
        var obj;
       
        eval('obj = ' + result);

                        if (obj.resultado == 'ok') {
                      limpiarFormulario();
                      mostrarEdicion(false);
                      buscar();
                      } else {
alert('No se pudo guardar la Noticia.');
}

                     }
               });
    }
}
}

function cambiarImagen() {
        var fila = $('#listaNews').datagrid('getSelected');

if (fila == null) {
alert('Seleccione el titular que desee para cambiar su foto.');
return;
}

window.open('selecFotoNoticia.php?id=' + fila.id_noticia, 'modifFoto', 'height=600,width=930;location=0;menubar=0');

}


function cerrarSesion() {
$.ajax({url : "/informatica/cerrarSesion.php",
        success : function(result){
                        location.href = '/informatica/index.php';

                       }
         });
}

</script>
</head>
<body onload="inicio()">
<div class="main">
<header class="header">
<table>
                <tr>
                    <td>
                        <a id="inicio-link" href="../index.html"><img id="logo-SOS" src="../Imgs/log.png" alt="" /></a>
                    </td>
                    <td valign="middle">
                        <ul class="menu">
                            <li id="li1"><a id="A1" href="../index.html">Inicio</a></li>
<li id="li2"><a id="A2" href="../servicio.html">Servicios</a></li>
                            <li id="li3"><a id="A3" href="../quienes_somos.html">¿Quienes somos?</a></li>
                            <li id="li4"><a id="A4" href="../contacto.php">Contactar</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
</header>
<div class="content">
<div class="this_content">
<div class="this_header">
<table id="siguenos-div">
<tr>
<td valign="middle">
<h1 class="page_header">
###### Mantenimiento ######</h1>
</td>
</tr>
</table>
</div>
<div class="top_content">
<h1>Mantenimiento del m&oacute;dulo de noticias</h1>
<div class="content_resize_3">

         <span class="body_news">  

<div style="margin-left:25px">
<br><?php
echo "<span style='margin-top:10px;margin-left:0px'> Bienvenido $usuario </span>";
?>
<table id="listaNoticias" title="Lista de Noticias" class="easyui-datagrid" style="width:924px;height:250px"
                       url="http://192.168.220.4/informatica/mnto_news/getNews.php"
                       title="Searching" iconCls="icon-search" toolbar="#tb"
                   pagination="true"
                rownumbers="true" fitColumns="true" singleSelect="true">
                <thead>
                   <tr>
                 <!-- <th field="id_noticia" width="50">Id</th> -->
                      <th field="titulo" width="250">Titular</th>
                      <th field="entradilla" width="250">Entradilla</th>
                      <th field="fuente" width="50">Fuente</th>
                      <th field="url" width="50">URL</th>
                      <th field="fecha" width="50">Fecha</th>

                   </tr>
               </thead>
            </table>
           
     <!-- Buscador para el edatagrid -->       
           
    <div id="tb" style="padding:3px">
<span>Titular:</span>
<input id="NBtitulo" style="line-height:26px;border:1px solid #ccc">
<span>Entradilla:</span>
<input id="NBentradilla" style="line-height:26px;border:1px solid #ccc">
<span>URL:</span>
<input id="NBurl" style="line-height:26px;border:1px solid #ccc">
<span>Fuente:</span>
<input id="NBfuente" style="line-height:26px;border:1px solid #ccc">
<span>Fecha:</span>
<input id="NBfecha" style="line-height:26px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Buscar</a>
</div>
</div>
<div style="margin-left:25px;" id="capaBotones">
               <input type="button" onclick="alta()" value="Nueva Noticia" />
               
               <input type="button" onclick="modificar()" value="Modificar Noticia" />
               
               <input type="button" onclick="borrar()" value="Borrar Noticia" />
             
               <input type="button" onclick="cambiarImagen()" value="Cambiar Foto" />
               
               <input type="button" onclick="cerrarSesion()" value="Cerrar Sesión" />
            </div>
               <div id='atras_img_2'><a href='/informatica/menuAdmin.php'><img src='../Imgs/atras.png'></img></a></div>   
            <br/>
<br>
  <table id="capaEdicion" style="margin-left:25px; margin-top:-120px;width:860px;border-style: solid;border-width: 1px; display:none" align="center" border="0">
<tr>
<!--td>Id Noticia:</td>-->
         <input type="hidden" name="id_noticia" id="id_noticia" style="width:80px"/>
         
         <td>Titulo:</td>
         <td><input type="text" name="titulo" id="titulo" style="width:200px"/></td>
         
         <td>Entradilla:</td>
         <td><input type="text" name="entradilla" id="entradilla" style="width:200px"/></td>

<td>URL:</td>
<td><input type="text" name="url" id="url" style="width:200px" /></td>

<td>Fuente:</td>
<td><input type="text" name="fuente" id="fuente" style="width:200px" /></td>
   
    <tr>     
         <td>Fecha:</td>
         <td><input type="text" name="fecha" id="fecha" style="width:100px"/></td>

         <td>Galeria:</td>
         <td><select name="id_galeria" id="id_galeria">
<?php
        while ($columna=mysql_fetch_row($resultado_galerias)){
                            echo "<option value=\"$columna[0]\">$columna[1]</option>";
                    }
                         ?>
           </td>
       
         <td><span id='etqAnchura'>Anchura:</span></td>
         <td><input type="text" name="anchura" id="anchura" style="width:100px"/></td>
         
         <td><span id='etqAltura'>Altura:</span></td>
         <td><input type="text" name="altura" id="altura" style="width:100px"/></td>

    </tr>
   
    </tr>
      <td>Cuerpo:</td>      
     <tr><!--<td colspan="4">&nbsp;</td>-->

         <td colspan="8"><textarea maxlength="50000" name="cuerpo" id="cuerpo" rows="4" style="width:99.5%;height:200px;resize:none"></textarea></td>          
                       
    </tr>

<tr>
<td colspan="8"><hr></td>
    </tr>
     
    <tr>
<td colspan="8" align="center" >
<input type="button" onclick="guardar()" value="Guardar" />
    <input type="button" onclick="cancelar()" value="Cancelar" />
</td>
    </tr>
</table>
</span>
</div>
 </body>
</html>
<?php
   mysql_close($conexion);
}
?>


</body>

</html>
En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
Clavo Oxidado

Desconectado Desconectado

Mensajes: 106


HACK YOUR MIND


Ver Perfil
Re: ¿Limitar número de caracteres en un input con edatagrid?
« Respuesta #9 en: 26 Noviembre 2014, 19:17 pm »

Y este el plugin de jQuery de edatagrid que tengo establecido.

Código:
/**
 * edatagrid - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2011 stworthy [ stworthy@gmail.com ]
 *
 * Dependencies:
 *   datagrid
 *   messager
 *
 */
(function($){
function buildGrid(target){
var opts = $.data(target, 'edatagrid').options;
$(target).datagrid($.extend({}, opts, {
onDblClickCell:function(index,field){
if (opts.editing){
$(this).edatagrid('editRow', index);
focusEditor(field);
}
},
onClickCell:function(index,field){
if (opts.editing && opts.editIndex >= 0){
$(this).edatagrid('editRow', index);
focusEditor(field);
}
},
onAfterEdit: function(index, row){
opts.editIndex = undefined;
var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
if (url){
$.post(url, row, function(data){
data.isNewRecord = null;
$(target).datagrid('updateRow', {
index: index,
row: data
});
if (opts.tree){
var idValue = row[opts.idField||'id'];
var t = $(opts.tree);
var node = t.tree('find', idValue);
if (node){
node.text = row[opts.treeTextField];
t.tree('update', node);
} else {
var pnode = t.tree('find', row[opts.treeParentField]);
t.tree('append', {
parent: (pnode ? pnode.target : null),
data: [{id:idValue,text:row[opts.treeTextField]}]
});
}
}
opts.onSave.call(target, index, row);
},'json');
} else {
opts.onSave.call(target, index, row);
}
if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);
},
onCancelEdit: function(index, row){
opts.editIndex = undefined;
if (row.isNewRecord) {
$(this).datagrid('deleteRow', index);
}
if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);
},
onBeforeLoad: function(param){
if (opts.onBeforeLoad.call(target, param) == false){return false}
$(this).datagrid('rejectChanges');
if (opts.tree){
var node = $(opts.tree).tree('getSelected');
param[opts.treeParentField] = node ? node.id : undefined;
}
}
}));

function focusEditor(field){
var editor = $(target).datagrid('getEditor', {index:opts.editIndex,field:field});
if (editor){
editor.target.focus();
} else {
var editors = $(target).datagrid('getEditors', opts.editIndex);
if (editors.length){
editors[0].target.focus();
}
}
}

if (opts.tree){
$(opts.tree).tree({
url: opts.treeUrl,
onClick: function(node){
$(target).datagrid('load');
},
onDrop: function(dest,source,point){
var targetId = $(this).tree('getNode', dest).id;
$.ajax({
url: opts.treeDndUrl,
type:'post',
data:{
id:source.id,
targetId:targetId,
point:point
},
dataType:'json',
success:function(){
$(target).datagrid('load');
}
});
}
});
}
}

$.fn.edatagrid = function(options, param){
if (typeof options == 'string'){
var method = $.fn.edatagrid.methods[options];
if (method){
return method(this, param);
} else {
return this.datagrid(options, param);
}
}

options = options || {};
return this.each(function(){
var state = $.data(this, 'edatagrid');
if (state){
$.extend(state.options, options);
} else {
$.data(this, 'edatagrid', {
options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
});
}
buildGrid(this);
});
};

$.fn.edatagrid.parseOptions = function(target){
return $.extend({}, $.fn.datagrid.parseOptions(target), {
});
};

$.fn.edatagrid.methods = {
options: function(jq){
var opts = $.data(jq[0], 'edatagrid').options;
return opts;
},
enableEditing: function(jq){
return jq.each(function(){
var opts = $.data(this, 'edatagrid').options;
opts.editing = true;
});
},
disableEditing: function(jq){
return jq.each(function(){
var opts = $.data(this, 'edatagrid').options;
opts.editing = false;
});
},
editRow: function(jq, index){
return jq.each(function(){
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
var editIndex = opts.editIndex;
if (editIndex != index){
if (dg.datagrid('validateRow', editIndex)){
if (editIndex>=0){
if (opts.onBeforeSave.call(this, editIndex) == false) {
setTimeout(function(){
dg.datagrid('selectRow', editIndex);
},0);
return;
}
}
dg.datagrid('endEdit', editIndex);
dg.datagrid('beginEdit', index);
opts.editIndex = index;
var rows = dg.datagrid('getRows');
opts.onEdit.call(this, index, rows[index]);
} else {
setTimeout(function(){
dg.datagrid('selectRow', editIndex);
}, 0);
}
}
});
},
addRow: function(jq, index){
return jq.each(function(){
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
if (opts.editIndex >= 0){
if (!dg.datagrid('validateRow', opts.editIndex)){
dg.datagrid('selectRow', opts.editIndex);
return;
}
if (opts.onBeforeSave.call(this, opts.editIndex) == false){
setTimeout(function(){
dg.datagrid('selectRow', opts.editIndex);
},0);
return;
}
dg.datagrid('endEdit', opts.editIndex);
}
var rows = dg.datagrid('getRows');

function _add(index, row){
if (index == undefined){
dg.datagrid('appendRow', row);
opts.editIndex = rows.length - 1;
} else {
dg.datagrid('insertRow', {index:index,row:row});
opts.editIndex = index;
}
}
if (typeof index == 'object'){
_add(index.index, $.extend(index.row, {isNewRecord:true}))
} else {
_add(index, {isNewRecord:true});
}

// if (index == undefined){
// dg.datagrid('appendRow', {isNewRecord:true});
// opts.editIndex = rows.length - 1;
// } else {
// dg.datagrid('insertRow', {
// index: index,
// row: {isNewRecord:true}
// });
// opts.editIndex = index;
// }

dg.datagrid('beginEdit', opts.editIndex);
dg.datagrid('selectRow', opts.editIndex);

if (opts.tree){
var node = $(opts.tree).tree('getSelected');
rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0);
}

opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]);
});
},
saveRow: function(jq){
return jq.each(function(){
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
setTimeout(function(){
dg.datagrid('selectRow', opts.editIndex);
},0);
return;
}
$(this).datagrid('endEdit', opts.editIndex);
});
},
cancelRow: function(jq){
return jq.each(function(){
var index = $(this).edatagrid('options').editIndex;
$(this).datagrid('cancelEdit', index);
});
},
destroyRow: function(jq){
return jq.each(function(){
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
var row = dg.datagrid('getSelected');
if (!row){
$.messager.show({
title: opts.destroyMsg.norecord.title,
msg: opts.destroyMsg.norecord.msg
});
return;
}
$.messager.confirm(opts.destroyMsg.confirm.title,opts.destroyMsg.confirm.msg,function(r){
if (r){
var index = dg.datagrid('getRowIndex', row);
if (row.isNewRecord){
dg.datagrid('cancelEdit', index);
} else {
if (opts.destroyUrl){
var idValue = row[opts.idField||'id'];
$.post(opts.destroyUrl, {id:idValue}, function(){
if (opts.tree){
dg.datagrid('reload');
var t = $(opts.tree);
var node = t.tree('find', idValue);
if (node){
t.tree('remove', node.target);
}
} else {
dg.datagrid('cancelEdit', index);
dg.datagrid('deleteRow', index);
}
opts.onDestroy.call(dg[0], index, row);
});
} else {
dg.datagrid('cancelEdit', index);
dg.datagrid('deleteRow', index);
opts.onDestroy.call(dg[0], index, row);
}
}
}
});
});
}
};

$.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
editing: true,
editIndex: -1,
destroyMsg:{
norecord:{
title:'Warning',
msg:'No record is selected.'
},
confirm:{
title:'Confirm',
msg:'Are you sure you want to delete?'
}
},
// destroyConfirmTitle: 'Confirm',
// destroyConfirmMsg: 'Are you sure you want to delete?',

url: null, // return the datagrid data
saveUrl: null, // return the added row
updateUrl: null, // return the updated row
destroyUrl: null, // return {success:true}

tree: null, // the tree selector
treeUrl: null, // return tree data
treeDndUrl: null, // to process the drag and drop operation, return {success:true}
treeTextField: 'name',
treeParentField: 'parentId',

onAdd: function(index, row){},
onEdit: function(index, row){},
onBeforeSave: function(index){},
onSave: function(index, row){},
onDestroy: function(index, row){}
});
})(jQuery);
En línea

"Dame 10 Hackers y en media hora dominaré el mundo."
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Limitar el número de conexiones?
Hacking Wireless
gregory90 4 6,261 Último mensaje 22 Agosto 2011, 18:30 pm
por gregory90
Limitar caracteres de una variable ¿Como hago? [Batch] « 1 2 »
Scripting
the_Avenger 11 9,299 Último mensaje 12 Octubre 2011, 02:00 am
por the_Avenger
Limitar número de copias en impresión
Windows
vickarma 3 6,065 Último mensaje 16 Mayo 2012, 09:20 am
por vickarma
Como poner un minimo de caracteres en un input
PHP
noaptebuna 3 4,032 Último mensaje 24 Septiembre 2015, 15:31 pm
por engel lex
[Pregunta]: Caracteres máximo en un input
Desarrollo Web
Leguim 2 583 Último mensaje 30 Enero 2019, 15:34 pm
por MCKSys Argentina
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines