jQuery EasyUI ขยาย - ดูตารางข้อมูล
jQuery EasyUI ขยาย
ดูรายละเอียดของตารางข้อมูล (DataGrid DetailView)
การใช้
ขั้นตอนที่ 1: สร้างหน้าเว็บ HTML
<head>
<ชนิด Script = "text / javascript ของ" src = "DataGrid-detailview.js"> </ script>
</ head>
<body>
<table id = "TT"> </ table>
</ body>
ขั้นตอนที่ 2: สร้างตารางข้อมูล (DataGrid)
$ ( '# Tt'). Datagrid ({
ชื่อเรื่อง: 'DataGrid - DetailView'
ความกว้าง: 500
ความสูง: 250
remoteSort: เท็จ
singleSelect: จริง
nowrap: เท็จ
fitColumns: จริง
URL: 'datagrid_data.json'
คอลัมน์: [[
{ฟิลด์: 'Itemid' ชื่อเรื่อง: "รหัสรายการ" ความกว้าง: 80}
{ฟิลด์: 'ProductID' ชื่อเรื่อง: 'รหัสสินค้า' ความกว้าง: 100 จัดเรียง: จริง}
{ฟิลด์: 'listprice' ชื่อเรื่อง: 'ราคา' ความกว้าง: 80 จัด: 'ขวา', จัดเรียง: จริง}
{ฟิลด์: 'unitcost' ชื่อเรื่อง: 'หน่วยต้นทุน' ความกว้าง: 80 จัด: 'ขวา', จัดเรียง: จริง}
{ฟิลด์: 'ATTR1' ชื่อเรื่อง: 'แอตทริบิวต์', ความกว้าง: 150, จัดเรียง: จริง}
{ฟิลด์: 'สถานะ' ชื่อเรื่อง: 'สถานะ', ความกว้าง: 60 จัด: 'ศูนย์'}
]]
มุมมอง: DetailView,
detailFormatter: ฟังก์ชั่น (rowIndex, rowData) {
ผลตอบแทน '<table> <tr>' +
'<td rowspan = 2 style = "border: 0"> <img src = "images / + rowData.itemid +' .png" style = "height: 50px;"> </ td> '+
'<td style = "border: 0"> "+
'<p> แอตทริบิวต์:' + rowData.attr1 + '</ p>' +
'<p> สถานะ:' + rowData.status + '</ p>' +
'</ td>' +
'</ tr> </ table>';
}
});
คุณสมบัติ
| 名称 |
类型 |
描述 |
默认值 |
| detailFormatter |
function(index,row) |
返回行明细内容的格式化函数。 |
|
เหตุการณ์
| 名称 |
参数 |
描述 |
| onExpandRow |
index,row |
当展开一行时触发。 |
| onCollapseRow |
index,row |
当折叠一行时触发。 |
ทาง
| 名称 |
参数 |
描述 |
| fixDetailRowHeight |
index |
固定明细行的高度。 |
| getExpander |
index |
获取行扩展对象。 |
| getRowDetail |
index |
获取行明细容器。 |
| expandRow |
index |
展开一行。 |
| collapseRow |
index |
折叠一行。 |
แพ็คเก็ตดูตารางข้อมูล (DataGrid GroupView)
การใช้
ขั้นตอนที่ 1: สร้างหน้าเว็บ HTML
<head>
<ชนิด Script = "text / javascript ของ" src = "DataGrid-groupview.js"> </ script>
</ head>
<body>
<table id = "TT"> </ table>
</ body>
ขั้นตอนที่ 2: สร้างตารางข้อมูล (DataGrid)
$ ( '# Tt'). Datagrid ({
ชื่อเรื่อง: 'DataGrid - GroupView'
ความกว้าง: 500
ความสูง: 250
rownumbers: จริง
remoteSort: เท็จ
nowrap: เท็จ
fitColumns: จริง
URL: 'datagrid_data.json'
คอลัมน์: [[
{ฟิลด์: 'ProductID' ชื่อเรื่อง: 'รหัสสินค้า' ความกว้าง: 100 จัดเรียง: จริง}
{ฟิลด์: 'listprice' ชื่อเรื่อง: 'ราคา' ความกว้าง: 80 จัด: 'ขวา', จัดเรียง: จริง}
{ฟิลด์: 'unitcost' ชื่อเรื่อง: 'หน่วยต้นทุน' ความกว้าง: 80 จัด: 'ขวา', จัดเรียง: จริง}
{ฟิลด์: 'ATTR1' ชื่อเรื่อง: 'แอตทริบิวต์', ความกว้าง: 150, จัดเรียง: จริง}
{ฟิลด์: 'สถานะ' ชื่อเรื่อง: 'สถานะ', ความกว้าง: 60 จัด: 'ศูนย์'}
]]
groupField: 'ProductID'
มุมมอง: groupview,
groupFormatter: ฟังก์ชั่น (ค่าแถว) {
ผลตอบแทนที่คุ้มค่า + '-' + rows.length + 'รายการ (s)';
}
});
คุณสมบัติ
| 名称 |
类型 |
描述 |
默认 |
| groupField |
string |
指示要被分组的字段。 |
|
| groupFormatter |
function(value,rows) |
返回分组内容的格式化函数。
value 参数指示由 'groupField' 属性定义的分组值。
rows 参数根据指定分组值指示数据行。
|
|
ทาง
| 名称 |
参数 |
描述 |
| expandGroup |
groupIndex |
展开一个分组。 |
| collapseGroup |
groupIndex |
折叠一个分组。 |
ตารางข้อมูลแคช View (DataGrid BufferView)
ขั้นตอนที่ 1: มีไฟล์ 'DataGrid-bufferview.js'
<head>
<ชนิด Script = "text / javascript ของ" src = "DataGrid-bufferview.js"> </ script>
</ head>
ขั้นตอนที่ 2: สร้างตารางข้อมูล (DataGrid)
<table id = "TT" class = "easyui-DataGrid" style = "width: 700px; ความสูง: 250px"
title = "DataGrid - BufferView"
ข้อมูลตัวเลือก = "URL: 'get_data.php' View: bufferview, rownumbers: จริง singleSelect: จริง autoRowHeight: เท็จ PageSize: 50">
<thead>
<tr>
<Th ฟิลด์ = "Inv" width = "80"> Inv ไม่มี </ TH>
<Th ฟิลด์ = "วันที่" width = "100"> วันที่ </ TH>
<Th ฟิลด์ = "ชื่อ" width = "80"> ชื่อ </ TH>
<Th ฟิลด์ = "จำนวน" width = "80" align = "สิทธิ"> จำนวน </ TH>
<Th ฟิลด์ = "ราคา" width = "80" align = "สิทธิ"> ราคา </ TH>
<Th ฟิลด์ = "ค่าใช้จ่าย" width = "100" align = "สิทธิ"> ค่าใช้จ่าย </ TH>
<ฟิลด์ Th = "ทราบ" width = "110"> หมายเหตุ </ TH>
</ tr>
</ thead>
</ table>
ตารางข้อมูลมุมมองเลื่อนเสมือน (DataGrid VirtualScrollView)
ขั้นตอนที่ 1: มีไฟล์ 'DataGrid-scrollview.js'
<head>
<ชนิด Script = "text / javascript ของ" src = "DataGrid-scrollview.js"> </ script>
</ head>
ขั้นตอนที่ 2: สร้างตารางข้อมูล (DataGrid) เพื่อเลื่อนผ่านมุมมองเสมือน
<table id = "TT" class = "easyui-DataGrid" style = "width: 700px; ความสูง: 250px"
title = "DataGrid - VirtualScrollView"
ข้อมูลตัวเลือก = "URL: 'get_data.php' View: scrollview, rownumbers: จริง singleSelect: จริง autoRowHeight: เท็จ PageSize: 50">
<thead>
<tr>
<Th ฟิลด์ = "Inv" width = "80"> Inv ไม่มี </ TH>
<Th ฟิลด์ = "วันที่" width = "100"> วันที่ </ TH>
<Th ฟิลด์ = "ชื่อ" width = "80"> ชื่อ </ TH>
<Th ฟิลด์ = "จำนวน" width = "80" align = "สิทธิ"> จำนวน </ TH>
<Th ฟิลด์ = "ราคา" width = "80" align = "สิทธิ"> ราคา </ TH>
<Th ฟิลด์ = "ค่าใช้จ่าย" width = "100" align = "สิทธิ"> ค่าใช้จ่าย </ TH>
<ฟิลด์ Th = "ทราบ" width = "110"> หมายเหตุ </ TH>
</ tr>
</ thead>
</ table>
ดาวน์โหลดตัวอย่าง jQuery EasyUI
jquery-easyui-datagridview.zip
jQuery EasyUI ขยาย