<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
<html xmlns="> <head> <title></title> <link href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="jquery.jqGrid-4.3.1/js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js" type="text/javascript"></script> <script src="jquery.jqGrid-4.3.1/src/JsonXml.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" media="screen" href=" /> <script type="text/javascript">jQuery(function () {
var lastsel;jQuery("#jqgajax").jqGrid({
url: 'Handler.ashx',
datatype: "json", colNames: ['ids', 'name'], colModel: [ { name: 'ids', index: 'ids', width: 55, editable: true, edittype: "select", editoptions: { value: "1:php;2:.net;3:java;4:ruby"} }, { name: 'name', index: 'name', width: 90, editable: true, edittype: "textarea", editoptions: { rows: "4", cols: "16"} },],
rowNum: 10, rowList: [10, 20, 30], width: 700, height: 300, pager: '#pjqgajax', sortname: 'id', viewrecords: true, sortorder: "desc", caption: "JSON Example", jsonReader: { //json解释器 root: "rows", repeatitems: false, cell: "", id: "0"},
onSelectRow: function (id) {
if (id && id !== lastsel) { lastsel = id; // jQuery('#jqgajax').jqGrid('restoreRow', lastsel); //lastsel是编辑第几行的行数 //jQuery('#jqgajax').jqGrid('editRow', id, true);//行内编辑
} }, editurl: "Handler.ashx", //编辑 ajax请求的url //配置分组 grouping: true, groupingView: { groupField: ['name'], groupColumnShow: [true], groupText: ['<font color=blue>{0} - <font color=red>{1}</font> Item(s)</font>'], groupCollapse: true, groupOrder: ['desc'] },
//分组配置结束
//标题,按钮text配置项
// edit: { // addCaption: "Add Record", // editCaption: "Edit Record", // bSubmit: "Submit", // bCancel: "Cancel", // bClose: "Close", // saveData: "Data has been changed! Save changes?", // bYes: "Yes", // bNo: "No", // bExit: "Cancel"// }
}); jQuery("#jqgajax").jqGrid('navGrid', '#pjqgajax', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true, multipleGroup: true }); //配置多项查询 jQuery("#jqgajax").jqGrid('inlineNav', "#jqgajax"); //配置行内编辑 配合 上面onSelectRow事件内的 行内编辑一起使用
$("#Button1").click(function () {
jQuery("#jqgajax").jqGrid('editGridRow', "new", { height: 280, reloadAfterSubmit: false }); //新建行
});
$("#Button2").click(function () {jQuery("#jqgajax").jqGrid('editGridRow', lastsel, {bCancel:'退出', bSubmit: '提交', editCaption: '编辑页', height: 400,width:500, reloadAfterSubmit: false }); //编辑行
}) $("#Button3").click(function () { jQuery("#jqgajax").excelExport({ url: 'Handler.ashx' });
}) }) </script> </head> <body> <table id="jqgajax"> </table> <div id="pjqgajax"> </div> <div id="subgrid_id"> </div> <div id="Div1"> </div> <input id="Button1" type="button" value="添加列" /> <input id="Button2" type="button" value="编辑" /> <input id="Button3" type="button" value="导出" /> </body> </html>