Servidores centros secundaria

<!-- Libreria Multiselect -->

{{response.files.append(URL('static','js/multiselect/jquery.multiselect.css'))}}

{{response.files.append(URL('static','js/multiselect/jquery.multiselect.min.js'))}}

{{response.files.append(URL('static','js/multiselect/jquery.multiselect.es.js'))}}

{{#response.files.append(URL('static','css/helper.css'))}}

{{#response.files.append(URL('static','css/dropdown.css'))}}

{{#response.files.append(URL('static','css/default.advanced.css'))}}

{{extend 'layout.html'}}

<div id="tabla_clientes" class="centerGrid">

<table width="100%" align="center">

<tr>

<td style="width:2%"></td>

<td style="text-align:center;"><table id="list" width="100%"></table></td>

<td style="width:2%"></td>

</tr>

</table>

<div id="pager" style=""></div>

<div id="filter" style="margin-left:30%;display:none">Buscar nada</div>

</div>

<div id="dialog-form"></div>

<div id="dialog-form2"></div>

<div id="dialog-confirm" title="¿Borrar el registro seleccionado?" style="display:none;">

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Este elemento quedará permanentemente eliminado. ¿Está seguro?</p>

</div>

<div id="dialog-alert" title="Atención" style="display:none;">

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Para operar sobre un registro debe seleccionarlo previamente.</p>

</div>

<script type="text/javascript">

jQuery(function() {

jQuery("#dialog-confirm").dialog({ autoOpen: false });

jQuery("#dialog-alert").dialog({ autoOpen: false });

});

function print_grid(){

jQuery("#list").jqGrid({

url:"/controlies/laptops/call/json/list",

data: "{}",

datatype: 'json',

mtype: 'GET',

contentType: "application/json; charset=utf-8",

complete: function(jsondata, stat) {

if (stat == "success") {

var thegrid = jQuery("#list")[0];

thegrid.addJSONData(JSON.parse(jsondata.responseText).d);

}

},

colNames:['Marca','Modelo','Número Serie'],

colModel:[

{name:'marca',index:'marca', width:60, align:"center"},

{name:'modelo',index:'modelo', width:115, align:"center"},

{name:'numero_serie',index:'numero_serie', width:115, align:"center"}

],

rowNum:25,

height:335,

width: 900,

rowList:[25,50,75],

pager: '#pager',

sortname: 'marca',

autowidth: false,

viewrecords: true,

sortorder: "asc",

caption:"Portátiles"

});

jQuery("#list").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});

jQuery("#list").jqGrid('navButtonAdd','#pager',{

caption: "Insertar",

buttonicon :'ui-icon-plus',

onClickButton : function (){

addRecord();

}

});

jQuery("#list").jqGrid('navButtonAdd','#pager',{

caption: "Modificar",

buttonicon :'ui-icon-pencil',

onClickButton : function (){

modifyRecord();

}

});

jQuery("#list").jqGrid('navButtonAdd','#pager',{

caption: "Borrar",

buttonicon :'ui-icon-trash',

onClickButton : function (){

deleteRecord();

}

});

jQuery("#list").jqGrid('filterToolbar');

}

function rowSelected(){

var id = jQuery("#list").jqGrid('getGridParam','selrow');

if( id == null ){

jQuery( "#dialog-alert" ).dialog({

resizable: false,

height:150,

width:290,

modal: true,

buttons: { "Aceptar": function() { $( this ).dialog( "close" ); }}

}).dialog('open');

return false;

}

return id;

}

function addRecord(){

jQuery("#messageLoading").show();

jQuery("#dialog-form").html("").css("display","none");

jQuery("#dialog-form").load("form.html", function() {

getAllLaptopTypes();

jQuery("#form_data #action").val("add");

jQuery("#form_data #messageForm").html("Todos los campos son obligatorios");

x = (jQuery(window).width()-350)/2;

y = (jQuery(window).height()-500)/2;

jQuery("#messageLoading").hide();

jQuery("#dialog-form").dialog({

resizable: false,

position: top,

modal: true,

width: 350,

title: "Añadir Portátil"

}).dialog('option', 'position', [x, y]);

});

}

function modifyRecord(){

var id;

jQuery("#messageLoading").show();

var id = rowSelected();

if(id==false)

return false;

jQuery("#dialog-form").html("").css("display","none");

jQuery("#dialog-form").load("form.html", function() {

getAllLaptopTypes();

jQuery("#form_data #action").val("modify");

jQuery("#form_data #user").attr("readonly","true");

jQuery("#form_data #user").css("background-color","#DDD");

jQuery("#form_data #messageForm").html("Todos los campos son obligatorios");

jQuery.post('call/json/getLaptopData',{ id_portatil: id }, function(result) {

jQuery("#form_data #id_portatil").val(result.response['id_portatil']);

jQuery("#form_data #numero_serie").val(result.response['numero_serie']);

jQuery("#form_data #marca_modelo").val(result.response['id_marca_modelo']);

x = (jQuery(window).width()-350)/2;

y = (jQuery(window).height()-500)/2;

jQuery("#messageLoading").hide();

jQuery("#dialog-form").dialog({

resizable: false,

modal: true,

width: 350,

title: "Modificar Portátil"

}).dialog('option', 'position', [x, y]);

});

});

}

function deleteRecord(){

var id = rowSelected();

if(id==false)

return false;

jQuery( "#dialog-confirm" ).dialog({

resizable: false,

height:160,

width:350,

modal: true,

buttons: {

"Borrar": function() {

jQuery.post("call/json/delete","id_portatil="+id, function(data){

jQuery("#dialog-confirm").dialog( "close" );

jQuery("#list").trigger("reloadGrid");

});

},

"Cancelar": function() {

$(this).dialog( "close" );

}

}

}).dialog('open');

}

function getAllLaptopTypes(){

$.post("/controlies/laptops/call/json/getAllLaptopTypes", function(result) {

$.each( result.response, function(i, l){

jQuery("#form_data #marca_modelo").append("<option value='"+l.id_marca_modelo+"'>"+l.marca_modelo+"</option>");

});

});

}

</script>

<script type="text/javascript">

jQuery(document).ready(function(){ print_grid();});

</script>

<script language="javascript">

$(function() {

$("#name").focus();

$("#saveButton").button({ icons: { primary: "ui-icon-disk"}});

$("#cancelButton")

.button({ icons: { primary: "ui-icon-close"}})

.click( function(){ $('#dialog-form').dialog('close'); });

});

function restartStyle(){

$("#form_data p span").css("color","black");

$('#message').html("");

}

function send(){

restartStyle();

jQuery.post('call/json/modify', jQuery("#form_data").serialize(), function(result) {

switch(result.response){

case "OK":{

jQuery('#message').html("Operación realizada correctamente").css("color","green").effect("highlight", {"color":"yellow"}, 1000);

jQuery("#list").trigger("reloadGrid");

setTimeout("$('#dialog-form').dialog('close')",1000);

break;

}

case "fail":{

jQuery('#message').html("Se produjo un error").effect("highlight", {"color":"yellow"}, 1000);

break;

}

case "existe_numero_serie":{

jQuery('#numero_serieTag').css("color","red");

jQuery('#numero_serie').effect("highlight", {"color":"yellow"}, 1000).focus();

jQuery('#message').html("Ya existe ese número de serie").effect("slide");

break;

}

default:{

jQuery('#'+result.response+"Tag").css("color","red");

jQuery('#'+result.response).effect("highlight", {"color":"yellow"}, 1000).focus();

jQuery('#message').html("Hay campos vacíos o incorrectos").effect("slide");

break;

}

}

});

return false;

}

</script>

<form id="form_data" onsubmit="return send();">

<input type="hidden" id="action" name="action"/>

<input type="hidden" id="id_portatil" name="id_portatil"/>

<div>

<p><span id="marca_modeloTag">Marca / Modelo</span><br>

<select type="text" id="marca_modelo" name="marca_modelo">

<option value="none">Seleccione...</option>

</select>

</p>

<p><span id="numero_serieTag">Número Serie</span><br><input type="text" id="numero_serie" name="numero_serie"/></p> </div>

</div>

<div id="message" style="text-align:center; font-weight:bold; color:red; padding:3px; "></div>

<div style="text-align:center;"><button id="saveButton" type="submit" style="width:100px;">Guardar</button>&nbsp;&nbsp;<button type="button" id="cancelButton" style="width:100px;">Cancelar</button></div>

<p style="padding-top:10px; text-align:center; font-size:10px;" id="messageForm"></p>

</form>