1. Heim
  2. jQuery EasyUI Data Grid - HTML-Tabelle Datenraster konvertieren

Das beste jQuery EasyUI Data Grid - HTML-Tabelle Datenraster konvertieren-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

jQuery EasyUI Data Grid - HTML-Tabelle Datenraster konvertieren

Dieses Beispiel zeigt, wie Sie eine Tabelle (Tabelle) für das Datenraster (Datagrid) zu konvertieren.

Data Grid (Datagrid) Spalteninformationen in der definiert ist <thead> -Tag, werden die Daten in dem definierten <tbody> Tag. Stellen Sie sicher, dass alle Datenfeldnamen Spalteneinstellungen, siehe folgende Beispiele: 

	<Table id = "tt" class = "easyui-Datagrid" style = "width: 400px; height: auto;">
		<Thead>
			<Tr>
				<Th Feld = "name1" width = "50"> Col ​​1 </ th>
				<Th Feld = "name2" width = "50"> Col ​​2 </ th>
				<Th Feld = "name3" width = "50"> Col ​​3 </ th>
				<Th Feld = "name4" width = "50"> Col ​​4 </ th>
				<Th Feld = "name5" width = "50"> Col ​​5 </ th>
				<Th Feld = "name6" width = "50"> Col ​​6 </ th>
			</ Tr>                          
		</ Thead>                           
		<Tbody>                            
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> Data 2 </ td>            
				<Td> Data 3 </ td>            
				<Td> Daten 4 </ td>            
				<Td> Daten 5 </ td>            
				<Td> Daten 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> Data 2 </ td>            
				<Td> Data 3 </ td>            
				<Td> Daten 4 </ td>            
				<Td> Daten 5 </ td>            
				<Td> Daten 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> Data 2 </ td>            
				<Td> Data 3 </ td>            
				<Td> Daten 4 </ td>            
				<Td> Daten 5 </ td>            
				<Td> Daten 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> Data 2 </ td>            
				<Td> Data 3 </ td>            
				<Td> Daten 4 </ td>            
				<Td> Daten 5 </ td>            
				<Td> Daten 6 </ td>            
			</ Tr>                          
		</ Tbody>                           
	</ Table>

Große, können Sie eine komplexe Tabellenkopf, zum Beispiel definieren: 

	<Thead>
		<Tr>
			<Th Feld = "name1" width = "50" rowspan = "2"> Col ​​1 </ th>
			<Th Feld = "name2" width = "50" rowspan = "2"> Col ​​2 </ th>
			<Th Feld = "name3" width = "50" rowspan = "2"> Col ​​3 </ th>
			<Th colspan = "3"> Details </ th>
		</ Tr>
		<Tr>
			<Th Feld = "name4" width = "50"> Col ​​4 </ th>
			<Th Feld = "name5" width = "50"> Col ​​5 </ th>
			<Th Feld = "name6" width = "50"> Col ​​6 </ th>
		</ Tr>                          
	</ Thead>

Jetzt können Sie die Header-Komplex zu sehen, erstellt wurde.

Download von jQuery EasyUI Beispiele

jeasyui-datagrid-datagrid1.zip

Hot Tutorials

Kontaktiere uns

jQuery EasyUI Data Grid - HTML-Tabelle Datenraster konvertieren
10/30