jQueryGrid 是一个 jQueryJavascript库的插件。它是一个非常快的、可扩展的工具，能将高级的交互控件添加到任何HTML表。支持分页、javascript和服务器端数据源、jQueryUI和引导（Bootstrap）。
HTML：
<butto id="btAdd">Add Row</butto> <br><br> <table id="grid"></table> <div id="dialog" style="display:oe"> <iput id="ID" type="hidde"> <table border="0"> <tbody><tr> <td><label for="Name">Name:</label></td> <td><iput id="Name" type="text"></td> </tr> <tr> <td><label for="PlaceOfBirth">Place Of Birth:</label></td> <td><iput id="PlaceOfBirth" type="text"></td> </tr> </tbody></table> </div>JavaScript：
$(documet).ready(fuctio () { var data, grid, dialog; data = [ { "ID": 1, "Name": "Hristo Stoichkov", "PlaceOfBirth": "Plovdiv, Bulgaria" }, { "ID": 2, "Name": "Roaldo Luís Nazário de Lima", "PlaceOfBirth": "Rio de Jaeiro, Brazil" }, { "ID": 3, "Name": "David Platt", "PlaceOfBirth": "Chadderto, Lacashire, Eglad" } ]; dialog = $("#dialog").dialog({ title: "Add/Edit Record", autoOpe: false, resizable: false, modal: true, buttos: { "Save": Save, "Cacel": fuctio () { $(this).dialog("close"); } } }); fuctio Edit(e) { $("#ID").val(e.data.id); $("#Name").val(e.data.record.Name); $("#PlaceOfBirth").val(e.data.record.PlaceOfBirth); $("#dialog").dialog("ope"); } fuctio Delete(e) { if (cofirm("Are you sure?")) { grid.removeRow(e.data.id); } } fuctio Save() { if ($("#ID").val()) { var id = parseIt($("#ID").val()); grid.updateRow(id, { "ID": id, "Name": $("#Name").val(), "PlaceOfBirth": $("#PlaceOfBirth").val() }); } else { grid.addRow({ "ID": grid.cout() + 1, "Name": $("#Name").val(), "PlaceOfBirth": $("#PlaceOfBirth").val() }); } $(this).dialog("close"); } grid = $("#grid").grid({ dataSource: data, colums: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth", title: "Place Of Birth" }, { title: "", width: 20, type: "ico", ico: "ui-ico-pecil", tooltip: "Edit", evets: { "click": Edit } }, { title: "", width: 20, type: "ico", ico: "ui-ico-close", tooltip: "Delete", evets: { "click": Delete } } ] }); $("#btAdd").o("click", fuctio () { $("#ID").val(""); $("#Name").val(""); $("#PlaceOfBirth").val(""); $("#dialog").dialog("ope"); });});
评论