0

对不起我的英语不好。我是新来的，所以我会在这里得到一点帮助，我有一个 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();
4

1 回答 1

0

由于您当前的方法是让您的代码直接管理 Table HTML 和 Animal 数据，因此您的代码需要对数据进行排序和重写表。也就是说，您需要侦听列标题上的单击事件，然后根据该特定列对动物数据进行排序，然后完全重绘表格。重绘表格可能只需要循环遍历所有正在显示的动物的 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 ]
);

最后，您只需更改以下选择语句中的 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 和游标，因此管理分页也会更容易一些。

希望这可以帮助！

约翰...

于 2012-10-12T14:33:22.947 回答