博客

jQWidgets jqxScheduler showLegend属性

  • Post category:jquery

当使用jQWidgets jqxScheduler插件创建调度器时，可以通过showLegend属性显示调度器的图例信息。showLegend属性能够允许用户自定义图例内容和显示。常用的图例内容包括：资源类型，预约类型等。

属性介绍

  • 属性名：showLegend
  • 类型：Boolean
  • 默认值：false
  • 描述：是否显示调度器图例，如果值为true，则会显示调度器图例。

属性用法

在调度器的初始化代码中，需要添加showLegend属性，示例代码如下：

$(document).ready(function () {
    //创建调度器实例
    $('#scheduler').jqxScheduler({
        //设置showLegend属性为true
        showLegend: true,
    });
});

接下来，我们需要为调度器设置图例。可以使用source属性来设置图例的数据源，并使用renderer属性指定图例的呈现方式。这里我们通过两个示例来演示如何设置调度器的showLegend属性。

示例1：基本设置

在这个示例中，我们首先需要添加一个列表，并设置其数据源。然后，我们使用renderer属性来指定列表的呈现方式。

$(document).ready(function () {
    var resources = [
        {id: 'calendar1', description: 'Calendar 1'},
        {id: 'calendar2', description: 'Calendar 2'}
    ];
    //设置调度器实例
    $('#scheduler').jqxScheduler({
        //设置showLegend为true
        showLegend: true,
        //设置图例的数据源
        resources: {
            colorScheme: 'scheme05',
            dataField: 'id',
            source: resources,
            //设置资源的展示名称
            displayField: 'description'
        },
        //自定义图例的呈现方式
        renderer: function (resource) {
            var label = resource.description;
            var color = this.resourcesSettings.colorScheme.colorScheme.color3;
            var html = '<div style="padding: 3px; margin-top: 5px;">' +
                '<span style="color: ' + color + '; background-color: white; padding: 2px; border: 1px solid ' + color + '">' +
                '<span class="jqx-icon-check"></span>' + label + '</span></div>';
            return html;
        }
    });
});

在这个示例中，我们使用renderer属性来自定义图例的呈现方式。在自定义的呈现方式中，我们通过设置span元素的样式和内容来展示图例。

示例2：高级设置

在这个示例中，我们将展示如何使用jQWidgets的部分样式库（themes）中的样式来自定义图例的呈现方式。

//加载jQWidgets的部分样式（themes）
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
$(document).ready(function () {
    var resources = [
        {id: 'calendar1', description: 'Calendar 1'},
        {id: 'calendar2', description: 'Calendar 2'}
    ];
    //设置调度器实例
    $('#scheduler').jqxScheduler({
        //设置showLegend为true
        showLegend: true,
        //设置图例的数据源
        resources: {
            colorScheme: 'scheme05',
            dataField: 'id',
            source: resources,
            //设置资源的展示名称
            displayField: 'description'
        },
        //自定义图例的呈现方式
        renderer: function (resource) {
            var label = resource.description;
            var color = this.resourcesSettings.colorScheme.colorScheme.color3;
            var html = '<div style="padding: 3px; margin-top: 5px;">' +
                '<span class="jqx-scheduler-legend-handled jqx-fill-state-normal" style="border: 0px;">' +
                '<span class="jqx-scheduler-legend-color-indicator jqx-fill-state-normal" style="background-color: ' + color + ';"></span>' +
                '<span class="jqx-scheduler-legend-label">' + label + '</span></span></div>';
            return html;
        }
    });
});

在这个示例中，我们使用了jQWidgets的一些CSS样式来设置图例的呈现方式。这些样式包括：jqx-scheduler-legend-handled、jqx-fill-state-normal、jqx-scheduler-legend-color-indicator等。这个示例的效果会更加美观。

Tags: