Jqx小部件 - 无法关闭jqx嵌套网格中的父行
大家好，我正在使用jqx嵌套网格。一旦我展开父行，它就会隐藏，我无法关闭子行。任何有关这方面的帮助都是可以理解的。在下面找到我的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<!-- <script type="text/javascript" src="jqwidgets/jquery-1.9.1.js"></script> -->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jqx-all.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/divpopup.css" />
<link rel="stylesheet" href="../css/jqx.energyblue.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/admin.css">
<link rel="stylesheet" type="text/css" href="../css/admindiv.css">
<link rel="stylesheet" type="text/css" href="../css/reportDiv.css" />
<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jqx-all.js"></script>
<script type="text/javascript" src="../js/jqXGridNestedReport.js"></script>
<script type="text/javascript" src="../js/charts.js"></script>
<script type="text/javascript" src="../js/jqxdraw.js"></script>
<script type="text/javascript" src="../js/jqxchart.core.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript" src="../js/excelReport.js"></script>
<script type="text/javascript">
var rows = [];
var main = [];
var headerArr;
var innerRows = [];
var innerHeader;
var resValue;
var reportName = '';
var fil = '';
var fromDate, toDate, empId, empName, dept, shiftName, category,designation,userType,deptName;
var gridData;
var keyValue;
var reportStatus = '';
var comboData = 'productionReport';
var multiExcelData = [];
var ctx = window.location.toString().split("/");
var rootURL = ctx[0]+"/"+ctx[1]+"/"+ctx[2]+"/"+ctx[3]+"/rest/";
$(document).ready(function () {
$
.ajax({
tradional : true,
type : "POST",
url : rootURL+"reports/filter",
data : {
option : comboData,
/* fromDate : fromDate,
toDate : c,
empId : empId,
empName : empName,
dept : dept,
shiftName : shiftName,
category : category,
continuousDays : "",
loc : "",
designation:designation */
},
dataType : "json",
success : function(result) {
//alert(JSON.stringify(result.innerList));
multiExcelData = [];
if((result.outerList!=null&&result.outerList!=0)){
alert("outerList");
//////////////////////////////////////////////////
if (typeof (result.outerList.keyValue) != "undefined") {
keyValue = result.outerList.keyValue;
headerArr = Object.keys(result.outerList.obj[0]);
} else {
headerArr = Object.keys(result.outerList[0]);
}
rows = [];
var data1 = headerArr;
for ( var i = 0; i < data1.length; i++) {
var obj = {};
obj['text'] = data1[i].toUpperCase();
obj['datafield'] = data1[i];
obj['width'] = 150;
obj['columntype'] = 'textbox';
obj['filtertype'] = 'input';
rows.push(obj);
obj = null;
}
////////////////////////////////////////////////////////
if (typeof (result.innerList.keyValue) != "undefined") {
keyValue = result.innerList.keyValue;
innerHeader = Object.keys(result.innerList.obj[0]);
} else {
innerHeader = Object.keys(result.innerList[0]);
}
innerRows = [];
var data2 = innerHeader;
for ( var i = 0; i < data2.length; i++) {
var obj = {};
obj['text'] = data2[i].toUpperCase();
obj['datafield'] = data2[i];
//obj['width'] = 170;
obj['columntype'] = 'textbox';
obj['filtertype'] = 'input';
innerRows.push(obj);
obj = null;
}
//////////////////////////////////////////////////////
var tdData = result.outerList;
var source =
{
//datafields:rows,
id: 'dept_Code',
datatype: "json",
async: false,
localdata: tdData
};
var orderdetailsurl = result.innerList;
// alert("innerList "+JSON.stringify(orderdetailsurl));
var ordersSource =
{
// datafields: innerRows,
datatype: "json",
localdata: orderdetailsurl,
async: false
};
var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
var nestedGrids = new Array();
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
// var id = '9709';
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = 'equal';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result1 = filter.evaluate(orders[m]["deptCode"]);
if (result1)
ordersbyid.push(orders[m]);
}
// var secondaryDataFields = $.parseJSON('[{ "name": "UserId", "type": "int" },{ "name": "TransactionName", "type": "string" },{ "name": "tranDate", "type": "string" },{ "name": "tranUser", "type": "string" }]');
var orderssource1 = {
// datafields: innerRows,
id: 'dept_Code',
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource1);
// var secondaryGridColumn = $.parseJSON('[{ "text": "User Id", "datafield":"UserId" , "hidden":"true"},{ "text": "Transaction Name", "datafield":"TransactionName" },{ "text": "Transaction Date", "datafield":"tranDate" },{ "text": "User", "datafield":"tranUser" }]');
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,
columns: innerRows
});
}
}
// creage jqxgrid
$('#jqxgrid').jqxGrid('clear');
$("#jqxgrid").jqxGrid(
{
width: 850,
height: 365,
theme : 'nspl',
sortable: true,
source: source,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$("#jqxgrid").jqxGrid('showrowdetails', 1);
},
//columns: [{ text: 'User Id', datafield: 'UserId', hidden: true }, { text: 'My Transactions', datafield: 'TransactionName' }]
columns:rows
});
}
else{
//alert("Other report"+"-----"+result.keyValue);
}
},
error : function(e) {
alert("ajax error " + e.message);
}
});
});
</script>
<title>JQWidget JQX Nested Grip Implementation @ SibeeshPassion </title>
</head>
<body class='default'>
JQWidget JQX Nested Grip Implementation @ SibeeshPassion <br />
<div id="jqxgrid">
</div>
<!-- <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script> -->
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
</body>
</html>