＜项目记录Ⅰ＞jQuery网格插件——jqGrid的使用
作者：互联网
这是我第一次写js代码。一开始不知道怎么下手，看了js、jquery有关的书和参考别人的代码后就大概知道这个开发流程了。我觉得看书比看视频好，这套系列的书我觉得挺适合初学者的。
这里简单记录一下，也不整理了。
文章目录
1.列表页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>任务列表</title>
<%@include file="/WEB-INF/views/include/head0.jsp" %>
<script type="text/javascript">
$(document).ready(function() {
initGrid();
});
function initGrid(){
$('#jqGrid').jqGrid({
url: '${ctx}/interfaces/interfaceTask/loadList',
mtype: 'POST',
datatype: 'json',
responsive:true,
page: 1,
colModel: [
{ label: 'id', name: 'id', key: true, hidden:true},
{ label: '任务名称',name: 'taskName',index: 'taskName',width: 150},
{ label: '当前期数',name: 'periodNumber',index: 'periodNumber',width: 100},
{ label: '是否完成配置',name: 'confirm',index: 'confirm',width: 100, edittype:'select', formatter:'select', editoptions:{value:"0:是;1:否"}},
{label:'操作',name:'cz',search:false,sortable:false,title:false,formatter:czFmt,width:120}
],
viewrecords: true,
height: height,
rowNum: 10,
rowList:[10,20,30],
loadonce:false,
multiselect: true,
autowidth: true,
pager: '#jqGridPager'
});
$('#jqGrid').jqGrid('navGrid','#jqGridPager',{edit:false,add:false,del:false,search:false});
}
function czFmt(c,o,r){
var res='';
var id=r.id;
var taskName = r.taskName;
// alert(taskName);
res+='<a class="btn-success btn-sm" href="${ctx}/interfaces/interfaceMetadata/reportForm?id='+id+'&taskName='+encodeURI(encodeURI(taskName))+'">新增制度</a> ';
<%--res+='<a class="btn-primary btn-sm" href="${ctx}/interfaces/interfaceMetadata/preview?id='+id+'&taskName='+taskName+'">预览</a> ';--%>
res+='<a class="btn-primary btn-sm" href="${ctx}/interfaces/interfaceMetadata/preview?id='+id+'&taskName='+encodeURI(encodeURI(taskName))+'">预览</a> ';
res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="deleteData(\''+id+'\')">删除</a> ';
return res;
}
function deleteData(id){
confirmx('你确定要删除此数据吗？',null,function(){
$.ajax({
url:'${ctx}/interfaces/interfaceTask/delete',
type:'post',
dataType:'json',
data:{id:id},
success:function(res){
var code = res.code;
var message = res.message;
layer.msg(message);
$('#jqGrid').trigger('reloadGrid');
}
});}
);
}
function deleteDataBatch(ids){
var _ids=$('#jqGrid').jqGrid('getGridParam','selarrrow');
if(_ids.length==0){
layer.msg("请选择要操作的行！");
return
}
var ids = _ids.join(",");
confirmx('你确定要删除此数据吗？',null,function(){
$.ajax({
url:'${ctx}/interfaces/interfaceTask/delete',
type:'post',
dataType:'json',
data:{id:ids},
success:function(res){
var code = res.code;
var message = res.message;
layer.msg(message);
$('#jqGrid').trigger('reloadGrid');
}
});}
);
}
$(function() {
$('#btnSubmit').click(function() {
var taskName = $("#taskName").val();
$('#jqGrid').jqGrid('setGridParam', {
datatype : 'json',
postData : {
taskName:taskName
}
}).trigger('reloadGrid');
});
});
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">任务列表</a></li>
</ul>
<div class="jqGrid_wrapper">
<div class="search_row">
<label class="col-sm-1">任务名称：</label>
<div class="col-sm-2">
<input id="taskName" name="taskName" type="text" class="form-control ipt-search"/>
</div>
<div class="col-sm-search">
<input id="btnSubmit" class="btn btn-sm btn-success" type="button" value="查询" />
<input id="btnReset" class="btn btn-sm btn-primary" type="button" value="重 置" />
<input id="btnDelete" class="btn btn-sm btn-danger" type="button" onclick="deleteDataBatch()" value="批量删除" />
</div>
</div>
<div class="search_row_split"></div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
@RequestMapping(value="loadList")
public void loadList(InterfaceTask param,HttpServletRequest request, HttpServletResponse response){
Page<InterfaceTask> page = interfaceTaskService.loadList(new Page<InterfaceTask>(request, response), param);
// List<InterfaceTask> list = page.getList();
// for (InterfaceTask interfaceTask : list) {
// ((InterfaceTaskServiceImpl)interfaceTaskService).swapEntity(interfaceTask);
// }
renderGrid(request, response, page);
}
@Override
public Page<InterfaceTask> loadList(Page<InterfaceTask> page, InterfaceTask entity) {
PageHelper.startPage(page.getPageNo(),page.getPageSize());
List<InterfaceTask> list = interfaceTaskMapper.loadList(entity);
return PageUtils.getInstance().getPage(list);
}
public class PageUtils<T> {
private static PageUtils instance = new PageUtils();
public static PageUtils getInstance(){
return instance;
}
/*
*
* 使用PageHelper插件，返回前端需要的Page对象
*
* */
public Page<T> getPage(List<T> list){
PageInfo<T> pageInfo = new PageInfo<>(list);
Page<T> result = new Page<>();
result.setCount(pageInfo.getTotal());
result.setPageSize(pageInfo.getPageSize());
result.setPageNo(pageInfo.getPageNum());
result.setList(list);
return result;
}
}
List<InterfaceTask> loadList(InterfaceTask task);
<sql id="New_List">
a.id AS id ,
a.task_id AS taskId,
a.task_name AS taskName,
a.period_number AS periodNumber,
a.create_time AS createTime,
a.update_time AS updateTime,
a.remarks AS remarks,
a.state AS state,
a.report_by AS "reportBy",
a.report_time AS reportTime,
a.confirm AS confirm
</sql>
<select id="loadList" parameterType="com.minglead.modules.interfaces.entity.InterfaceTask" resultType="com.minglead.modules.interfaces.entity.InterfaceTask">
SELECT
<include refid="New_List"/>
FROM pm_interface_task a
left join SYS_USER b on a.REPORT_BY = b.id
WHERE 1=1
<if test="taskName != null and taskName != ''">
AND a.task_name LIKE
<if test="dbName == 'oracle'">'%'||#{taskName}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{taskName}, '%')</if>
</if>
<if test="id != null">
AND a.id = #{id}
</if>
<if test="taskId != null and taskId != ''">
AND a.task_id = #{taskId}
</if>
<if test="periodNumber != null and periodNumber != ''">
AND a.period_number = #{periodNumber}
</if>
<!--
<if test="beginDate != null and beginDate != ''">
<![CDATA[ AND a.create_date >= #{beginDate}]]>
</if>
<if test="endDate != null and endDate != ''">
<![CDATA[ AND a.create_date <= #{endDate}]]>
</if>-->
<if test="state != null and state != ''">
AND a.state LIKE
<if test="dbName == 'oracle'">'%'||#{state}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{state}, '%')</if>
</if>
ORDER BY a.period_number DESC
</select>
/*@RequiresPermissions("interfaces:interfaceTask:edit")*/
@RequestMapping(value = "delete")
public void delete(@Param("id") String id, HttpServletResponse response,RedirectAttributes redirectAttributes) {
ActionResponse r = new ActionResponse(1,"删除成功！");
if(StringUtils.isEmpty(id)){
r.setMessage("删除失败,主键不能为null");
this.responseObject(r, response);
return;
}
String[] _id = id.split(",");
for(String id0:_id){
InterfaceTask temp = new InterfaceTask();
temp.setId(id0);
interfaceTaskService.deleteById(temp);
}
this.responseObject(r, response);
}
成品：
2.详情页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>监测制度查看</title>
<%@include file="/WEB-INF/views/include/head0.jsp" %>
<script type="text/javascript">
$(document).ready(function() {
initGrid();
});
window.onload=function() {
$("#jqgh_jqGrid_edit").text("操作");
};
function initGrid(){
$('#jqGrid').jqGrid({
url: '${ctx}/interfaces/interfaceMetadata/loadDetailData?tid=${entity.id}',
mtype: 'POST',
datatype: 'json',
responsive:true,
page: 1,
colModel: [
{ label: 'id', name: 'id', key: true, hidden:true},
{ label: '列名',name: 'columNname',index: 'columNname',width: 150, editable:true},
{ label: '数据类型',name: 'dataType',index: 'dataType',width: 150, editable:true, edittype:"select", editoptions:{value:"文本:文本;数字:数字"}},
{ label: '关联元数据编码',name: 'sourceCode',index: 'sourceCode',width: 150, editable:true},
{ label: '显示顺序',name: 'columOrder',index: 'columOrder',width: 150, editable:true},
{ label: '列宽',name: 'columnWidth',index: 'columnWidth',width: 150, editable:true},
{ label: '是否显示',name: 'display',index: 'display',width: 150, editable:true, edittype:"select", formatter:'select', editoptions:{value:"0:是;1:否"}},
{ label: '是否报表数据',name: 'isreport',index: 'isreport',width: 150, editable:true, edittype:"select", formatter:'select', editoptions:{value:"0:是;1:否"}},
{ label: '元数据分类',name: 'type',index: 'type',width: 150, editable:true, edittype:"select", editoptions:{value:"监测点:监测点;品类:品类;品种:品种;指标单位:指标单位;指标:指标"}},
{ label: '值域检查',name: 'ischeck',index: 'isCheck',width: 150, editable:true},
{ label: '计算列',name: 'expressioncolumn',index: 'expressioncolumn',width: 150, editable:true},
{ label: '值域数据源',name: 'range',index: 'range',width: 150, editable:true},
{ lable: '操作', name : 'edit',width : 210,height : 300,align : "right"}
// {label:'操作',name:'cz',search:false,sortable:false,title:false,formatter:czFmt,width:120}
],
viewrecords: true,
height: height,
rowNum: 10,
<%--postData:{--%>
<%-- tid : ${id}--%>
<%--},--%>
rowList:[10,20,30],
loadonce:false,
multiselect: true,
autowidth: true,
pager: '#jqGridPager',
gridComplete : function() { // 第二步：数据加载完成后 添加操作按钮
var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列id：287,288,289,290,291,292,293,294,295,296
// alert(ids.length); // 10
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn = "<div class='btnBox'> "
+ "<button type='button' οnclick='editParam("
+ id
+ ")'>编辑</button>"
+ "<button type='button' οnclick='saveParam("
+ id
+ ")'>保存</button>"
+ "<button type='button' οnclick='cancelParam("
+ id + ")'>取消</button> </div>"
// + "<button type='button' οnclick='deleteParam("
// + id + ")'>删除</button> </div>"
jQuery("#jqGrid").jqGrid('setRowData',ids[i], {edit : editBtn}); //给每一列添加操作按钮
}//end for (var i = 0; i < ids.length; i++)
}
});
$('#jqGrid').jqGrid('navGrid','#jqGridPager',{edit:false,add:false,del:false,search:false});
// $('#jqGrid').inlineNav('#jqGridPager',
// // the buttons to appear on the toolbar of the grid
// {
// edit: true,
// add: false,
// del: true,
// cancel: true,
// editParams: {
// keys: true,
// },
// addParams: {
// keys: true
// }
// });
}
function editParam(rowId) { //第三步：定义编辑操作
var parameter = {
oneditfunc : function(rowid) { //在行成功转为编辑模式下触发的事件，参数为此行数据id
alert("edited" + rowid);
}}
jQuery("#jqGrid").editRow(rowId);//开启可编辑模式
//jQuery("#jqGrid").editRow(rowId,parameter); //如果需要参数
jQuery('#jqGrid').jqGrid('editRow', rowId, true,pickdates);//开启可编辑模式
}
//第四步：定义保存操作，通过键值对把编辑的数据传到后台,如下
//{upperLimit: value1,lowerLimit:value2}
function saveParam(rowId) {
var parameter = {
url : "${ctx}/interfaces/interfaceMetadata/update", //代替jqgrid中的editurl
mtype : "POST",
extraparam : { // 额外 提交到后台的数据
},
successfunc : function(XHR) { //在成功请求后触发;事件参数为XHR对象，需要返回true/false;
// alert(XHR.responseText);//接收后台返回的数据(true)
if (XHR.responseText == "false") {
alert("保存失败");
return false; //返回false会使用修改前的数据填充,同时关闭编辑模式。
} else {
// alert("编辑成功");
return true; //返回true会使用修改后的数据填充当前行,同时关闭编辑模式。
}
}//end successfunc
}//end paramenter
jQuery('#jqGrid').saveRow(rowId, parameter);
}
//第五步：定义取消操作
function cancelParam(rowId) {
jQuery('#jqGrid').restoreRow(rowId); //用修改前的数据填充当前行
}
function czFmt(c,o,r){
var res='';
var id=r.id;
<%--res+='<a class="btn-success btn-sm" href="${ctx}/interfaces/interfaceMetadata/reportEdit?id='+id+'">编辑</a> ';--%>
<%--res+='<a class="btn-danger btn-sm" href="${ctx}/interfaces/interfaceTask/save'+r+'")">保存</a> ';--%>
// res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="saveData(\''+r+'\')">保存</a> ';
res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="saveData(\''+ JSON.stringify(r).replace(/"/g, '"') +'\')">保存</a> ';
res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="deleteData(\''+id+'\')">删除</a> ';
return res;
}
<%--function saveData(r){--%>
<%-- console.log(r);--%>
<%-- var dataValue = $.parseJSON(r);--%>
<%-- console.log(dataValue);--%>
<%-- confirmx('你确定要保存此数据吗？',null,function(){--%>
<%-- $.ajax({--%>
<%-- url:'${ctx}/interfaces/interfaceMetadata/update',--%>
<%-- type:'post',--%>
<%-- dataType:'json',--%>
<%-- // contentType:'application/json',--%>
<%-- data:dataValue,--%>
<%-- success:function(res){--%>
<%-- console.log(res);--%>
<%-- var code = res.code;--%>
<%-- var message = res.message;--%>
<%-- layer.msg(message);--%>
<%-- $('#jqGrid').trigger('reloadGrid');--%>
<%-- }--%>
<%-- });}--%>
<%-- );--%>
<%--}--%>
function deleteParam(id){
console.log(id);
confirmx('你确定要删除此数据吗？',null,function(){
$.ajax({
url:'${ctx}/interfaces/interfaceMetadata/deleteById',
type:'post',
dataType:'json',
data:{id:id},
success:function(res){
var code = res.code;
var message = res.message;
layer.msg(message);
$('#jqGrid').trigger('reloadGrid');
}
});}
);
}
function deleteDataBatch(ids){
var _ids=$('#jqGrid').jqGrid('getGridParam','selarrrow');
if(_ids.length==0){
layer.msg("请选择要操作的行！");
return
}
var ids = _ids.join(",");
confirmx('你确定要删除此数据吗？',null,function(){
$.ajax({
url:'${ctx}/interfaces/interfaceMetadata/deleteById',
type:'post',
dataType:'json',
data:{id:ids},
success:function(res){
var code = res.code;
var message = res.message;
layer.msg(message);
$('#jqGrid').trigger('reloadGrid');
}
});}
);
}
function startEdit() {
//var grid = $("#jqGrid");
// var ids = $gridCase.jqGrid('getDataIDs');
var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列
//循环开启行编辑
for (var i = 0; i < ids.length; i++) {
$('#jqGrid').jqGrid('editRow',ids[i]);
}
};
function saveDataBatch() {
var ids = $("#jqGrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
saveParam(ids[i]);
}
}
function cancelEdit() {
var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列
for (var i = 0; i < ids.length; i++) {
$('#jqGrid').jqGrid('restoreRow', ids[i]);
}
}
function doConfirm(id) {
console.log(id);
confirmx('你确定要确认吗？',null,function(){
$.ajax({
url:'${ctx}/interfaces/interfaceTask/confirm',
type:'post',
dataType:'json',
data:{id:id},
success:function(res){
var code = res.code;
var message = res.message;
layer.msg(message);
// 页面跳转回列表页
$(window).attr("location","${ctx}/interfaces/interfaceMetadata");
<%--$("#btnSave").attr("action", '${ctx}/interfaces/interfaceMetadata');--%>
// $('#jqGrid').trigger('reloadGrid');
}
});}
);
}
// $(function() {
// $('#btnSubmit').click(function() {
// var taskName = $("#taskName").val();
// $('#jqGrid').jqGrid('setGridParam', {
// datatype : 'json',
// postData : {
// taskName:taskName
// }
// }).trigger('reloadGrid');
// });
//
// });
<%--window.onload=function(){--%>
<%-- console.log(${entity.id});--%>
<%-- console.log(${entity.taskName});--%>
<%--};--%>
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">监测制度查看</a></li>
</ul>
<div class="jqGrid_wrapper">
<div class="search_row">
<div class="col-sm-search">
<%-- <input id="btnSubmit" class="btn btn-sm btn-success" type="button" value="查询" />--%>
<%-- <input id="btnReset" class="btn btn-sm btn-danger" type="button" value="重 置" />--%>
<input id="btnConfirm" class="btn btn-sm btn-info" type="button" onclick="doConfirm(${entity.id})" value="确认"/>
<input id="btnEdit" class="btn btn-sm btn-default" type="button" onclick="startEdit()" value="批量编辑"/>
<input id="btnSave" class="btn btn-sm btn-success" type="button" onclick="saveDataBatch()" value="批量保存"/>
<input id="btnCancel" class="btn btn-sm btn-warning" type="button" onclick="cancelEdit()" value="批量取消"/>
<input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceTask/reportList'" value="返回"/>
<%-- <input id="btnView" class="btn btn-sm btn-primary" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/preview?id='+${entity.id}+'&taskName='" value="预览"/>--%>
<input id="btnView" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/preview?id='+${entity.id}+'&taskName='+encodeURI(encodeURI('${entity.taskName}'))+''" value="预览"/>
<%-- <input id="btnDelete" class="btn btn-sm btn-danger" type="button" onclick="deleteDataBatch()" value="批量删除" />--%>
<%-- <input id="btnTest" class="btn btn-sm btn-danger" type="button" onclick="testP()" value="测试"/>--%>
</div>
</div>
<div class="search_row_split"></div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
3.预览页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>预览</title>
<%@include file="/WEB-INF/views/include/head0.jsp" %>
<%-- <style type="text/css">--%>
<%-- .table {table-layout:fixed;}--%>
<%-- </style>--%>
</head>
<body>
<%--<ul class="nav nav-tabs">--%>
<%-- <li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">监测制度查看</a></li>--%>
<%--</ul>--%>
<div style="text-align: center;">
<table class="table table-bordered" border="1" style="margin:auto;height:70%;width: 60%;font-size: 16px; table-layout: fixed;">
<caption style="text-align: center;font-size: 30px">${entity.taskName}</caption st>
<tr id="lineDrop">
<!-- 在这里面动态的添加th标签。 -->
</tr>
<tr id="lineTd">
<!-- 在这里面动态的添加td标签。 -->
</tr>
</table>
</div>
<script type="text/javascript">
// $(document).ready(function() {
// init();
// init1();
// });
$(function () {
init();
})
// $(function () {
// init1();
// })
window.onload=function () {
init1();
}
function init(){
$.ajax({
type:'post',
dataType: 'json',
url:'${ctx}/interfaces/interfaceMetadata/getColumn/${entity.id}',
// data:{},
success:function (result) {
// alert(result);// [object Object],[object Object],[object Object],[object Object],,,,,,
// alert(JSON.stringify(result));// [{"columNname":"监测点","columnWidth":"40"},{"columNname":"监测点1","columnWidth":"50"},{"columNname":"监测点2","columnWidth":"60"},{"columNname":"监测点3","columnWidth":"70"},"","","","","",""]
// var data = JSON.stringify(result);
// alert(data.length);// 182
// alert(result.length);// 10
// alert(data[0]);// [
// alert(result[0]);// [object Object]
var str = "";
$.each(result, function(idx, obj) {
str += "<th id = 'thId' style='text-align: center'>" + obj.columNname + "</th>";
// document.getElementById("thId").style.width= "400px";
});
// document.getElementsByTagName("th")[0].attributes.style.value = "30px";
console.log(document.getElementsByTagName("th")[0]);
console.log(str);
console.log(${entity.id});
<%--console.log(${entity.taskName});--%>
// for (var i = 0; i < 4; i++) {
// str += "<tr>" + "<th>" + result[i].columNname + "</th>" + "</tr>";
// }
// document.getElementById("lineDrop").innerHTML = str;
$("#lineDrop").append(str);
}
});
}
function init1(){
$.ajax({
type:'post',
dataType: 'json',
url:'${ctx}/interfaces/interfaceMetadata/getColumn/${entity.id}',
// data:{},
success:function (result) {
var data = JSON.stringify(result);
var str = "";
var str1 = "";
$.each(result, function(idx, obj) {
// document.getElementsByTagName("th")[0].attributes.style.width =
console.log(obj.columnWidth);
// alert(result.length);
document.getElementsByTagName("th")[idx].attributes.style.value = "text-align: center; width: " + obj.columnWidth + "px";
});
for (var i = 0; i < 15; i++) {
var str1 = "<tr>";
for (var j = 0; j < result.length; j++) {
str1 += "<td> </td>";
}
str1 += "</th>";
$("table").append(str1);
}
// document.getElementsByTagName("th")[0].attributes.style.value = "30px";
console.log(document.getElementById("lineDrop"));
console.log(document.getElementsByTagName("th"));
console.log(document.getElementsByTagName("th")[0].attributes.style.value);
// console.log(document.getElementsByTagName("th")[0].attributes.style);
console.log(str);
console.log(${entity.id});
}
});
}
</script>
<div class="jqGrid_wrapper">
<div class="search_row_split"></div>
<div align="center">
<%-- <a href="${ctx}/interfaces/interfaceMetadata/reportForm?id=${entity.id}&taskName=${entity.taskName}">返回</a>--%>
<input id="btnBack" class="btn btn-sm btn-default" type="button" onclick="location.href='${ctx}/interfaces/interfaceTask/reportList'" value="返回"/>
<%-- <input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/reportForm?id='+${entity.id}+''" value="返回"/>--%>
<%-- <input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/reportForm?id='+${entity.id}+'&taskName='+${entity.taskName}+''" value="返回"/>--%>
</div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
标签：jQuery,function,插件,jqGrid,ids,var,true,id 来源： https://blog.csdn.net/weixin_42426714/article/details/112918807