从 html 表单元素中对动态创建的表格进行排序

Question

对不起我的英语。 我是新来的，所以我会在这里得到一点帮助， 我有一个 html 表单，它的数据显示在我的页面上的 html 表中。 在每个新的保存表单数据表之后按表单条目 id 排序。

现在我被排序和分页困住了 如何通过单击其他数据的列标题来对表数据进行排序，例如animal_id 或animal_name.

感谢您的帮助

代码如下：

        init: function() {
                if (!Animals.index) {
                window.localStorage.setItem("Animals:index", Animals.index = 1);
            }
            Animals.$form.reset();
            Animals.$button_discard.addEventListener("click", function(event) {
                Animals.$form.reset();
                Animals.$form.id_entry.value = 0;
            }, true);
            Animals.$form.addEventListener("submit", function(event) {
                var entry = {
        id: parseInt(this.id_entry.value),
                    animal_id:this.animal_id.value,
        animal_name: this.animal_name.value,
        animal_type: this.animal_type.value,
                    bday: this.bday.value,
                    animal_sex: this.animal_sex.value,
                    mother_name: this.mother_name.value,
                    farm_name: this.farm_name.value,
        money: this.money.value,
        weight: this.weight.value,
                    purchase_partner: this.purchase_partner.value,

                };
                if (entry.id == 0) { // add
                    Animals.storeAdd(entry);
                    Animals.tableAdd(entry);
                }
                else { // edit
                    Animals.storeEdit(entry);
                    Animals.tableEdit(entry);
                }

                this.reset();
                this.id_entry.value = 0;
                event.preventDefault();
            }, true);


            if (window.localStorage.length - 1) {
                var animals_list = [], i, key;
                for (i = 0; i < window.localStorage.length; i++) {
                    key = window.localStorage.key(i);
                    if (/Animals:\d+/.test(key)) {
                        animals_list.push(JSON.parse(window.localStorage.getItem(key)));
                    }
                }

                if (animals_list.length) {
                            animals_list.sort(function(a, b)
                            {return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
                                                           })

                        .forEach(Animals.tableAdd);

                                                } }


            Animals.$table.addEventListener("click", function(event) {
                var op = event.target.getAttribute("data-op");
                if (/edit|remove/.test(op)) {
                    var entry = JSON.parse(window.localStorage.getItem("Animals:"+ event.target.getAttribute("data-id")));
                    if (op == "edit") {
            Animals.$form.id_entry.value = entry.id;
                        Animals.$form.animal_id.value = entry.animal_id;
            Animals.$form.animal_name.value = entry.animal_name;
                        Animals.$form.animal_type.value = entry.animal_type;
                        Animals.$form.bday.value = entry.bday;
                        Animals.$form.animal_sex.value = entry.animal_sex;
                        Animals.$form.mother_name.value = entry.mother_name;
            Animals.$form.farm_name.value = entry.farm_name;
                        Animals.$form.money.value = entry.money;
                        Animals.$form.weight.value = entry.weight;
                        Animals.$form.purchase_partner.value = entry.purchase_partner;

                    }
                    else if (op == "remove") {
if (confirm('Are you sure you want to remove this animal from your list?' )) {
                            Animals.storeRemove(entry);
                            Animals.tableRemove(entry);
                        }
                    }
                    event.preventDefault();
                }
            }, true);
        },

        storeAdd: function(entry) {
            entry.id = Animals.index;
            window.localStorage.setItem("Animals:index",++Animals.index);
            window.localStorage.setItem("Animals:"+entry.id,JSON.stringify(entry));
        },
        storeEdit: function(entry) {
            window.localStorage.setItem("Animals:"+entry.id,JSON.stringify(entry));
        },
        storeRemove: function(entry) {
            window.localStorage.removeItem("Animals:"+ entry.id);
        },

        tableAdd: function(entry) {
            var $tr = document.createElement("tr"), $td, key;
            for (key in entry) {
                if (entry.hasOwnProperty(key)) {
                    $td = document.createElement("td");
                    $td.appendChild(document.createTextNode(entry[key]));
                    $tr.appendChild($td);
                }
            }
            $td = document.createElement("td");
            $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id+'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
            $tr.appendChild($td);
            $tr.setAttribute("id", "entry-"+ entry.id);
            Animals.$table.appendChild($tr);
        },
        tableEdit: function(entry) {
        var $tr = document.getElementById("entry-"+ entry.id), $td, key;
            $tr.innerHTML = "";
            for (key in entry) {
                if (entry.hasOwnProperty(key)) {
                    $td = document.createElement("td");
                    $td.appendChild(document.createTextNode(entry[key]));
                    $tr.appendChild($td);
                }
            }
            $td = document.createElement("td");
            $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
            $tr.appendChild($td);
        },
        tableRemove: function(entry) {
            Animals.$table.removeChild(document.getElementById("entry-"+ entry.id));
        }
    };


    Animals.init();

Answer 1

由于您当前的方法是让您的代码直接管理 Table HTML 和 Animal 数据，因此需要您的代码对数据进行排序和重写表格。也就是说，您需要侦听列标题上的单击事件，然后根据该特定列对动物数据进行排序，然后完全重绘表格。重绘表格可能只需要循环遍历所有正在显示的 Animals 的 tableRemove() 和 tableAdd() 函数，尽管这可能有点慢。每列对数据的排序有点混乱，我在下面有一个解决方案。

更好的方法是允许 RIA（富 Internet 应用程序）框架为您处理表信息。许多这些框架（EXT-JS、YUI 等）都提供了一个表格控件，可以显着简化您的编码。您只需给它一个对您数据的引用（以相关格式格式化），它就会为您进行排序和显示。

如果您仍想自己创建 HTML 表格，并且对数据的排序更感兴趣，那么我建议您使用客户端数据库解决方案，例如 SequelSphere。使用 SequelSphere，您可以创建一个表来管理您的 Animal 数据，如下所示：

db.catalog.createTable({
    tableName: "animals",
    columns: ["id_entry", "animal_id", "animal_name", "animal_type",
            "bday", "animal_sex", "mother_name", "farm_name", "money",
            "weight", "purchase_partner"],
    primaryKey: ["id_entry"]
});

然后你可以像这样插入/更新/删除行：

db.catalog.getTable("animals").insertRow(
     [ entry.id, entry.animal_id, entry.animal_name, entry.animal_type,
     entry.bday, entry.animal_sex, entry.mother_name, entry.farm_name,
     entry.money, entry.weight, entry.purchase_partner ]
);

最后，您只需更改以下 select 语句中的 ORDER BY 子句，即可按用户单击的任何列对数据进行排序：

var sql =   "SELECT id_entry, animal_id, animal_name, animal_type, " +
            "       bday, animal_sex, mother_name, farm_name, money, " +
            "       weight, purchase_partner " +
            "  FROM animals " +
            " ORDER BY animal_sex "; // why did I choose this column?
var sortedEntries = db.query(sql);

哦，是的：SequelSphere 也将数据存储在 window.localStorage 中，因此您也不必编写它。它还完全支持 SQL 和游标，因此管理分页也会更容易一些。

希望这会有所帮助！

约翰...