jQuery EasyUI-Erweiterung -DataGrid View

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung

DataGrid DetailView

Nutzung

Schritt 1: Eine HTML-Seite erstellen

    <head>
        <script type="text/javascript" src="datagrid-detailview.js.html"></script>
    </head>
    <body>
        <table id="tt"></table>
    </body>

Schritt 2: Ein DataGrid erstellen

    $('#tt').datagrid({
        title:'DataGrid - DetailView',
        width:500,
        height:250,
        remoteSort:false,
        singleSelect:true,
        nowrap:false,
        fitColumns:true,
        url:'datagrid_data.json',
        columns:[[
            {field:'itemid',title:'Item ID',width:80},
            {field:'productid',title:'Product ID',width:100,sortable:true},
            {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
            {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
            {field:'attr1',title:'Attribute',width:150,sortable:true},
            {field:'status',title:'Status',width:60,align:'center'}
        ]],
        view: detailview,
        detailFormatter: function(rowIndex, rowData){
            return '<table><tr>' +
                    '<td rowspan=2 style="border:0"><img src="images/index.html' + rowData.itemid + '.png" style="height:50px;"></td>' +
                    '<td style="border:0">' +
                    '<p>Attribute: ' + rowData.attr1 + '</p>' +
                    '<p>Status: ' + rowData.status + '</p>' +
                    '</td>' +
                    '</tr></table>';
        }
    });

Eigenschaften

Name Type Beschreibung Standardwert
detailFormatter function(index,row) Eine Formatierungsfunktion, die den Detailinhalt einer Zeile zurückgibt.

Ereignisse

Name Parameters Beschreibung
onExpandRow index,row Wird ausgelöst, wenn eine Zeile erweitert wird.
onCollapseRow index,row Wird ausgelöst, wenn eine Zeile eingeklappt wird.

Methoden

Name Parameters Beschreibung
fixDetailRowHeight index Die Höhe der Detailzeile korrigieren.
getExpander index Das Zeilenerweiterungsobjekt abrufen.
getRowDetail index Ruft den Container für Zeilendetails ab.
expandRow index Eine Zeile erweitern.
collapseRow index Eine Zeile einklappen.

DataGrid GroupView

Nutzung

Schritt 1: Eine HTML-Seite erstellen

    <head>
        <script type="text/javascript" src="datagrid-groupview.js.html"></script>
    </head>
    <body>
        <table id="tt"></table>
    </body>

Schritt 2: Ein DataGrid erstellen

    $('#tt').datagrid({
        title:'DataGrid - GroupView',
        width:500,
        height:250,
        rownumbers:true,
        remoteSort:false,
        nowrap:false,
        fitColumns:true,
        url:'datagrid_data.json',
        columns:[[
            {field:'productid',title:'Product ID',width:100,sortable:true},
            {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
            {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
            {field:'attr1',title:'Attribute',width:150,sortable:true},
            {field:'status',title:'Status',width:60,align:'center'}
        ]],
        groupField:'productid',
        view: groupview,
        groupFormatter:function(value, rows){
            return value + ' - ' + rows.length + ' Item(s)';
        }
    });

Eigenschaften

Name Type Beschreibung Standard
groupField string Gibt das Feld an, das gruppiert werden soll.
groupFormatter function(value,rows) Eine Formatierungsfunktion, die den Gruppeninhalt zurückgibt.
Der Parameter value gibt den Gruppenwert an, der durch die Eigenschaft 'groupField' definiert wird.
Der Parameter rows gibt die Datenzeilen gemäß dem angegebenen Gruppenwert an.

Methoden

Name Parameters Beschreibung
expandGroup groupIndex Eine Gruppe aufklappen.
collapseGroup groupIndex Eine Gruppe zuklappen.

DataGrid BufferView

Schritt 1: Die Datei 'datagrid-bufferview.js' einbinden

    <head>
        <script type="text/javascript" src="datagrid-bufferview.js.html"></script>
    </head>

Schritt 2: Ein DataGrid erstellen

    <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
            title="DataGrid - BufferView" 
            data-options="url:'get_data.php',view:bufferview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>

DataGrid VirtualScrollView

Schritt 1: Die Datei 'datagrid-scrollview.js' einbinden

    <head>
        <script type="text/javascript" src="datagrid-scrollview.js.html"></script>
    </head>

Schritt 2: Ein DataGrid mit der virtuellen Scroll-Ansicht erstellen

    <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
            title="DataGrid - VirtualScrollView"
            data-options="url:'get_data.php',view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>

jQuery EasyUI-Beispiele herunterladen

jquery-easyui-datagridview.zip

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung Weitere Erweiterungen