La premisa es usar esayui para escribir código js.
<! ¿TIPO DE DOCUMENTO? html & gt
& lthtml & gt
& lthead & gt
& ltmeta? charset="UTF-8 "
& lt! -easyUI->
<Link? rel="hoja de estilo"? tipo="texto/css"? href = " jquery-easy ui-1 . 4 . 5/themes/default/easy ui . CSS ">
<Link? rel="hoja de estilo"? tipo="texto/css"? href = " jquery-easy ui-1 . 4 . 5/themes/icon . CSS "
& lt enlace? rel="hoja de estilo"? tipo="texto/css"? href = " jquery-easy ui-1 . 4 . 5/themes/color . CSS "
& lt enlace? rel="hoja de estilo"? tipo="texto/css"? href = " jquery-easy ui-1 . 4 . 5/demo/demo . CSS "
& lt enlace? rel="hoja de estilo"? tipo="texto/css"? href = " recursos/CSS/plantilla . CSS "/>
<Link? rel="hoja de estilo"? tipo="texto/css"? href = " recursos/CSS/ma . CSS "/>
<Script? tipo="texto/javascript "? src = " jquery-easy ui-1 . 4 . 5/jquery . min . js " ></script>
<Script? tipo="texto/javascript "? src = " jquery-easy ui-1 . 4 . 5/jquery . easy ui . min . js " ></script>
<Script? tipo="texto/javascript "? src = " jquery-easy ui-1 . 4 . 5/locale/easy ui-lang-zh _ cn . js " ></script>
<Script? type = " texto/JavaScript ">
¿Función? getSelected(){
var? ¿Plan? =?$('#dg').
datagrid("ser seleccionado");
¿Si? (Línea){
$.messager.alert('Seguimiento de personal',? fila . nombre+":"+fila . num+":"+fila . dept+":"+fila . estado); /p>
}
}
& lt/script & gt
& lttitle & gtDinámica del personal
</ cabeza>
<Cuerpo? & gt
& ltdiv? class="diseño-easyui"? opciones-datos="fit:true "? <! -style = "ancho:1360 px; alto:665px?"-& gt;& gt
& lt! - Detalles dinámicos de la persona de la izquierda comienzan-& gt;
& ltdiv? opciones de datos="región:'oeste ', división:verdadero, plegable:falso "? Título = "Detalles del personal"? style = "ancho:30%; desbordamiento: oculto;"& gt
& ltdiv? class="pestañas-easyui"? data-options="fit:true,border:false,pill:true,justified:true,tabWidth:80,tabHeight:30 " >>p>
& ltdiv? clase="título"? Título = "Empleado"? & gt
& ltdiv? id="barra de herramientas1 "
& ltAnswer? class="easyui-linkbutton"? simple = "verdadero"? icon cls = " icon-man " onclick = " ser seleccionado()" & gt.
Seguimiento de personal
& ltdiv? style="float:?left;"& gt
& ltEntrar? class = "easy ui-search box" Prompt = "Ingrese su nombre de usuario" style="width:?200px?vertical alineación:?middle;"></input>?
</div>
</div>?
& ltTable? id="dg"? class="easyui-datagrid"? estilo = " ancho: 100%; alto: 455px color de fondo: #E0ECFF "?
opciones de datos = " singleSelect: true, plegable: true, url: 'data/CheckAttendance.json ', método: ' get '?"
pagination = " true " fit columnas = "verdadero"? showFooter="verdadero"?
& gt
& ltthead & gt
& lttr & gt
& ltth? data-options="campo:'nombre ',ancho:100" >nombre
& ltth? data-options="field:'num ',width:100" >Número de certificado
& ltth? data-options="field:'dept ',width:100" >departamento
& ltth? data-options="field:'status',width:100">Estado
</tr>
</thead>
& lt/table & gt;
& lt/div & gt;
& ltdiv? clase="título"? Título = "personal fuera de servicio"? & gt
& ltdiv? id="Barra de herramientas2"? & gt
& lt¿Respuesta? class = "botón fácil de enlace de interfaz de usuario" icon cls = "icon-man"? simple = "verdadero"? onclick = "get selected()">Seguimiento de personal
</div>
<Table? class="easyui-datagrid"? estilo = " 100%; altura: 95%; color de fondo: #E0ECFF "?
opciones de datos = " singleSelect: true, plegable: true, url: 'data/CheckAttendance.json ', método: ' get ' "
pagination = " true " ajustar columnas = " verdadero " & gt;
& ltthead & gt
& lttr & gt
& ltth? data-options="campo:'nombre ',ancho:100" >nombre
& ltth? data-options="field:'num ',width:100" >Número de certificado
& ltth? data-options="campo:'dept ',ancho:100" >Departamento
p>
<th? data-options="field:'status ',width:100">Estado
</tr>
</thead>
& lt/table & gt;
& lt/div & gt;
& ltdiv? Class="title"title= "Todos"? & gt
& ltdiv? id="Barra de herramientas 3" >>p>
& ltAnswer? class="easyui-linkbutton"? iconcls="icono-tip "? Plain = " true " onclick = " get selected()" >Detalles del personal
& lt/div >
& lttableclass="easyui-datagrid "? estilo = " 100%; altura: 95%; color de fondo: #E0ECFF "?
opciones de datos = " singleSelect: true, plegable: true, url: 'data/CheckAttendance.json ', método: ' get ' "
pagination = " true " ajustar columnas = " verdadero " & gt;
& ltthead & gt
& lttr & gt
& ltth? data-options="campo:'nombre ',ancho:100" >nombre
& ltth? data-options="field:'num ',width:100" >Número de certificado
& ltth? data-options="field:'dept ',width:100" >departamento
& ltth? data-options="field:'status',width:100">Estado
</tr>
</thead>
& lt/table & gt;
& lt/div & gt;
& lt/div & gt;
& lt/div & gt ;
<! -Fin de los detalles dinámicos->
<! -inicio del mapa->
<div? data-options="region:'center ',iconCls:'icon-ok '"? style= "overflow:?hide;"& gt
& ltdiv? id="u4"? Class="ax_imagen" >>p>
& ltimg? id="u4_img"? clase="img?"? src = " imágenes/dinámica de casos/U4 . png "style="width:?99%;height:100%;"/& gt;
<! - ?Sin nombre? ()?-& gt;
& ltdiv? id="u5"? class="texto " >& lt/div & gt;
& lt/div & gt;
& lt/div & gt;
& lt ! -Fin del mapa->
</body>
</html>