jQuery 扩展插件 jQuery Grid Plugin

MIT
JavaScript HTML/CSS
跨平台
2015-05-05
大胖森

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

评论(0)

暂无评论

暂无资讯

暂无问答

【转】240多个jQuery插件

参考文档:http://www.cnblogs.com/terrylee/articles/988623.html 文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an in...

2013/05/28 15:55
150
1
[JavaScript]240个jQuery实现AJAX插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 00:12
52
0
强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 11:53
218
0
7+ jQuery Microsoft Excel Type Plugins

7+ jQuery Microsoft Excel Type Plugins In no particular order, we give you a handpicked collection of 7+ jQuery Microsoft Excel Type plugins you may have not used before! You wo...

2013/05/11 16:29
136
0
推荐N多jquery插件。相当实用!

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j...

2013/01/04 15:52
118
0
jQuery 插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼...

2014/09/26 15:34
41
0
240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是―写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼...

2014/07/30 10:02
37
0
40多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

2014/04/16 10:45
184
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部