¿Limitar número de caracteres en un input con edatagrid?

Clavo Oxidado · 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?

Slikp · 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 (html4strict) [Seleccionar]


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <textarea maxlength="50"></textarea>
</body>
</html>

- Saludos...

MinusFour · 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?

Clavo Oxidado · 26 Noviembre 2014, 17:37 PM

Cita de: Slikp 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 (html4strict) [Seleccionar] Expandir
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <textarea maxlength="50"></textarea> </body> </html>

- Saludos...

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

Código [Seleccionar]

<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 [Seleccionar]

<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...

Clavo Oxidado · 26 Noviembre 2014, 17:41 PM

Cita de: MinusFour 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?

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

MinusFour · 26 Noviembre 2014, 17:48 PM

Cita de: Polanski en 26 Noviembre 2014, 17:41 PM
No se envía el formulario al servidor y lo estoy haciendo por GET.

¿Como tienes tu HTML markup?

Clavo Oxidado · 26 Noviembre 2014, 18:30 PM

Cita de: MinusFour en 26 Noviembre 2014, 17:48 PM
¿Como tienes tu HTML markup?

Código [Seleccionar]


 <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>

MinusFour · 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í.

Clavo Oxidado · 26 Noviembre 2014, 19:13 PM

Cita de: MinusFour 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í.

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 [Seleccionar]

<?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>

Clavo Oxidado · 26 Noviembre 2014, 19:17 PM

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

Código [Seleccionar]

/**
 * 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);