Extensión de jQuery EasyUI -Vista de DataGrid (DataGrid View)

jQuery EasyUI 扩展Extensión de jQuery EasyUI

Vista de detalle de DataGrid (DataGrid DetailView)

Uso

Paso 1: Crear una página HTML

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

Paso 2: Crear un 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>';
        }
    });

Propiedades

Nombre Tipo Descripción Valor por defecto
detailFormatter function(index,row) Función de formato que devuelve el contenido de detalle de la fila.

Eventos

Nombre Parámetros Descripción
onExpandRow index,row Se activa al expandir una fila.
onCollapseRow index,row Se activa al contraer una fila.

Métodos

Nombre Parámetros Descripción
fixDetailRowHeight index Fija la altura de la fila de detalle.
getExpander index Obtiene el objeto de expansión de la fila.
getRowDetail index Obtiene el contenedor de detalle de la fila.
expandRow index Expande una fila.
collapseRow index Contrae una fila.

Vista de agrupación de DataGrid (DataGrid GroupView)

Uso

Paso 1: Crear una página HTML

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

Paso 2: Crear un 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)';
        }
    });

Propiedades

Nombre Tipo Descripción Por defecto
groupField string Indica el campo que se va a agrupar.
groupFormatter function(value,rows) Función de formato que devuelve el contenido del grupo.
El parámetro value indica el valor del grupo definido por la propiedad 'groupField'.
El parámetro rows indica las filas de datos según el valor del grupo especificado.

Métodos

Nombre Parámetros Descripción
expandGroup groupIndex Expande un grupo.
collapseGroup groupIndex Contrae un grupo.

Vista de búfer de DataGrid (DataGrid BufferView)

Paso 1: Incluir el archivo 'datagrid-bufferview.js'

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

Paso 2: Crear un 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>

Vista de desplazamiento virtual de DataGrid (DataGrid VirtualScrollView)

Paso 1: Incluir el archivo 'datagrid-scrollview.js'

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

Paso 2: Crear un DataGrid con la vista de desplazamiento virtual

    <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>

Descargar ejemplos de jQuery EasyUI

jquery-easyui-datagridview.zip

jQuery EasyUI 扩展Extensión de jQuery EasyUI Otras extensiones