jQuery Grid PluginjQuery 扩展插件

jQuery Grid 是一个 jQuery Javascript 库的插件。它是一个非常快的、可扩展的工具，能将高级的交互控件添加到任何 HTML 表。支持分页、 javascript 和服务器端数据源、 jQuery UI 和引导（Bootstrap）。

HTML：

<button id="btnAdd">Add Row</button>
    <br><br>
    <table id="grid"></table>
    <div id="dialog" style="display:none">
        <input id="ID" type="hidden">
        <table border="0">
            <tbody><tr>
                <td><label for="Name">Name:</label></td>
                <td><input id="Name" type="text"></td>
            </tr>
            <tr>
                <td><label for="PlaceOfBirth">Place Of Birth:</label></td>
                <td><input id="PlaceOfBirth" type="text"></td>
            </tr>
        </tbody></table>
    </div>

JavaScript：

$(document).ready(function () {
    var data, grid, dialog;
    data = [
        { "ID": 1, "Name": "Hristo Stoichkov", "PlaceOfBirth": "Plovdiv, Bulgaria" },
        { "ID": 2, "Name": "Ronaldo Luís Nazário de Lima", "PlaceOfBirth": "Rio de Janeiro, Brazil" },
        { "ID": 3, "Name": "David Platt", "PlaceOfBirth": "Chadderton, Lancashire, England" }
    ];
    dialog = $("#dialog").dialog({
        title: "Add/Edit Record",
        autoOpen: false,
        resizable: false,
        modal: true,
        buttons: {
            "Save": Save,
            "Cancel": function () { $(this).dialog("close"); }
        }
    });
    function Edit(e) {
        $("#ID").val(e.data.id);
        $("#Name").val(e.data.record.Name);
        $("#PlaceOfBirth").val(e.data.record.PlaceOfBirth);
        $("#dialog").dialog("open");
    }
    function Delete(e) {
        if (confirm("Are you sure?")) {
            grid.removeRow(e.data.id);
        }
    }
    function Save() {
        if ($("#ID").val()) {
            var id = parseInt($("#ID").val());
            grid.updateRow(id, { "ID": id, "Name": $("#Name").val(), "PlaceOfBirth": $("#PlaceOfBirth").val() });
        } else {
            grid.addRow({ "ID": grid.count() + 1, "Name": $("#Name").val(), "PlaceOfBirth": $("#PlaceOfBirth").val() });
        }
        $(this).dialog("close");
    }
    grid = $("#grid").grid({
        dataSource: data,
        columns: [
            { field: "ID" },
            { field: "Name" },
            { field: "PlaceOfBirth", title: "Place Of Birth" },
            { title: "", width: 20, type: "icon", icon: "ui-icon-pencil", tooltip: "Edit", events: { "click": Edit } },
            { title: "", width: 20, type: "icon", icon: "ui-icon-close", tooltip: "Delete", events: { "click": Delete } }
        ]
    });
    $("#btnAdd").on("click", function () {
        $("#ID").val("");
        $("#Name").val("");
        $("#PlaceOfBirth").val("");
        $("#dialog").dialog("open");
    });
});