Javascript / Jquery-按父子关系将数组绑定到HTML网格并按排序列排序

Question

To Bind the Array in Html Grid in the Parent-child Relation and order by sort column

Unformatted array:   var data = [
{ index : 1,  parent : null,sort:0 },
{ index : 2,  parent : null ,sort:1},
{ index : 3,  parent : 2 , sort:0},
{ index : 4,  parent : null,sort:2},
{ index : 5,  parent : 4,sort:0 },
{ index : 6,  parent : 5 ,sort:0},
{ index : 7,  parent : 5 ,sort:1},
{ index : 8,  parent : 6 ,sort:0},
{ index : 9,  parent : 2 ,sort:2},
{ index : 10, parent : 2 ,sort:1},
];

if data binds looks like this ,Example
 Parent 1
 Child 12
 Child 1.1
 Subchild 1.1.2
 Subchild 1.1.1
 Subchild 1.2.2
 Subchild 1.2.1

result should be as follow

formatted array: var data = [
{ index : 1,  parent : null,sort:0 },
{ index : 2,  parent : null ,sort:1},
{ index : 3,  parent : 2 , sort:0},
{ index : 10, parent : 2 ,sort:1},
{ index : 9,  parent : 2 ,sort:2},
{ index : 4,  parent : null,sort:2},
{ index : 5,  parent : 4,sort:0 },
{ index : 6,  parent : 5 ,sort:0},
{ index : 8,  parent : 6 ,sort:0},
{ index : 7,  parent : 5 ,sort:1},
];

I want to Bind like this -->

 Parent 1
    --> Child 1.1
       --> Subchild 1.1.1
          --> Subchild 1.1.2
    --> Child 12
         --> Subchild 1.2.1
           --> Subchild 1.2.2

following is the solution i am using now , where takes more time To Bind the Grid if the array has large data

 function Ordering(Data,successCallBack) {
    var Grid= [];
    var parentdata=[];
    $.each(Data, function (key, value) {
         if (value.parent== null) {
            parentdata.push(value);
          }
    });

    $.each(parentdata, function (key, value) {
        child(Requirements, value, Grid, function    (Order) {
              successCallBack(Order);
        });
    });

}
function child(data, parentdata, Grid, successCallBack) {
    Grid.push(parentdata);
    $.each(data, function (key, value) {
        if (parentdata== value.parent) {
            child(data, value, Grid, function () { });
        }
    });
    if (Grid.length == Grid.length) {
        successCallBack(Grid);
    }
}

Answer 1

It's unclear what exactly your ordering requirements are. But you'll need to create your own compare function similar to this:

var newOrder = [];
function myCompare(a, b){
    if (a.sort != b.sort){
        return (a.sort < b.sort ? -1 : 1)
    }
    if (data[a.parent].sort != data[b.parent].sort){
        return (data[a.parent].sort < data[b.parent].sort ? -1 : 1)
    }
    return 0;
}
for (var i in data){
    newOrder[i] = data[i];
}
newOrder.sort(myCompare);

By the way, you have an error: you have two sort properties in each object.

Edit: Ok I think I see what you want now. Here's the JSFiddle of my solution .

var newData = [];

var top = {};

function doSort() {
    for (var i in data) {
        var child = data[i];
        if (child.parent) {
            var parent = data[child.parent-1];
        } else {
            var parent = top;
        }
        if (parent.children === undefined){
            parent.children = [];
        }
        parent.children[parent.children.length] = child;
    }
    recurse(top);
}

function recurse(parentObject) {
    var position = newData.length;
    if (parentObject !== top) {
        newData[position] = parentObject;
    }
    if (parentObject.children !== undefined) {
        parentObject.children.sort(myCompare);
        for (var i in parentObject.children) {
            var child = parentObject.children[i];
            recurse(child);
            if (parentObject === top) {
                // do nothing, it's the top container
            } else if (child.parent) {
                child.parent = position + 1;
            } else {
                // leave as null
            }
        }
    }
}

function myCompare(a, b) {
    if (a.sort != b.sort) {
        return (a.sort < b.sort ? -1 : 1);
    }
    return 0;
}

doSort();