在左侧 jqgrid 上选择一行时，相关行应在右侧 jqgrid 中突出显示
on selecting a row on left jqgrid, the associated rows should be highlighted in right side jqgrid
我有一个要求，我将在一个页面中有两个 jqgrid。 #grid1 是角色列表，#grid2 是特定角色可以执行的操作列表。现在，当我 select grid1 中的一行（角色）时，与这些特定角色关联的操作应该在 grid2 中以某种颜色突出显示。
我在这里包含我的代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Role Management</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<style type='text/css'>
.ui-jqgrid-btable .ui-state-highlight { background: yellow; }
.ui-jqgrid-htable .ui-jqgrid-labels {background-color:green}
..ui-pg-table {background:green}
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #7da600;
color: #40453a;
}
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }
</style>
<script type='text/javascript'>
jQuery(document).ready(function () {
var lastSel,lastSel1,
grid=$("#roleMgmtTable"),
gridavail=$("#AvailableOperations");
grid.jqGrid({
url: "rolesList",
datatype: "json",
jsonReader: {repeatitems: false, id: "ref"},
colNames:['Id','role Name','Description', 'Status'],
colModel:[
{name:'roleId',index:'roleId',width:150,editable:true,sorttype:'text',hidden:true},{name:'roleName',index:'roleName',width:150,editable:true,sorttype:'text',editrules:{text:true},},{name:'description',index:'description', width:150,editable:true,sorttype:'text'},{name:'status',index:'status', width:150,editable:true,sorttype:'text'}],
rowList:[10, 20, 50, 100],
pager: "#pagingDiv",
viewrecords: true,
sortname: 'roleName',
sortorder: "asc",
editurl: "LoadJsonDataServlet?type=BS21 7RH",
caption: "Role Management",
height:200,
editurl: 'rolesList',
ondblClickRow: function(id, ri, ci) {
grid.jqGrid('editRow',id,true,null,null, 'rolesList');
},
});
grid.jqGrid('navGrid',"#pagingDiv",{edit:true,add:true,del:true,search:false, refresh:false},
// Edit options
{
savekey: [true, 13],
reloadAfterSubmit: true,
//jqModal: true,
closeOnEscape: true,
closeAfterEdit: true,
height:300,
width:500,
bSubmit: "Update",
bCancel: "Close",
bClose: "Close",
editCaption: "Edit Record"
},
// Add options
{
savekey: [true, 13],
reloadAfterSubmit: true,
//jqModal: true,
height:300,
width:500,
bSubmit: "Save",
bCancel: "Close",
bClose: "Close",
addCaption: "Add Record",
closeOnEscape: true,
closeAfterAdd: true,
closeOnEscape: true
},
// Delete options
{
closeOnEscape: true,
multipleSearch: false,
reloadAfterSubmit:true,
closeAfterSearch: false,
bSubmit: "Delete",
bCancel: "Close",
bClose: "Close",
onclickSubmit: function (params) {
var list = $("#roleMgmtTable");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
return rowData;
}
}
);
gridavail.jqGrid({
url: "optsList",
datatype: "json",
jsonReader: {repeatitems: false, id: "ref"},
colNames:['Id','Name','Description'],
colModel: [{name:'id',index:'id',width:150,editable:true,sorttype:'text',hidden:true},{name:'name',index:'name', width:150,editable:true,sorttype:'text',editrules:{text:true},},{name:'description',index:'description',width:300,editable:true,sorttype:'text'}],
rowList:[10,20,60,100],
pager: "#pagingDiv1",
viewrecords: true,
sortname: 'name',
sortorder: "asc",
editurl: "LoadJsonDataServlet?type=BS21 7RH",
caption: "Available Operations",
height:200,
multiselect: true,
editurl: 'clientArray',
ondblClickRow: function(id, ri, ci) {
// edit the row and save it on press "enter" key
gridavail.jqGrid('editRow',id,true,null,null, 'clientArray');
},
onSelectRow: function(id) {
if (id && id !== lastSel1) {
if (typeof lastSel1 !== "undefined") {
gridavail.jqGrid('restoreRow',lastSel1);
}
lastSel1 = id;
}
}
});
$('#save_role_operation').click(function(){
var myGrid = $("#roleMgmtTable");
selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
roleIdValue = myGrid.jqGrid ('getCell', selRowId, 'roleId');
var avaGrid = $("#AvailableOperations");
selopIds = avaGrid.jqGrid('getGridParam','selarrrow');
selOpArrVal=""
if(selopIds==""){
}else if(selopIds!=""){
selOpArr = selopIds.toString().split(",");
for(i=0;i<selOpArr.length;i++){
if(i < selOpArr.length-1){
selOpArrVal = selOpArrVal + avaGrid.jqGrid ('getCell', selOpArr[i], 'id') +",";
}else if(i==selOpArr.length-1){
selOpArrVal = selOpArrVal + avaGrid.jqGrid ('getCell', selOpArr[i], 'id');
}
}
console.log("roleId value="+roleIdValue);
console.log("selOpArrVal value="+selOpArrVal);
$.ajax({
data: {"roleId":roleIdValue,"avaOpList":selOpArrVal},
success: function(data){
console.log("device control succeeded"+data);
},
error: function(errMsg){
console.log("Device control failed");
},
type: 'POST',
url: "roleOperationsList"
});
}
});
});
</script>
</head>
<body>
<form id='myForm'>
<div style="float:left;width:1155px;height:100%">
<table border=0>
<tr>
<td style="border-left: 3px solid #cdd0d4;"/>
<td>
<table style="width:100%;">
<tr><td bgcolor="#666666" style="color:white">Application Roles</td> </tr>
<tr>
<td>
<div>
<div style="width:100%;border:1px;">
<div style="float: left;border:1px;">
<table id="roleMgmtTable"></table>
<div id="pagingDiv"></div>
</div>
<div style="float: left;padding:0px 0px 0px 20px">
<table id="AvailableOperations"></table>
<div id="pagingDiv1"></div>
<div style="float:left;">
<div style="padding:10px 0px 0p 0px">
<div style="float: left;background: #7da600;">
<button class="save_role_operation" id="save_role_operation">Save Role Operation</button></div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td style="border-left: 3px solid #cdd0d4;"/>
</tr>
</table>
<div >
<div style="display:inline-block;" ><a href="Home">Home</a></div>
</div>
</div>
</form>
</body>
</html>
当我 select 左侧网格上的角色和右侧网格上的操作并单击按钮保存角色操作时，roleId 和 operationId 将被保存到一个关联 table 与列 role_id 和 operation_id。所以现在如果我 select 角色（行），我应该在右边的网格中看到相关的操作。
谁能帮我解决这个问题？
您可以在左侧网格（主网格）上添加 onSelectRow 回调。在左侧网格（主网格）中的一行被选中后，回调将由 jqGrid 调用。您将获得所选行的 id（rowid）。
下一步：您应该从某处获取与该角色关联的操作的信息。例如，您可以将信息保存在角色网格的隐藏列中。您需要在用于填充网格的服务器响应中包含该信息。角色网格的 operationIds 列可以包含例如逗号分隔的操作 ID 列表。在这种情况下，实施可能如下：
onSelectRow: function (rowid) {
var operationIds = $(this).jqGrid("getCell", rowid, "operationIds").split(","),
i, n = operationIds.length;
gridavail.jqGrid("resetSelection");
for (i = 0; i < n; i++) {
gridavail.jqGrid("setSelection", operationIds[i]);
}
}
我有一个要求，我将在一个页面中有两个 jqgrid。 #grid1 是角色列表，#grid2 是特定角色可以执行的操作列表。现在，当我 select grid1 中的一行（角色）时，与这些特定角色关联的操作应该在 grid2 中以某种颜色突出显示。 我在这里包含我的代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Role Management</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<style type='text/css'>
.ui-jqgrid-btable .ui-state-highlight { background: yellow; }
.ui-jqgrid-htable .ui-jqgrid-labels {background-color:green}
..ui-pg-table {background:green}
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #7da600;
color: #40453a;
}
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }
</style>
<script type='text/javascript'>
jQuery(document).ready(function () {
var lastSel,lastSel1,
grid=$("#roleMgmtTable"),
gridavail=$("#AvailableOperations");
grid.jqGrid({
url: "rolesList",
datatype: "json",
jsonReader: {repeatitems: false, id: "ref"},
colNames:['Id','role Name','Description', 'Status'],
colModel:[
{name:'roleId',index:'roleId',width:150,editable:true,sorttype:'text',hidden:true},{name:'roleName',index:'roleName',width:150,editable:true,sorttype:'text',editrules:{text:true},},{name:'description',index:'description', width:150,editable:true,sorttype:'text'},{name:'status',index:'status', width:150,editable:true,sorttype:'text'}],
rowList:[10, 20, 50, 100],
pager: "#pagingDiv",
viewrecords: true,
sortname: 'roleName',
sortorder: "asc",
editurl: "LoadJsonDataServlet?type=BS21 7RH",
caption: "Role Management",
height:200,
editurl: 'rolesList',
ondblClickRow: function(id, ri, ci) {
grid.jqGrid('editRow',id,true,null,null, 'rolesList');
},
});
grid.jqGrid('navGrid',"#pagingDiv",{edit:true,add:true,del:true,search:false, refresh:false},
// Edit options
{
savekey: [true, 13],
reloadAfterSubmit: true,
//jqModal: true,
closeOnEscape: true,
closeAfterEdit: true,
height:300,
width:500,
bSubmit: "Update",
bCancel: "Close",
bClose: "Close",
editCaption: "Edit Record"
},
// Add options
{
savekey: [true, 13],
reloadAfterSubmit: true,
//jqModal: true,
height:300,
width:500,
bSubmit: "Save",
bCancel: "Close",
bClose: "Close",
addCaption: "Add Record",
closeOnEscape: true,
closeAfterAdd: true,
closeOnEscape: true
},
// Delete options
{
closeOnEscape: true,
multipleSearch: false,
reloadAfterSubmit:true,
closeAfterSearch: false,
bSubmit: "Delete",
bCancel: "Close",
bClose: "Close",
onclickSubmit: function (params) {
var list = $("#roleMgmtTable");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
return rowData;
}
}
);
gridavail.jqGrid({
url: "optsList",
datatype: "json",
jsonReader: {repeatitems: false, id: "ref"},
colNames:['Id','Name','Description'],
colModel: [{name:'id',index:'id',width:150,editable:true,sorttype:'text',hidden:true},{name:'name',index:'name', width:150,editable:true,sorttype:'text',editrules:{text:true},},{name:'description',index:'description',width:300,editable:true,sorttype:'text'}],
rowList:[10,20,60,100],
pager: "#pagingDiv1",
viewrecords: true,
sortname: 'name',
sortorder: "asc",
editurl: "LoadJsonDataServlet?type=BS21 7RH",
caption: "Available Operations",
height:200,
multiselect: true,
editurl: 'clientArray',
ondblClickRow: function(id, ri, ci) {
// edit the row and save it on press "enter" key
gridavail.jqGrid('editRow',id,true,null,null, 'clientArray');
},
onSelectRow: function(id) {
if (id && id !== lastSel1) {
if (typeof lastSel1 !== "undefined") {
gridavail.jqGrid('restoreRow',lastSel1);
}
lastSel1 = id;
}
}
});
$('#save_role_operation').click(function(){
var myGrid = $("#roleMgmtTable");
selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
roleIdValue = myGrid.jqGrid ('getCell', selRowId, 'roleId');
var avaGrid = $("#AvailableOperations");
selopIds = avaGrid.jqGrid('getGridParam','selarrrow');
selOpArrVal=""
if(selopIds==""){
}else if(selopIds!=""){
selOpArr = selopIds.toString().split(",");
for(i=0;i<selOpArr.length;i++){
if(i < selOpArr.length-1){
selOpArrVal = selOpArrVal + avaGrid.jqGrid ('getCell', selOpArr[i], 'id') +",";
}else if(i==selOpArr.length-1){
selOpArrVal = selOpArrVal + avaGrid.jqGrid ('getCell', selOpArr[i], 'id');
}
}
console.log("roleId value="+roleIdValue);
console.log("selOpArrVal value="+selOpArrVal);
$.ajax({
data: {"roleId":roleIdValue,"avaOpList":selOpArrVal},
success: function(data){
console.log("device control succeeded"+data);
},
error: function(errMsg){
console.log("Device control failed");
},
type: 'POST',
url: "roleOperationsList"
});
}
});
});
</script>
</head>
<body>
<form id='myForm'>
<div style="float:left;width:1155px;height:100%">
<table border=0>
<tr>
<td style="border-left: 3px solid #cdd0d4;"/>
<td>
<table style="width:100%;">
<tr><td bgcolor="#666666" style="color:white">Application Roles</td> </tr>
<tr>
<td>
<div>
<div style="width:100%;border:1px;">
<div style="float: left;border:1px;">
<table id="roleMgmtTable"></table>
<div id="pagingDiv"></div>
</div>
<div style="float: left;padding:0px 0px 0px 20px">
<table id="AvailableOperations"></table>
<div id="pagingDiv1"></div>
<div style="float:left;">
<div style="padding:10px 0px 0p 0px">
<div style="float: left;background: #7da600;">
<button class="save_role_operation" id="save_role_operation">Save Role Operation</button></div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td style="border-left: 3px solid #cdd0d4;"/>
</tr>
</table>
<div >
<div style="display:inline-block;" ><a href="Home">Home</a></div>
</div>
</div>
</form>
</body>
</html>
当我 select 左侧网格上的角色和右侧网格上的操作并单击按钮保存角色操作时，roleId 和 operationId 将被保存到一个关联 table 与列 role_id 和 operation_id。所以现在如果我 select 角色（行），我应该在右边的网格中看到相关的操作。
您可以在左侧网格（主网格）上添加 onSelectRow 回调。在左侧网格（主网格）中的一行被选中后，回调将由 jqGrid 调用。您将获得所选行的 id（rowid）。
下一步：您应该从某处获取与该角色关联的操作的信息。例如，您可以将信息保存在角色网格的隐藏列中。您需要在用于填充网格的服务器响应中包含该信息。角色网格的 operationIds 列可以包含例如逗号分隔的操作 ID 列表。在这种情况下，实施可能如下：
onSelectRow: function (rowid) {
var operationIds = $(this).jqGrid("getCell", rowid, "operationIds").split(","),
i, n = operationIds.length;
gridavail.jqGrid("resetSelection");
for (i = 0; i < n; i++) {
gridavail.jqGrid("setSelection", operationIds[i]);
}
}