Question

我有一个ASP.NET页面，显示一个表，其中每个单元格代表一个对象。此对象由C＃中的代码生成，通过JSON发送到页面，Javascript函数读取每个对象并创建一个HTML单元格，显示内部对象的属性。

我为每种情况定义了行数和列数。例如，如果我的对象总数为20，则列数为4，行数为5.

每个对象都有一个数字标识符，例如1到20。对象从左到右逐行填充在表格上，产生如下网格：

1   2   3   4
5   6   7   8
9   10  11  12
13  14  15  16
17  18  18  20

该对象具有以下结构：

        public class AreaData
        {
            public string AreaId;
            public int Rows;
            public int Columns;
            public int TotalCells;
            public bool Orientation;
            public List Cells;
        }
        public class CellData
        {
            public string CellName;
            public int CellNumber;
        }

制作表格的Javascript函数的基本概要是：

function ReturnGrid(object, settings) {
    var objId = settings["objId"];
    var objName = settings["objName"];
    if ((settings["columns"] * settings["rows"]) == object[objName].length) {
        var table = CreateFullElement("table", "id", "Table" + object[objId], "class", settings["styles"]["table_css"], "style", settings["styles"]["table_style"]);
        var tableBody = document.createElement("tbody");
        var index = 0;
        for (var j = 0; j < settings["rows"]; j++) {
            var tableRow = document.createElement("tr");
            for (var i = 0; i < settings["columns"]; i++) {
                var tableCell = CreateFullElement("td", "id", "CellName-" + object[objName][index]["CellName"], "title", object[objName][index]["CellName"], "style", settings["styles"]["td_style"]);
                object[objName][index]["ServiceTag"] = object[objName][index]["ServiceTag"].toUpperCase();
                var cellContainer;
                cellContainer = CreateFullElement("div", "id", object[objName][index]["CellName"], "class", settings["classes"]["cellContent_css"], "style", cellContent_style + "background-color:" + settings["deviceStatusColors"][object[objName][index]["DeviceStatus"]]+";");

                var cellNumText = document.createTextNode(object[objName][index]["CellNumber"]);
                cellNumContainer = CreateFullElement("div", "class", settings["classes"]["cellNumContent_css"], "style", cellNumContent_style + textcolor_Style);
                cellNumContainer.appendChild(cellNumText);
                tableCell.appendChild(cellContainer);
                tableRow.appendChild(tableCell);
                index++;
            }
        tableBody.appendChild(tableRow);
    }
        table.appendChild(tableBody);
        return table;
    }
    else {
    console.log("The values of rows and columns does not match with the length of the object");
    }
}

但是，我想根据两个条件重新排列网格：

1）将网格向上填充

1   6   11  16
2   7   12  17
3   8   13  18
4   9   14  19
5   10  15  20

2）如果需要，将网格填充为镜像。

16  11  6   1
17  12  7   2
18  13  8   3
19  14  9   4
20  15  10  5

有没有办法用Javascript实现这个功能，Javascript是一个已经制作的Jquery函数？或者我必须在将对象字符串化为JSON之前对其进行排序？

提前致谢

重新排序HTML表格单元格

0 个答案: