hola,
Estoy haciedo una tabla con celdas editables y mostrar u ocultar columnas, pero noque queda bien la formade editar celdas. mi codigo es este.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "css/demos.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css">
<script type="text/javascript" language="javascript" src="js/jquery/jquery.jeditable.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/jquery/flexigrid.js"></script>
<!--script type="text/javascript" charset="utf-8">
var oTable;
$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#flex1 tbody td').editable( 'php/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"height": "14px"
} );
/* Init DataTables */
oTable = $('#flex1').dataTable();
} );
</script-->
</head>
<body>
<div>
<div>
<table cellpadding="0" cellspacing="0" border="0" id="flex1">
<thead>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer
4.0
</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//$('.flexme1').flexigrid();
$('.flexme2').flexigrid({height:'auto',striped:fal se});
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'Rendering engine', name : 'Rendering engine', width : 100, sortable : true, align: 'center'},
{display: 'Browser', name : 'Browser', width : 180, sortable : true, align: 'left'},
{display: 'Platform(s)', name : 'Platform(s)', width : 120, sortable : true, align: 'left'},
{display: 'Engine version', name : 'Engine version', width : 130, sortable : true, align: 'left'},
{display: 'CSS grade', name : 'CSS grade', width : 130, sortable : true, align: 'left'}
],
searchitems : [
{display: 'Columna', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: '',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
function test(com,grid)
{
if (com=='Delete')
{
confirm('Delete ' + $('.trSelected',grid).length + ' items?')
}
else if (com=='Add')
{
alert('Add New Item');
}
}
$('b.top').click
(
function ()
{
$(this).parent().toggleClass('fh');
}
);
// $(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#flex1 tbody td').editable( 'php/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"height": "14px"
} );
/* Init DataTables */
oTable = $('#flex1').dataTable();
//} );
</script>
