jQWidgets是一個 JavaScript 框架，用於為 PC 和移動設備製作基於 Web 的應用程序。它是一個非常強大、優化、獨立於平台且得到廣泛支持的框架。這jqxTreeMap用於顯示嵌套矩形的分層數據集。樹的每個分支都表示為一個矩形，然後用代表子分支的較小矩形進行平鋪。葉節點的矩形的麵積與數據上的指定維度成比例。
值會員屬性用於設置或返回值會員所述 jqxTreeMap 的。此外，此屬性定義了對象屬性的名稱，以便將其設置為樹形圖指定扇區的“值”。如果該名稱僅限於‘資源' 屬性。它是 String 類型，默認值為“”。
用法:
- 設置值會員屬性：
$("#jqxTreeMap").jqxTreeMap({ valueMember: 'value' });
- 返回值會員屬性：
var valueMember = $('#jqxTreeMap').jqxTreeMap('valueMember');
鏈接文件：下載jQWidgets從給定的鏈接。在 HTML 文件中，找到下載文件夾中的腳本文件。
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreemap.js”></script>
示例 1：下麵的示例說明了 jQWidgets jqxTreeMap值會員屬性。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css"/>
<script type="text/javascript"
src="scripts/jquery.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxtooltip.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxtreemap.js">
</script>
<script type="text/javascript"
src="scripts/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTreeMap valueMember property
</h3>
<div id="Tree_Map"></div>
<input type="button" style="margin: 28px;"
id="button_for_vm" value="click here" />
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
var Data_of_TreeMap = [{
label: 'GeeksforGeeks',
id: "1",
value: 70,
color: '#ff0300'
}, {
label: 'is a',
id: "2",
value: 10,
parent: 'GeeksforGeeks',
color: '#ff5400'
}, {
label: 'Computer Science',
id: "3",
value: 30,
parent: 'GeeksforGeeks',
color: '#008000'
}, {
label: 'Portal.',
id: "4",
value: 15,
parent: 'GeeksforGeeks',
color: '#7fbf00'
}
];
var src =
{
datatype: "json",
datafields: [
{
name: 'id'
},
{
name: 'parent'
},
{
name: 'label'
},
{
name: 'value'
}
],
id: 'id',
localdata: Data_of_TreeMap
};
var da = new $.jqx.dataAdapter(src);
$('#Tree_Map').jqxTreeMap({
width: 390,
height: 200,
source: Data_of_TreeMap,
displayMember: 'label',
valueMember: 'value'
});
$("#button_for_vm").jqxButton({
width: 300
});
$("#button_for_vm").click(
function () {
var vm =
$('#Tree_Map').jqxTreeMap('valueMember');
$("#log").html(vm);
});
});
</script>
</center>
</body>
</html>輸出：
示例 2：下麵是jQWidgets jqxTreeMap的另一個例子值會員 屬性。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css"/>
<script type="text/javascript"
src="scripts/jquery.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxtooltip.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxtreemap.js">
</script>
<script type="text/javascript"
src="scripts/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTreeMap valueMember property
</h3>
<div id="Tree_Map"></div>
<input type="button" style="margin: 28px;"
id="button_for_vm" value="click here" />
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
var Data_of_TreeMap = [{
label: 'GeeksforGeeks',
id: "1",
value: 70,
color: '#ff0300'
}, {
label: 'is a',
id: "2",
value: 10,
parent: 'GeeksforGeeks',
color: '#ff5400'
}, {
label: 'Computer Science',
id: "3",
value: 30,
parent: 'GeeksforGeeks',
color: '#008000'
}, {
label: 'Portal.',
id: "4",
value: 15,
parent: 'GeeksforGeeks',
color: '#7fbf00'
}
];
var src =
{
datatype: "json",
datafields: [
{
name: 'id'
},
{
name: 'parent'
},
{
name: 'label'
},
{
name: 'value'
}
],
id: 'id',
localdata: Data_of_TreeMap
};
var da = new $.jqx.dataAdapter(src);
$('#Tree_Map').jqxTreeMap({
width: 390,
height: 200,
source: Data_of_TreeMap,
displayMember: 'label',
valueMember: 'value'
});
$("#button_for_vm").jqxButton({
width: 300
});
$("#button_for_vm").click(
function () {
var vm =
$('#Tree_Map').jqxTreeMap('valueMember');
if (vm === null) {
$('#log').text("Null!");
}
else {
$('#log').text("Not null!");
}
});
});
</script>
</center>
</body>
</html>輸出：
相關用法
- jQWidgets jqxTreeMap height屬性用法及代碼示例
- jQWidgets jqxTreeMap width屬性用法及代碼示例
- jQWidgets jqxTreeMap renderCallbacks屬性用法及代碼示例
- jQWidgets jqxTreeMap legendScaleCallback屬性用法及代碼示例
- jQWidgets jqxTreeMap baseColor屬性用法及代碼示例
- jQWidgets jqxTreeMap legendPosition屬性用法及代碼示例
- jQWidgets jqxTreeMap colorRange屬性用法及代碼示例
- jQWidgets jqxTreeMap theme屬性用法及代碼示例
- jQWidgets jqxTreeMap render()用法及代碼示例
- jQWidgets jqxTreeMap source屬性用法及代碼示例
- jQWidgets jqxTreeMap headerHeight屬性用法及代碼示例
- jQWidgets jqxTreeMap colorRanges屬性用法及代碼示例
- jQWidgets jqxTreeMap hoverEnabled屬性用法及代碼示例
- jQWidgets jqxTreeMap showLegend屬性用法及代碼示例
- jQWidgets jqxTreeMap colorMode屬性用法及代碼示例
- jQWidgets jqxTreeMap selectionEnabled屬性用法及代碼示例
- jQWidgets jqxTreeGrid aggregatesHeight屬性用法及代碼示例
- jQWidgets jqxTree collapseItem()用法及代碼示例
- jQWidgets jqxTree allowDrop屬性用法及代碼示例
- jQWidgets jqxTree refresh()用法及代碼示例
- jQWidgets jqxTreeGrid rowDetailsRenderer屬性用法及代碼示例
- jQWidgets jqxTree enableItem()用法及代碼示例
- jQWidgets jqxTree ensureVisible()用法及代碼示例
- jQWidgets jqxTree uncheckAll()用法及代碼示例
- jQWidgets jqxTreeGrid columnsReorder屬性用法及代碼示例
注：本文由純淨天空篩選整理自nidhi1352singh大神的英文原創作品 jQWidgets jqxTreeMap valueMember Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。