jQuery EasyUI Rozszerzona - Dane Grid View
jQuery EasyUI Rozszerzony
Szczegółowy widok siatki danych (DataGrid DetailView)
zwyczaj
Krok 1: Tworzenie strony HTML
<Head>
<Script type = "text / javascript" src = "DataGrid-detailview.js"> </ script>
</ Head>
<Body>
<Id Tabela = "tt"> </ table>
</ Body>
Krok 2: Tworzenie siatki danych (DataGrid)
$ ( '# Tt "). DataGrid ({
Tytuł: "DataGrid - DetailView"
szerokość: 500,
wysokość: 250,
remoteSort: false,
singleSelect: prawda,
nowrap: false,
fitColumns: prawda,
url: 'datagrid_data.json "
kolumny: [[
{Pole: "itemid", tytuł: "Numer pozycji", szerokość: 80}
{Pole: "productid", tytuł: "Product ID", szerokość: 100, sortable: true}
{Pole: "ListPrice", tytuł: "Cena", szerokość: 80, align: "prawo", sortable: true},
{Pole: "unitcost", tytuł: "koszt jednostkowy, szerokość: 80, align:" prawo ", sortable: true}
{Pole: "attr1", tytuł: "Atrybut ', szerokość: 150, sortable: true}
{Pola: 'status', tytuł: "Stan", szerokość: 60, align: 'centrum'}
]]
Widok: detailview,
detailFormatter: function (rowIndex, rowData) {
Zwrot '<table> <tr>' +
'<Td rowspan = 2 style = "border: 0"> <img src = "images /' + rowData.itemid +" .png "style =" height: 50px; "> </ td> '+
'<Td style = "border: 0">' +
'<P> Atrybut:' + rowData.attr1 + "</ p> '+
'<P> Stan:' + rowData.status + "</ p> '+
'</ Td>' +
'</ Tr> </ table>';
}
});
nieruchomość
| 名称 |
类型 |
描述 |
默认值 |
| detailFormatter |
function(index,row) |
返回行明细内容的格式化函数。 |
|
wydarzenie
| 名称 |
参数 |
描述 |
| onExpandRow |
index,row |
当展开一行时触发。 |
| onCollapseRow |
index,row |
当折叠一行时触发。 |
sposób
| 名称 |
参数 |
描述 |
| fixDetailRowHeight |
index |
固定明细行的高度。 |
| getExpander |
index |
获取行扩展对象。 |
| getRowDetail |
index |
获取行明细容器。 |
| expandRow |
index |
展开一行。 |
| collapseRow |
index |
折叠一行。 |
Packet widoku siatki danych (DataGrid GroupView)
zwyczaj
Krok 1: Tworzenie strony HTML
<Head>
<Script type = "text / javascript" src = "DataGrid-groupview.js"> </ script>
</ Head>
<Body>
<Id Tabela = "tt"> </ table>
</ Body>
Krok 2: Tworzenie siatki danych (DataGrid)
$ ( '# Tt "). DataGrid ({
Tytuł: "DataGrid - GroupView"
szerokość: 500,
wysokość: 250,
rownumbers: prawda,
remoteSort: false,
nowrap: false,
fitColumns: prawda,
url: 'datagrid_data.json "
kolumny: [[
{Pole: "productid", tytuł: "Product ID", szerokość: 100, sortable: true}
{Pole: "ListPrice", tytuł: "Cena", szerokość: 80, align: "prawo", sortable: true},
{Pole: "unitcost", tytuł: "koszt jednostkowy, szerokość: 80, align:" prawo ", sortable: true}
{Pole: "attr1", tytuł: "Atrybut ', szerokość: 150, sortable: true}
{Pola: 'status', tytuł: "Stan", szerokość: 60, align: 'centrum'}
]]
groupField: "ProductId"
Widok: GroupView,
groupFormatter: function (value, wiersze) {
Wartość zwracana + '-' + rows.length + "produkt (ów) ';
}
});
nieruchomość
| 名称 |
类型 |
描述 |
默认 |
| groupField |
string |
指示要被分组的字段。 |
|
| groupFormatter |
function(value,rows) |
返回分组内容的格式化函数。
value 参数指示由 'groupField' 属性定义的分组值。
rows 参数根据指定分组值指示数据行。
|
|
sposób
| 名称 |
参数 |
描述 |
| expandGroup |
groupIndex |
展开一个分组。 |
| collapseGroup |
groupIndex |
折叠一个分组。 |
Widok danych Siatka buforowanie (DataGrid BufferView)
Krok 1: Zawiera plik 'DataGrid-bufferview.js'
<Head>
<Script type = "text / javascript" src = "DataGrid-bufferview.js"> </ script>
</ Head>
Krok 2: Tworzenie siatki danych (DataGrid)
<Table id = class "tt" = "easyui-DataGrid" style = "width: 700px; height: 250px"
title = "DataGrid - BufferView"
data-options = "url:" get_data.php 'Widok: bufferview, rownumbers: true, singleSelect: true, autoRowHeight: false, pageSize: 50 ">
<THEAD>
<Tr>
<Th pole = "inv" width = "80"> Inv Nie </ th>
<Th pole = "date" width = "100"> Data </ th>
<Th pole = "name" width = "80"> Nazwa </ th>
<Th pole = "ilość" width = "80" align = "right"> Ilość </ th>
<Th pole = "cena" width = "80" align = "right"> Cena </ th>
<Th pole = "koszt" width = "100" align = "right"> Koszt </ th>
<Pole Th = "note" width = "110"> Uwaga </ th>
</ Tr>
</ THEAD>
</ Table>
Dane Widok siatki wirtualnego przewijania (DataGrid VirtualScrollView)
Krok 1: Zawiera plik 'DataGrid-scrollview.js'
<Head>
<Script type = "text / javascript" src = "DataGrid-scrollview.js"> </ script>
</ Head>
Krok 2: Tworzenie siatki danych (DataGrid), aby przewinąć widoku wirtualnego
<Table id = class "tt" = "easyui-DataGrid" style = "width: 700px; height: 250px"
title = "DataGrid - VirtualScrollView"
data-options = "url:" get_data.php 'Widok: Scrollview, rownumbers: true, singleSelect: true, autoRowHeight: false, pageSize: 50 ">
<THEAD>
<Tr>
<Th pole = "inv" width = "80"> Inv Nie </ th>
<Th pole = "date" width = "100"> Data </ th>
<Th pole = "name" width = "80"> Nazwa </ th>
<Th pole = "ilość" width = "80" align = "right"> Ilość </ th>
<Th pole = "cena" width = "80" align = "right"> Cena </ th>
<Th pole = "koszt" width = "100" align = "right"> Koszt </ th>
<Pole Th = "note" width = "110"> Uwaga </ th>
</ Tr>
</ THEAD>
</ Table>
Pobierz przykłady jQuery EasyUI
jquery-easyui-datagridview.zip
jQuery EasyUI Rozszerzony