JQGrid 之 JS版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
<html xmlns="http://www.w3.org/1999/xhtml%22>
<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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css%22 />
<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>