微信公众号：程序yuan
关注可获得更多资源。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
28.PropertyGrid属性表格组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>PropertyGrid</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/PropertyGird.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<table id="box" class="easyui-propertygrid" style="width:300px;"
data-options="url:'http://localhost:8081/easyui/getProperties.action',showGroup:true,"
></table>--%>
<table id="box" style="width: 400px;">
</table>
</body>
</html>
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<Property> getProperties(){
List<Property> 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;
}
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
