自定义 JQuery UI Dashboard 插件

Posted 2023-03-22

【中文标题】自定义 JQuery UI Dashboard 插件

【英文标题】：Customized JQuery UI Dashboard plugin

【发布时间】：2012-03-08 03:38:00

【问题描述】：

我正在尝试为我的应用程序使用 jquery 仪表板插件。我已经看到了 http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html 中记录的插件。

这是一个很好的插件，但我的要求有点不同。我只想进行 1 次服务器调用并获取仪表板各个小部件所需的数据。我们将在仪表板中使用大量小部件 [基本上是图表]，因此我们认为我们可以通过调用一次服务器来获取每个小部件所需的配置和数据来提高性能。我提到的链接，加载后的小部件会单独调用以从服务器获取数据。

是否有任何这样的 Jquery 仪表板插件可以满足我的要求。任何指向此类的指针也将非常有帮助。

谢谢， 阿尼尔班

【参考方案1】：

所以这是我所做的解决方案！

我使用了与http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html 中相同的插件。

我采取的方法：

1) 单独调用服务器以从服务器获取所有数据。我所做的服务器上的模型，它一次性返回图表所需的数据：我的模型看起来像这样：

public class DashboardWidget


    public DashboardWidget()
    
        open = "true";
    

    public string open  get; set; 
    public string title  get; set; 
    public string id  get; set; 
    public string column  get; set;         
    public string url  get; set; 
    public object data  get; set; 
    public string chartype  get; set; 

1)仪表板应该只负责创建小部件。所以所有对服务器的 json 调用都被删除了。 Dashboard 只负责创建小部件，不负责其他任何事情。

2)创建了一个单独的框架，它只负责将内容附加到已经创建的 div [由仪表板创建]

这里是 Jquery 代码：

  function CreateAndInitDashboard(jsonUrl, div) 

    var startId = 100;
    $.ajax(
        url: jsonUrl,
        context: document.body,
        success: function (data) 

            var dashboard = div.dashboard(
                // layout class is used to make it possible to switch layouts
                layoutClass: 'layout',
                // feed for the widgets which are on the dashboard when opened   

                layouts:
          [
             title: "Layout1",
                id: "layout1",
                image: "/layouts/layout1.png",
                html: '<div class="layout layout-a"><div class="column first column-first"></div></div>',
                classname: 'layout-a'
            ,
             title: "Layout2",
                id: "layout2",
                image: "/layouts/layout2.png",
                html: '<div class="layout layout-aa"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-aa'
            ,
             title: "Layout3",
                id: "layout3",
                image: "layouts/layout3.png",
                html: '<div class="layout layout-ba"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-ba'
            ,
             title: "Layout4",
                id: "layout4",
                image: "/layouts/layout4.png",
                html: '<div class="layout layout-ab"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-ab'
            ,
             title: "Layout5",
                id: "layout5",
                image: "/layouts/layout5.png",
                html: '<div class="layout layout-aaa"><div class="column first column-first"></div><div class="column second column-second"></div><div class="column third column-third"></div></div>',
                classname: 'layout-aaa'
            
          ]

            ); // end dashboard call

            dashboard.init(data.result); // passing the data to the dashboard !!! 

            $(data.result.data).each(function () 

                var element = this.id;
                if (this.chartype == 'PIE') 
                    $('#' + element + ' .widgetcontent').kendoChart(
                        title:  text: "" ,
                        dataSource: this.data,
                        //chartArea:  background: "" ,
                        legend:  position: "top" ,
                        seriesDefaults:  type: "pie" ,
                        series: [
                            field: "ExposedLimit",
                            categoryField: "BusinessUnitName"
                        ],
                        tooltip: 
                            visible: true,
                            format: "0:N0"
                        
                    );
                
                else if (this.chartype == 'BAR') 
                    $('#' + element + ' .widgetcontent').kendoChart(
                        title:  text: "" ,
                        dataSource: this.data,
                        sort: 
                            field: "SubmitMonth",
                            dir: "asc"
                        ,
                        //chartArea:  background: "" ,
                        legend:  position: "top" ,
                        seriesDefaults:  type: "bar", labels:  visible: true, format: "0" ,
                        tooltip:  visible: true, format: "0:N0" ,
                        series: [ field: "Count", name: "CompanyA"],
                        valueAxis: 
                            labels:  format: "0" 
                        ,
                        //seriesClick: onSeriesClick,
                        categoryAxis: 
                            field: "SubmitMonth",
                            labels:  format: "0:MM" 
                        
                    );
                
            );


        
    );




);

希望这会有所帮助！

谢谢， 阿尼尔班

【讨论】：

嗨@Anirban..插件是免费的还是付费的？

@PravinKumar 该插件的 javascript 许可条款与 jquery 相同。

嗨 Praven - 是的，它是免费插件。你也可以看看@jqueryui.com/sortable/#portlets。有了这个，你可以更好地控制你的 DOM

@Anirban，更重要的问题是许可是什么样的。 “免费”对于企业开发人员来说仍然是一个问题。重要的是代码报告其许可与 jQuery 相同。