使用 jQuery widget 工厂，创建包含 ui.sortable 的树视图

using jQuery widget factory, creating treeview including ui.sortable

本文关键字：sortable ui 视图 包含 创建 jQuery widget 工厂 使用      更新时间：2023-09-26

我正在尝试使用jQuery小部件工厂创建一个插件。我正在创建一个简单的树视图插件，我想在其中实现 ui.sortable 小部件，为此我做了这样的事情： 

(function ($) {
    $.widget("cms.treeview", $.ui.sortable, {
        // Default options.
        options: {
            useSorting: false
        },
        // Default constructor.
        _create: function(){
            // creating treeview code goes here
            // if useSorting is set to true set sorting
            if (this.options.useSorting){
                // HOW WOULD I CALL THE SORTING HERE
            }
        U
    });
})(jQuery)

现在，当我将 ui.sortable 添加到 $.widget（"cms.treeview"， $.ui.sortable， { }）; 声明 我从可排序小部件中获取所有选项，但是我将如何在代码中调用它并确保拥有我需要的所有内容？

/马丁

(function ($) {
$.widget("cms.treeview", $.ui.sortable, {
    // Default options.
    options: {
        useSorting: false,
        makeMeSortable:$.noop
    },
    elementToMakeSortable:null,
    // Default constructor.
    _create: function(){
        // creating treeview code goes here
        this.elementToMakeSortable = $(document.createElement('ULorWhateverElement'));
        // if useSorting is set to true set sorting
        if (this.options.useSorting){
            // HOW WOULD I CALL THE SORTING HERE
            this._trigger('makeMeSortable', null, { elementToBeSortable:this.elementToMakeSortable});
        }
});
})(jQuery)

然后，在您的页面上，您有如下所示的内容：

var yourTreeviewWidgetInstance = $('#someElement').treeview({
    useSorting:true,
//this gets called from treeview widget if userSorting=true
    makeMeSortable: function (event, elementToMakeSortable) { 
    $(elementToMakeSortable).sortable();
}

附言。我还没有测试代码，我是从我的脑海中编写的。只是让你了解设计。

作为一般原则，让小部件相互了解听起来并不好。通常，这就是"选项即函数"的用途。例如，在这里您可以看到 2 个小部件在通信：http://msdn.microsoft.com/en-us/library/hh404085.aspx

因此，在您的示例中，您要做的是设置一个名为"makeMeSortable"的选项，例如：

// Default options.
options: {
useSorting: false,
makeMeSortable:$.noop
}

然后你会做这样的事情：

if (this.options.useSorting){
// HOW WOULD I CALL THE SORTING HERE
this._trigger('makeMeSortable', null, { elementToBeSortable: this.yourElementToSort})
}

最后，在创建小部件的实例时，您将为makeMeSortable选项分配一个函数。 该函数将接收要排序的元素并调用ui.sortable widget。

相关文章：