javascript - 使用 jQuery NestedSortable 插件列出嵌套列表的数量

Question

问题/问题

我在获取列表编号 (sortIndex) 时遇到问题。在获得“示例列表”中的 sortIndex 后，我想将 sortIndex 赋予 toArray 函数。所以当这个函数确实创建了一个数组时，就会有一个sortIndex init。请参阅“数组示例”

使用的 jQuery 插件: mjsarfatti jQuery nestedSortable

示例列表

html 中的列表:

    <ol class="sortable ui-sortable">
    <li id="category_1"><div>Car</div>
       <ol>
           <li id="category_2"><div>Color</div>
                <ol>
                    <li id="category_3"><div>Red</div></li>
                    <li id="category_4"><div>Black</div></li>
                </ol>
           </li>
       </ol>
    </li>
    <li id="category_5"><div>Motor</div></li>
    <li id="category_6"><div>Truck</div></li>
    </ol>

列表示例，让您了解上述列表。

[sortIndex] [Name]
1. Car
    1. Color
       1. Red
       2. Black
2. Motor
3. Truck

数组示例

使用嵌套的Sortable toArray，将sortIndex 添加到array() 会很好，如下所示:

["storage":"ArrayObject":private]=>
  array(1) {
    ["newList"]=>
    array(7) {
      [0]=> //This is the OL
      array(5) {
        ["item_id"]=>
        string(0) ""
        ["parent_id"]=>
        string(4) "none"
        ["depth"]=>
        string(1) "0"
        ["left"]=>
        string(1) "1"
        ["right"]=>
        string(2) "38"
      }
      [1]=> // Car
      array(6) {
        ["item_id"]=>
        string(1) "1"
        ["parent_id"]=>
        string(0) ""
        ["sort_index"]=>
        string(1) "1"
        ["depth"]=>
        string(1) "1"
        ["left"]=>
        string(1) "2"
        ["right"]=>
        string(1) "9"
      }
      [2]=> // Color
      array(6) {
        ["item_id"]=>
        string(1) "2"
        ["parent_id"]=>
        string(1) "1"
        ["sort_index"]=>
        string(1) "1"
        ["depth"]=>
        string(1) "2"
        ["left"]=>
        string(1) "3"
        ["right"]=>
        string(1) "8"
      }
      [3]=> // Red
      array(6) {
        ["item_id"]=>
        string(1) "3"
        ["parent_id"]=>
        string(1) "2"
        ["sort_index"]=>
        string(1) "1"
        ["depth"]=>
        string(1) "3"
        ["left"]=>
        string(1) "4"
        ["right"]=>
        string(1) "5"
      }
      [4]=> // Black
      array(6) {
        ["item_id"]=>
        string(1) "4"
        ["parent_id"]=>
        string(1) "2"
        ["sort_index"]=>
        string(1) "2"
        ["depth"]=>
        string(1) "3"
        ["left"]=>
        string(1) "6"
        ["right"]=>
        string(1) "7"
      }
      [5]=> // Motor
      array(6) {
        ["item_id"]=>
        string(2) "5"
        ["parent_id"]=>
        string(0) ""
        ["sort_index"]=>
        string(1) "1"
        ["depth"]=>
        string(1) "1"
        ["left"]=>
        string(2) "10"
        ["right"]=>
        string(2) "11"
      }
      [6]=> // Truck
      array(6) {
        ["item_id"]=>
        string(2) "6"
        ["parent_id"]=>
        string(0) ""
        ["sort_index"]=>
        string(1) "1"
        ["depth"]=>
        string(1) "1"
        ["left"]=>
        string(2) "10"
        ["right"]=>
        string(2) "11"
      }
   }
}

nestedSortable插件的toArray函数

这是 NestedSortable 插件的 toArray 函数。我确实插入了

"sort_index": ,

在

ret.push()

toArray 函数:

toArray: function(options) {

            var o = $.extend({}, this.options, options),
                sDepth = o.startDepthCount || 0,
                ret = [],
                left = 2;

            ret.push({
                "item_id": o.rootID,
                "parent_id": 'none',
                "depth": sDepth,
                "left": '1',
                "right": ($(o.items, this.element).length + 1) * 2
            });

            $(this.element).children(o.items).each(function () {
                left = _recursiveArray(this, sDepth + 1, left);
            });

            ret = ret.sort(function(a,b){ return (a.left - b.left); });

            return ret;

            function _recursiveArray(item, depth, left) {

                var right = left + 1,
                    id,
                    pid;

                if ($(item).children(o.listType).children(o.items).length > 0) {
                    depth ++;
                    $(item).children(o.listType).children(o.items).each(function () {
                        right = _recursiveArray($(this), depth, right);
                    });
                    depth --;
                }

                id = ($(item).attr(o.attribute || 'id')).match(o.expression || (/(.+)[-=_](.+)/));

                if (depth === sDepth + 1) {
                    pid = o.rootID;
                } else {
                    var parentItem = ($(item).parent(o.listType)
                                             .parent(o.items)
                                             .attr(o.attribute || 'id'))
                                             .match(o.expression || (/(.+)[-=_](.+)/));
                    pid = parentItem[2];
                }

                if (id) {
                        ret.push({"item_id": id[2], "parent_id": pid, "sort_index": , "depth": depth, "left": left, "right": right});
                }

                left = right + 1;
                return left;
            }

        },

就像我说的，给 toArray 函数提供 sort_Index 会很好，但我已经找了好几天了，而且我对如何解决这个问题一无所知。

Answer 1

问题已解决

通过编辑 jQuery 插件。

将此行添加到 _recursiveArray(item, depth, left) 函数中:

si = ($(item).index(o.item));

定义变量 si:

var right = left + 1,
    id,
    pid,
    si;

并在 ret.push 添加变量，如下所示:

ret.push({"item_id": id[2], "parent_id": pid, "sort_index": si+1, "depth": depth, "left": left, "right": right});

所以它看起来像这样:

toArray: function(options) {

    var o = $.extend({}, this.options, options),
        sDepth = o.startDepthCount || 0,
        ret = [],
        left = 2;

    ret.push({
        "item_id": o.rootID,
        "parent_id": 'none',
        "sort_index" : this.element.index(this.element),
        "depth": sDepth,
        "left": '1',
        "right": ($(o.items, this.element).length + 1) * 2
    });

    $(this.element).children(o.items).each(function () {
        left = _recursiveArray(this, sDepth + 1, left);
    });

    ret = ret.sort(function(a,b){ return (a.left - b.left); });

    return ret;

    function _recursiveArray(item, depth, left) {

        var right = left + 1,
            id,
            pid,
            si;

        if ($(item).children(o.listType).children(o.items).length > 0) {
            depth ++;
            $(item).children(o.listType).children(o.items).each(function () {
                right = _recursiveArray($(this), depth, right);
            });
            depth --;
        }

        id = ($(item).attr(o.attribute || 'id')).match(o.expression || (/(.+)[-=_](.+)/));

        if (depth === sDepth + 1) {
            pid = o.rootID;
        } else {
            var parentItem = ($(item).parent(o.listType)
                                     .parent(o.items)
                                     .attr(o.attribute || 'id'))
                                     .match(o.expression || (/(.+)[-=_](.+)/));
            pid = parentItem[2];
        }

        si = ($(item).index(o.item));

        if (id) {
                ret.push({"item_id": id[2], "parent_id": pid, "sort_index": si+1, "depth": depth, "left": left, "right": right});
        }

        left = right + 1;
        return left;
    }

},