1. Home
  2. Drzewo menu jQuery EasyUI - stworzenie rozbudowanej siatki drzewo

Najlepszy samouczek Drzewo menu jQuery EasyUI - stworzenie rozbudowanej siatki drzewo W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

Drzewo menu jQuery EasyUI - stworzenie rozbudowanej siatki drzewo

Siatka Drzewo (TreeGrid) mogą pojawić się złożone i multi-kolumny arkusza z przestrzeni danych jest ograniczona. Ten poradnik pokazuje, jak partycjonowanie danych tabeli jest umieszczony w nagłówkach siatki i multi-line w celu zorganizowania wspólnych danych.

Tworzenie drzewa siatkę (TreeGrid) 

	<Table class = tytuł "Complex TreeGrid" = "easyui-TreeGrid" style = "width: 550px; height: 250px"
			url = "data / treegrid2_data.json"
			rownumbers = "true" ShowFooter = "true"
			idField = "id" treeField = "region">
		<THEAD mrożone = "true">
			<Tr>
				<Th pole = "region" width = "150"> Region </ th>
			</ Tr>
		</ THEAD>
		<THEAD>
			<Tr>
				<Th colspan = "4"> 2009 </ p>
				<Th colspan = "4"> 2010 </ p>
			</ Tr>
			<Tr>
				<Th pole = "F1" width = "50" align = "right"> 1st QRT. </ Th>
				<Th pole = "F2" width = "50" align = "right"> 2st QRT. </ Th>
				<Th pole = "F3" width = "50" align = "right"> 3st QRT. </ Th>
				<Th pole = "f4" width = "50" align = "right"> 4st QRT. </ Th>
				<Th pole = "f5" width = "50" align = "right"> 1st QRT. </ Th>
				<Th pole = "F6" width = "50" align = "right"> 2st QRT. </ Th>
				<Th pole = "F7" width = "50" align = "right"> 3st QRT. </ Th>
				<Th pole = "f8" width = "50" align = "right"> 4st QRT. </ Th>
			</ Tr>
		</ THEAD>
	</ Table>

Jak widać, siatka drzewa (TreeGrid korzystania) oraz sieci transmisji danych (DataGrid) ta sama. Proszę kliknąć na "zamrożone" w celu określenia właściwości mrożonych kolumny, kolumna "colspan 'i własności" rowspan' zdefiniować nagłówek wielu linii.

Pobierz przykłady jQuery EasyUI

jeasyui-tree-treegrid2.zip

Hot Tutorials

Contact US

Drzewo menu jQuery EasyUI - stworzenie rozbudowanej siatki drzewo
10/30