第三十五章： PropertyGird（屬性表格）組件
學習要點：
- 加載方式
- 屬性列表
- 方法列表
一、加載方式
1.class加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<style>
.textbox{
height:200px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<table class="easyui-propertygrid" data-options="url:'property.json'" style="width:300px;"></table>
</body>
</html>
//property.json
[[
{
"name":"PHP 版本";
"value":"5.4";
"group":"系統信息";
"editor":"text";
}
{
"name":"CPU 核心";
"value":"雙核四線程";
"group":"系統信息";
"editor":"text";
}
{
"name":"超級管理員";
"value":"Admin";
"group":"管理信息";
"editor":"text";
}
{
"name":"管理密碼";
"value":"******";
"group":"管理信息";
"editor":"text";
}
]]
2.JS調用加載：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<style>
.textbox{
height:200px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<input id="box" name="box">
</body>
</html>
$(function(){
$('#box').propertygrid({
url:'property.json',
});
});
//property.json
[[
{
"name":"PHP 版本";
"value":"5.4";
"group":"系統信息";
"editor":"text";
}
{
"name":"CPU 核心";
"value":"雙核四線程";
"group":"系統信息";
"editor":"text";
}
{
"name":"超級管理員";
"value":"Admin";
"group":"管理信息";
"editor":"text";
}
{
"name":"管理密碼";
"value":"******";
"group":"管理信息";
"editor":"text";
}
]]
屬性表格擴展自datagrid（數據表格）。他的行數據格式和數據表格相同。作爲一個 屬性行，以下字段是必須的：
- name：字段名稱。
- value：字段值。
- group：分組字段值。
- editor：在編輯屬性值的時候使用的編輯器對象。
二、屬性列表
屬性表格的屬性擴展自dataGrid（數據表格），屬性表格的新增的屬性如下：
| propertyGrid屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| showGroup | boolean | 定義是否想顯示屬性分組，默認值：false。 |
| groupField | string | 定義分組的字段名，默認值爲group。 |
| groupFormatter | function(group,rows) | 定義如何格式化分組的值，該函數擁有如下參數：group：分組字段值。rows：屬於該分組的所有行。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<style>
.textbox{
height:200px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<input id="box" name="box">
</body>
</html>
$(function(){
$('#box').propertygrid({
url:'property.json',
showGroup:true,
groupField:'group1',
groupFormatter:function(group,rows){
return '['+ group +']';
},
});
});
//property.json
[[
{
"name":"PHP 版本";
"value":"5.4";
"group":"系統信息";
"editor":"text";
}
{
"name":"CPU 核心";
"value":"雙核四線程";
"group":"系統信息";
"editor":"text";
}
{
"name":"超級管理員";
"value":"Admin";
"group":"管理信息";
"editor":"text";
}
{
"name":"管理密碼";
"value":"******";
"group":"管理信息";
"editor":"text";
}
]]
三、方法列表
| propertyGrid方法 | ||
|---|---|---|
| 方法名 | 參數 | 說明 |
| expandGroup | groupIndex | 展開指定分組。如果'groupIndex'未指定，則展開所有分組。 |
| collapseGroup | groupIndex | 摺疊指定分組。如果'groupIndex'未指定，則摺疊所有分組。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<style>
.textbox{
height:200px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<input id="box" name="box">
<input type="button" vlaue="按鈕" οnclick="abc(),">
</body>
</html>
$(function(){
$('#box').propertygrid({
url:'property.json',
showGroup:true,
groupField:'group1',
groupFormatter:function(group,rows){
return '['+ group +']';
},
});
});
function abc(){
//$('#box').propertygrid('collapseGroup');
$('#box').propertygrid('collapseGroup',0);
}
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103718264
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載