1. Rumah
  2. jQuery EasyUI data Grid - Mengkonversi HTML jaringan data tabel

Tutorial jQuery EasyUI data Grid - Mengkonversi HTML jaringan data tabel Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil jQuery EasyUI contoh,

jQuery EasyUI data Grid - Mengkonversi HTML jaringan data tabel

Contoh ini menunjukkan bagaimana mengkonversi tabel (tabel) untuk jaringan data (datagrid).

Data Grid (datagrid) informasi kolom didefinisikan dalam <thead> tag, data yang didefinisikan dalam <tbody> tag. Pastikan bahwa semua pengaturan nama field kolom data, lihat contoh berikut: 

	<Table id = "tt" class = "easyui-datagrid" style = "width: 400px; height: auto;">
		<Thead>
			<Tr>
				<Th field = "name1" width = "50"> Kol 1 </ th>
				<Th field = "name2" width = "50"> Kol 2 </ th>
				<Th field = "name3" width = "50"> Kol 3 </ th>
				<Th field = "NAME4" width = "50"> Kol 4 </ th>
				<Th field = "NAME5" width = "50"> Col ​​5 </ th>
				<Th field = "name6" width = "50"> Col ​​6 </ th>
			</ Tr>                          
		</ Thead>                           
		<Tbody>                            
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> data 2 </ td>            
				<Td> data 3 </ td>            
				<Td> data 4 </ td>            
				<Td> data 5 </ td>            
				<Td> data 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> data 2 </ td>            
				<Td> data 3 </ td>            
				<Td> data 4 </ td>            
				<Td> data 5 </ td>            
				<Td> data 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> data 2 </ td>            
				<Td> data 3 </ td>            
				<Td> data 4 </ td>            
				<Td> data 5 </ td>            
				<Td> data 6 </ td>            
			</ Tr>                          
			<Tr>                           
				<Td> Data 1 </ td>            
				<Td> data 2 </ td>            
				<Td> data 3 </ td>            
				<Td> data 4 </ td>            
				<Td> data 5 </ td>            
				<Td> data 6 </ td>            
			</ Tr>                          
		</ Tbody>                           
	</ Table>

Besar, Anda dapat menentukan header tabel yang kompleks, misalnya: 

	<Thead>
		<Tr>
			<Th field = "name1" width = "50" rowspan = "2"> Kol 1 </ th>
			<Th field = "name2" width = "50" rowspan = "2"> Kol 2 </ th>
			<Th field = "name3" width = "50" rowspan = "2"> Kol 3 </ th>
			<Th colspan = "3"> Detail </ th>
		</ Tr>
		<Tr>
			<Th field = "NAME4" width = "50"> Kol 4 </ th>
			<Th field = "NAME5" width = "50"> Col ​​5 </ th>
			<Th field = "name6" width = "50"> Col ​​6 </ th>
		</ Tr>                          
	</ Thead>

Sekarang Anda dapat melihat, kompleks sundulan telah dibuat.

Ambil jQuery EasyUI contoh

jeasyui-datagrid-datagrid1.zip

Tutorial Panas

Hubungi kami

jQuery EasyUI data Grid - Mengkonversi HTML jaringan data tabel
10/30