Index
The HT for Web
provides a property panel component that enhances the presentation and operation of the ht.widget.PropertyView
component, providing visual switching sorting, filtering, and grouping interface functions.
Using the property panel component requires the introduction of the ht.js
core library and the introduction of a ht-propertypane.js
property panel plug-in library.
ht.widget.PropertyPane
is a property panel class whose constructors can input ht.DataModel
object whose main configurable properties and functions are as follows:
getPropertyView
Gets ht.widget.PropertyView
objectgetToolbarHeight
and setToolbarHeight
Gets and sets the height of the toolbargetHeaderHeight
and setHeaderHeight
Gets and sets the height of the table headergetHeaderLabels
and setHeaderLabels
Gets and sets the content of the table header, such as setHeaderLabels(['attribute', 'value'])
getHeaderLabelColor
and setHeaderLabelColor
Gets and sets the color of the table headergetHeaderLabelFont
and setHeaderLabelFont
Gets and sets the text font of the table headergetHeaderLabelAlign
and setHeaderLabelAlign
Gets and sets the text align of the table header, the default is center
setCaseSensitive
and isCaseSensitive
Gets and sets whether the filter consider case, the default is false
getIndent
and setIndent
Gets and sets the indent of the toolbar imagegetSelectBackground
and setSelectBackground
Gets and sets the background of the toolbar buttongetCategoryIcon
and setCategoryIcon
Gets and sets toolbar grouping button iconsgetSortIcon
and setSortIcon
Gets and sets toolbar sort button iconsgetSortFunc
and setSortFunc
Gets and sets toolbar sort logic rulesaddProperties
Increase the attribute information in bulk, the function is the PropertyView#addProperties
packaging <!DOCTYPE html>
<html>
<head>
<title>PropertyPane</title>
<meta charset="UTF-8">
<style>
html, body {
padding: 0px;
margin: 0px;
}
.main {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
<script src="../../../../lib/core/ht.js"></script>
<script src="../../../../lib/plugin/ht-propertypane.js"></script>
<script>
function init(){
dataModel = new ht.DataModel();
tablePane = new ht.widget.TablePane(dataModel);
propertyPane = new ht.widget.PropertyPane(dataModel);
splitView = new ht.widget.SplitView(tablePane, propertyPane, 'h', 0.6);
view = splitView.getView();
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {
splitView.invalidate();
}, false);
var attributes = [
{
name: 'id',
displayName: 'Id'
},
{
name: 'superClass',
displayName: 'Super Class',
categoryName: 'Class',
getValue: function(data){
var superClass = data.getClass().superClass;
return superClass.getClassName ? superClass.getClassName() : 'Object';
}
},
{
name: 'className',
displayName: 'Class',
categoryName: 'Class'
},
{
name: '_image',
displayName: 'Image',
categoryName: 'Image',
accessType: 'field',
width: 110
},
{
name: 'icon',
displayName: 'icon',
categoryName: 'Image',
width: 120,
enum: {
values: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon'],
icons: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon']
}
}
];
tablePane.addColumns(attributes);
propertyPane.addProperties(attributes);
[ht.Data, ht.Node, ht.Edge, ht.Group, ht.Grid, ht.Shape, ht.SubGraph, ht.Grid].forEach(function(clazz){
data = new clazz();
dataModel.add(data);
});
dataModel.sm().ss(data);
}
</script>
</head>
<body onload="init();">
</body>
</html>