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 centersetCaseSensitive and isCaseSensitive Gets and sets whether the filter consider case, the default is falsegetIndent 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>