jQuery Grid Plugin jQuery 扩展插件

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)

暂无评论

暂无资讯

暂无问答

推荐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
117
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
144
1
[转]240多个jQuery插件

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

2010/05/13 21:11
2.2K
0
40多个jQuery插件

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

2014/04/16 10:45
183
1
jQuery 插件

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

2014/09/26 15:34
35
0
[转]240多个jQuery插件

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

2010/05/11 13:10
10.7K
1
240多个jQuery插件

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

2014/07/30 10:02
36
0
[JavaScript]240个jQuery实现AJAX插件

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

2013/05/15 00:12
48
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部