Расширение jQuery EasyUI -Представление DataGrid

jQuery EasyUI 扩展Расширение jQuery EasyUI

Детальное представление DataGrid

Использование

Шаг 1: Создайте HTML-страницу

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

Шаг 2: Создайте DataGrid

    $('#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>';
        }
    });

Свойства

Name Type Описание Значение по умолчанию
detailFormatter function(index,row) Функция форматирования, которая возвращает содержимое детализации строки.

Events

Name Parameters Описание
onExpandRow index,row Срабатывает при развёртывании строки.
onCollapseRow index,row Срабатывает при сворачивании строки.

Методы

Name Parameters Описание
fixDetailRowHeight index Фиксирует высоту строки детализации.
getExpander index Объект развёртывания строки.
getRowDetail index Получить контейнер детализации строки.
expandRow index Развернуть строку.
collapseRow index Свернуть строку.

DataGrid GroupView

Использование

Шаг 1: Создайте HTML-страницу

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

Шаг 2: Создайте DataGrid

    $('#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)';
        }
    });

Свойства

Name Type Описание Default
groupField string Указывает поле для группировки.
groupFormatter function(value,rows) Функция форматирования, возвращающая содержимое группы.
Параметр value указывает значение группы, определённое свойством 'groupField'.
Параметр rows указывает строки данных в соответствии с указанным значением группы.

Методы

Name Parameters Описание
expandGroup groupIndex Развернуть группу.
collapseGroup groupIndex Свернуть группу.

DataGrid BufferView

Шаг 1: Подключите файл 'datagrid-bufferview.js'

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

Шаг 2: Создайте DataGrid

    <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

Шаг 1: Подключите файл 'datagrid-scrollview.js'

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

Шаг 2: Создайте DataGrid с виртуальным представлением прокрутки

    <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

jquery-easyui-datagridview.zip

jQuery EasyUI 扩展Расширение jQuery EasyUI Другие расширения