Java 在左侧jqgrid上选择一行时，相关行应在右侧jqgrid中高亮显示
我有一个要求，我将在一个页面中有两个jqgrids#grid1是角色列表，#grid2是特定角色可以执行的操作列表。现在，当我在grid1中选择一行（角色）时，与这些特定角色关联的操作应该在grid2中以某种颜色突出显示。 我在这里包括我的代码Java 在左侧jqgrid上选择一行时，相关行应在右侧jqgrid中高亮显示,java,jqgrid,Java,Jqgrid,我有一个要求，我将在一个页面中有两个jqgrids#grid1是角色列表，#grid2是特定角色可以执行的操作列表。现在，当我在grid1中选择一行（角色）时，与这些特定角色关联的操作应该在grid2中以某种颜色突出显示。 我在这里包括我的代码 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Role Managemen
<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>
角色管理
.ui jqgrid btable.ui状态高亮显示{背景：黄色；}
.ui jqgrid htable.ui jqgrid标签{背景色：绿色}
…ui pg表{背景：绿色}
.ui jqgrid.ui小部件头{
边框：1px实心#0b3e6f；
背景#7da600；
颜色：#40453a；
}
.ui jqgrid.ui jqgrid bdiv{overflow-y:scroll}
jQuery（文档）.ready（函数（）{
var lastSel，lastSel1，
网格=$（“#roleMgmtTable”），
gridavail=$（“#可用操作”）；
grid.jqGrid({
url:“角色列表”，
数据类型：“json”
jsonReader:{repeatitems:false，id:“ref”}，
colNames:['Id'、'role Name'、'Description'、'Status']，
colModel：[
{名称：'roleName'，索引：'roleId'，宽度：150，可编辑：true，sorttype:'text'，隐藏：true}，{名称：'roleName'，索引：'roleName'，宽度：150，可编辑：true，sorttype:'text'，编辑规则：{text:true}，}，{名称：'description'，索引：'description'，宽度：150，可编辑：true，sorttype:'text'}，{名称：'status'，索引：'status'，宽度：150，可编辑：true，sorttype:'text'}，
行列表：[10,20,50,100]，
寻呼机：“pagingDiv”，
viewrecords：是的，
sortname:“roleName”，
分拣员：“asc”，
editurl:“LoadJsonDataServlet？type=BS21 7RH”，
标题：“角色管理”，
身高：200，
editurl:“角色列表”，
ondblClickRow：函数（id、ri、ci）{
jqGrid（'editRow'，id，true，null，null，'rolesList'）；
},
});
jqGrid（'navGrid'，“#pagingDiv”，{edit:true，add:true，del:true，search:false，refresh:false}，
//编辑选项
{
savekey:[true，13]，
reloadAfterSubmit：对，
//jqModal：是的，
closeOnEscape：没错，
closeAfterEdit:true，
身高：300，
宽度：500，
b提交：“更新”，
取消：“关闭”，
关闭：“关闭”，
editCaption:“编辑记录”
},
//添加选项
{
savekey:[true，13]，
reloadAfterSubmit：对，
//jqModal：是的，
身高：300，
宽度：500，
b提交：“保存”，
取消：“关闭”，
关闭：“关闭”，
addCaption:“添加记录”，
closeOnEscape：没错，
closeAfterAdd:true，
closeOnEscape：真的
},
//删除选项
{
closeOnEscape：没错，
多重搜索：错误，
reloadAfterSubmit：对，
closeAfterSearch：错误，
b提交：“删除”，
取消：“关闭”，
关闭：“关闭”，
onclickSubmit:函数（参数）{
var列表=$（“#roleMgmtTable”）；
var selectedRow=list.getGridParam（“selrow”）；
rowData=list.getRowData（selectedRow）；
返回行数据；
}
}
);
gridavail.jqGrid({
url:“optsList”，
数据类型：“json”，
jsonReader:{repeatitems:false，id:“ref”}，
colNames:['Id'，'Name'，'Description']，
colModel:[{name:'id'，index:'id'，width:150，可编辑：true，sorttype:'text'，hidden:true}，{name:'name'，index:'name'，width:150，可编辑：true，sorttype:'text'，editrules:{text:true}，{name:'description'，index:'description'，width:300，可编辑：true，sorttype:'text}]，
行列表：[10,20,60100]，
寻呼机：“pagingDiv1”，
viewrecords：是的，
sortname:'名称'，
分拣员：“asc”，
editurl:“LoadJsonDataServlet？type=BS21 7RH”，
标题：“可用操作”，
身高：200，
多选：对，
editurl:'客户端阵列'，
ondblClickRow：函数（id、ri、ci）{
//编辑行并按“回车”键保存
jqGrid（'editRow'，id，true，null，null，'clientArray'）；
},
OnSetrow:功能（id）{
if（id&&id！==lastSel1）{
如果（lastSel1的类型！=“未定义”）{
jqGrid（'restoreRow'，lastSel1）；
}
lastSel1=id；
}
}
});
$（“#保存_角色_操作”）。单击（函数（）{
var myGrid=$（“#roleMgmtTable”）；
selRowId=myGrid.jqGrid（'getGridParam'，'selrow'）；
roleIdValue=myGrid.jqGrid（'getCell'，selRowId'，roleId'）；
var avaGrid=$（“#可用操作”）；
selopIds=avaGrid.jqGrid（'getGridParam'，'selarrrow'）；
seloparval=“”
如果（selopIds==“”）{
}else if（selopIds！=“”）{
selOpArr=selopIds.toString（）.split（“，”）；
对于（i=0；i您可以在左侧网格（主网格）上添加onsetrow
回调。在选择左侧网格（主网格）中的一行后，jqGrid将调用回调。您将获得所选行的id
下一步：您应该在某个地方获得与角色关联的操作的信息。例如，您可以将信息保存在角色网格的隐藏列中。您需要将信息包含在用于填充网格的服务器响应中。例如，角色网格的操作ID
列可以包含以逗号分隔的操作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]);
}
}
onsetrow:函数（rowid）{
var operationIds=$（this）.jqGrid（“g