jQWidgets jqxTreeMap selectionEnabled属性 - BBSMAP

jQWidgets jqxTreeMap selectionEnabled属性

Post published:2023年5月12日
Post category:jquery

当使用jQWidgets jqxTreeMap时，可以通过selectionEnabled属性来设置是否允许选中节点。该属性值为布尔型，当设置为true时，用户可以通过鼠标或触摸屏幕选中节点；当设置为false时，用户无法选中节点。

在使用jQWidgets jqxTreeMap时，可以通过以下代码来设置selectionEnabled属性：

$("#jqxTreeMap").jqxTreeMap({
    selectionEnabled: true // or false
});

以下是两个使用selectionEnabled属性的示例：

示例一

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTreeMap demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css"/>
</head>
<body>
    <div id="jqxTreeMap" style="width: 600px; height: 400px;"></div>
    <script>
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'value' }
            ],
            id: 'id',
            localdata: [
                { id: '1', parentid: '0', text: '北部地区', value: 200 },
                { id: '2', parentid: '0', text: '南部地区', value: 300 },
                { id: '3', parentid: '1', text: '北京', value: 100 },
                { id: '4', parentid: '1', text: '上海', value: 50 },
                { id: '5', parentid: '2', text: '广东', value: 150 },
                { id: '6', parentid: '2', text: '福建', value: 100 }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxTreeMap").jqxTreeMap({
            source: dataAdapter,
            selectionEnabled: true,
            colorRange: 20
        });
    </script>
</body>
</html>

在上面的示例中，我们设置了selectionEnabled属性为true，并且可以通过鼠标或触摸屏幕选中节点。

示例二

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTreeMap demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css"/>
</head>
<body>
    <div id="jqxTreeMap" style="width: 600px; height: 400px;"></div>
    <script>
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'value' }
            ],
            id: 'id',
            localdata: [
                { id: '1', parentid: '0', text: '北部地区', value: 200 },
                { id: '2', parentid: '0', text: '南部地区', value: 300 },
                { id: '3', parentid: '1', text: '北京', value: 100 },
                { id: '4', parentid: '1', text: '上海', value: 50 },
                { id: '5', parentid: '2', text: '广东', value: 150 },
                { id: '6', parentid: '2', text: '福建', value: 100 }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxTreeMap").jqxTreeMap({
            source: dataAdapter,
            selectionEnabled: false,
            colorRange: 20
        });
    </script>
</body>
</html>

在上面的示例中，我们设置了selectionEnabled属性为false，用户无法通过鼠标或触摸屏幕选中节点。

Tags: jquery