开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
jQuery Grid Plugin首页、文档和下载 - jQuery 扩展插件 - 开源中国社区
全部项目分类
我要评价
MIT
JavaScript HTML/CSS
跨平台
分享
收藏
收录时间:2015-05-05
jQuery Grid Plugin 详细介绍

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");
    });
});

大家对 jQuery Grid Plugin 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部