Título: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado 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?
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: 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. <!DOCTYPE html>
- Saludos...
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: 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?
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado 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. <!DOCTYPE html>
- Saludos... <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> <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...
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado 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.
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: MinusFour 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?
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado en 26 Noviembre 2014, 18:30 pm
¿Como tienes tu HTML markup?
<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"> </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>
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: 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í.
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado 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.<?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ó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"> </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>
Título: Re: ¿Limitar número de caracteres en un input con edatagrid?
Publicado por: Clavo Oxidado en 26 Noviembre 2014, 19:17 pm
Y este el plugin de jQuery de edatagrid que tengo establecido./**
* 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);
|