jQuery 扩展插件 jQuery Grid Plugin
- 授权协议: MIT
- 开发语言: JavaScript HTML/CSS
- 操作系统: 跨平台
- 软件首页: http://gijgo.com/
软件介绍
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");
});
});
