【EasyUI篇】PropertyGrid属性表格组件

微信公众号:程序yuan
关注可获得更多资源。问题或建议,请公众号留言;

查看--> 全套EasyUI示例目录

28.PropertyGrid属性表格组件

【EasyUI篇】PropertyGrid属性表格组件_第1张图片

【EasyUI篇】PropertyGrid属性表格组件_第2张图片

 

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    PropertyGrid
    
    
    
    
    
    
    
    
    
    



<%--class加载方式--%>
    <%----%>

    

    



JS文件

$(function () {

    $("#box").propertygrid({
        url:'http://localhost:8081/easyui/getProperties.action',
        showGroup:true,
        groupField:'name',
        groupFormatter:function (group,rows) {
            return "["+group+"]";
        }
    });

    $(document).click(function () {
        //折叠指定分组
        // $("#box").propertygrid('collapseGroup',0);
        //展示指定分组
        $("#box").propertygrid('expandGroup',0);

    });

});

POJO文件

package com.ooyhao.pojo;

import java.io.Serializable;

/**
 * @author ooyhao
 */
public class Property implements Serializable {

    private String name;
    private String value;
    private String group;
    private String editor;

    public Property() {
    }

    public Property(String name, String value, String group, String editor) {
        this.name = name;
        this.value = value;
        this.group = group;
        this.editor = editor;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public String getGroup() {
        return group;
    }

    public void setGroup(String group) {
        this.group = group;
    }

    public String getEditor() {
        return editor;
    }

    public void setEditor(String editor) {
        this.editor = editor;
    }

    @Override
    public String toString() {
        return "Property{" +
                "name='" + name + '\'' +
                ", value='" + value + '\'' +
                ", group='" + group + '\'' +
                ", editor='" + editor + '\'' +
                '}';
    }
}

Controller文件

@RequestMapping(value = "/getProperties")
@ResponseBody
public List getProperties(){
    List properties = new ArrayList<>();
    Property p1 = new Property();
    p1.setName("PHP版本");
    p1.setValue("5.4");
    p1.setGroup("系统信息");
    p1.setEditor("text");

    Property p2 = new Property();
    p2.setName("CPU核心");
    p2.setValue("双核四线程");
    p2.setGroup("系统信息");
    p2.setEditor("text");

    Property p3 = new Property();
    p3.setName("超级管理员");
    p3.setValue("Admin");
    p3.setGroup("管理信息");
    p3.setEditor("text");

    Property p4 = new Property();
    p4.setName("超级管理员");
    p4.setValue("*****");
    p4.setGroup("管理信息");
    p4.setEditor("text");

    properties.add(p1);
    properties.add(p2);
    properties.add(p3);
    properties.add(p4);
    return properties;
}

效果图

【EasyUI篇】PropertyGrid属性表格组件_第3张图片

 

 

 

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】PropertyGrid属性表格组件_第4张图片

 

 

 

 

 

你可能感兴趣的:(前端框架EasyUI)