jQuery EasyUI Complemento de cuadrícula de datos y árbol -Propertygrid Cuadrícula de propiedades

jQuery EasyUI 插件Complementos de jQuery EasyUI

Extendido de $.fn.datagrid.defaults. Mediante $.fn.propertygrid.defaults se sobrescriben los defaults predeterminados.

La cuadrícula de propiedades (propertygrid) proporciona a los usuarios una interfaz para explorar y editar las propiedades de objetos. La cuadrícula de propiedades es una cuadrícula de datos con edición en línea. Es bastante fácil de usar. Los usuarios pueden crear fácilmente una lista jerárquica de propiedades editables y elementos que representan cualquier tipo de datos. La cuadrícula de propiedades incluye funciones incorporadas de clasificación y agrupación.

Dependencias

  • datagrid

Uso

Cree una cuadrícula de propiedades (propertygrid) en el marcado. Tenga en cuenta que las columnas están integradas y no necesitan declararse de nuevo.

<table id="pg" class="easyui-propertygrid" style="width:300px"
    data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

Cree una cuadrícula de propiedades (propertygrid) usando JavaScript.

<table id="pg" style="width:300px"></table>

$('#pg').propertygrid({
    url: 'get_data.php',
    showGroup: true,
    scrollbarSize: 0
});

Agregue una nueva fila a la cuadrícula de propiedades (propertygrid).

var row = {
    name:'AddName',
    value:'',
    group:'Marketing Settings',
    editor:'text'
};
$('#pg').propertygrid('appendRow',row);

Datos de fila (Row Data)

La cuadrícula de propiedades (propertygrid) se extiende desde la cuadrícula de datos (datagrid). Su formato de datos de fila es el mismo que el de la cuadrícula de datos (datagrid). Como fila de propiedades, los siguientes campos son obligatorios:
name: nombre del campo.
value: valor del campo que se va a editar.
group: valor del campo del grupo.
editor: el editor para editar el valor de la propiedad.

Ejemplo de datos de fila:

{"total":4,"rows":[
    {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
    {"name":"Address","value":"","group":"ID Settings","editor":"text"},
    {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
    {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
        "type":"validatebox",
        "options":{
            "validType":"email"
        }
    }}
]}

Propiedades

Estas propiedades se extienden desde la cuadrícula de datos (datagrid). A continuación se muestran las propiedades agregadas para la cuadrícula de propiedades (propertygrid).

Nombre Tipo Descripción Valor predeterminado
showGroup boolean Define si se muestra el grupo de propiedades. false
groupField string Define el nombre del campo del grupo. group
groupFormatter function(group,rows) Define cómo formatear el valor del grupo. Esta función incluye los siguientes parámetros:
group: nombre del campo del grupo.
rows: filas que pertenecen al grupo.

Métodos

Estos métodos se extienden desde la cuadrícula de datos (datagrid). A continuación se muestran los métodos agregados para la cuadrícula de propiedades (propertygrid).

Nombre Parámetros Descripción
expandGroup groupIndex Expande el grupo especificado. Si el parámetro 'groupIndex' no está asignado, expande todos los grupos.
collapseGroup groupIndex Contrae el grupo especificado. Si el parámetro 'groupIndex' no está asignado, contrae todos los grupos.
jQuery EasyUI 插件Complementos de jQuery EasyUI Otras extensiones