利用jqGrid二级表格以及分页,需要实现access数据库的数据分组显示。但是不知道数据库查询出来的数据改怎样转换格式后传入jqGrid中显示?完整代码如下,代码中注释的地方不知道怎样补充和修改?(本地access数据库,html在IE下打开)
完整代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Report</title>
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css">
<link type="text/css" rel="stylesheet" href="css/myjqGrid.css">
<link type="text/css" rel="stylesheet" href="css/mypage.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/laydate.js"></script>
<script type="text/javascript" src="js/conn_db.js"></script>
<script type="text/javascript">
function querydb(){
var selectString="select * from ReportBatchList where DateTime>=#"+DateS+" 00:00:00# and DateTime<=#"+DateE+" 23:59:59# ORDER BY DateTime DESC";
var rs=new ActiveXObject("ADODB.Recordset");
rs=conn.execute(selectString);
.
. //此处需要在查询数据库数据后,再进行转换格式后传入jqGrid二级表格显示
.
.
applyFilter();
}
$(function(){
applyFilter();
});
function applyFilter()
{
$("#Datalist").jqGrid('GridUnload');
$("#Datalist").jqGrid({
data: mydata, //此处来自数据库主数据
datatype: "local",
colModel: [
{name:"DateTime",index:"DateTime",label:"Date",width:80},
{name:"Description",index:"Description",label:"Description",width:160,sortable:false},
],
height:500,
width:800,
hoverrows:false,
loadonce:true,
viewrecords: true,
rowNum: 1000,
hidegrid: false,
shrikToFit: false,
subGrid: true,
beforeSelectRow: function(rowid, e) {
return false;
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
$("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
data: mydata, //此处来自数据库详细数据
datatype: "local",
colNames: ['Code','BTName','PRName','QTY'],
colModel: [
{name:"FabCode",index:"FabCode",width:80,key:true},
{name:"BatchName",index:"BatchName",width:130},
{name:"ProName",index:"ProName",width:80,align:"right"},
{name:"MainQty",index:"MainQty",width:80,align:"right"}
],
rowNum:50,
hoverrows:false,
loadonce:false,
height:250
});
}
});
}
</script>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td valign="top">
<table>
<tr>
<td><span>FROM : </span></td>
<td><input name="StartDate" id="Qds" style=" text-align:center" type="text" value="" size="12"></td>
</tr>
<tr>
<td><span>TO : </span></td>
<td><input name="EndDate" id="Qde" style=" text-align:center" type="text" value="" size="12"></td>
</tr>
<tr>
<td> </td>
<td><button onClick="querydb()">Search</button></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td>
<table id="Datalist"></table>
</td>
</tr>
</table>
<script type="text/javascript">
lay('#version').html('-v'+ laydate.v);
laydate.render({
elem: '#Qds',
value: currentDate,
showBottom: false,
done: function(){
DateS = document.getElementById('Qds').value;
}
});
laydate.render({
elem: '#Qde',
value: currentDate,
showBottom: false,
done: function(){
DateE = document.getElementById('Qde').value;
}
});
var DateS = document.getElementById('Qds').value;
var DateE = document.getElementById('Qde').value;
querydb();
</script>
</body>
</html>