jqGrid及普通表格:
jqGrid虽然功能十分强大,但加载速度比普通表格要慢。。
普通表格的生成使用
<div class="widget-body">
<hql:queryForList hql="from Batch where product.id=${product.id}" id="batches"/>
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<c:forEach items="${batches}" var="b" >
<tr>
<td><a href="${ctx}/scm/batch.action?method:editForm&batch.id=${b.id}">${b.bomSerialNo}</a></td>
<td>${b.title}</td>
<td>${b.remark}</td>
</tr>
</c:forEach>
</tbody>
</table>
为空格。
jqGrid的生成和使用
首先,需要引入对应所需的内容:
<%@ include file="/common/meta_scm_jquery_new.jsp"%>
<%@ include file="/common/css_table2.jsp"%>
<link rel="stylesheet" type="text/css" href="${ ctx}/scripts/jquery.jqGrid-4.5.4/css/ui.jqgrid.css">
<script src="${ ctx}/scripts/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="${ ctx}/scripts/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript" src="${ ctx}/scripts/littleBox.js"></script>
然后定义table id
<div class="space-6"></div>
<table id="bomGrid"></table>
<div class="space-6"></div>
//定义一个table 并设置id为bomGrid
//$(document).ready(function()){}
设置为一开始就加载页面。和window.load类似,
这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的dom加载完不代表全部文件加载完)。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
$(document).ready(function(){
var productId = $("#productId").val();
jQuery("#bomGrid").jqGrid({
url:'${ctx}/scm/billOfMate.action?method:bomList&productId='+productId,
//url跳转到对应的action的方法中,通过方法返回的json数据,生成对应的表格数据.
datatype: "json",
width: '100%',
height: '100%',
//colNames和colModel需要对应一致。
colNames: ["序号","货品序号","版本号","标题","备注"],
colModel: [
{name: "id",hidden:true},
{name:"productId",hidden:true},
{name: "SerialNo", editable:false,resizable: true,width:500},
{name: "f_title", editable:false,resizable: true,width:500},
{name: "f_remark",editable:true,width:500},
],
rownumbers: true,
rowNum:1000,
rowList:[10,20,30],
sortname: 'SerialNo',
viewrecords: true,
sortorder: "desc",
multiselect: false,
//根据选好的一行,做对应的处理
//window.location进行页面的跳转,window.parent.location父页面的跳转,iframe
onSelectRow: function(rowId) {
var rowData = $("#bomGrid").jqGrid("getRowData",rowId);
window.location='${ctx}/scm/billOfMate.action?method:viewBillOfMate&product_Id='+rowData.productId+'&SerialNo='+rowData.SerialNo+'&Remark='+rowData.f_remark+'&Title='+rowData.f_title;
}
});
jQuery("#bomGrid").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});
loadBarcodeList();
});
public void bomList(){
Long productId = Long.parseLong(getRequest().getParameter("productId"));
System.out.println("productId"+productId);
String productSql = "SELECT f_bom_serial_no,f_remark,f_title FROM t_batch WHERE f_product_id = " + productId;
JSONObject rtn = new JSONObject();
JSONArray rows = new JSONArray();
//String remarkSql = "SELECT f_remark FROM t_bill_of_mate WHERE f_product_id = " + productId;
List<Map> SerialNo = manager.findByNativeSqlAsMap(productSql, null);
//List<Map> Remark = manager.findByNativeSqlAsMap(remarkSql, null);
System.out.println("SerialNo"+SerialNo);
conf.setJsonPropertyFilter(new PropertyFilter(){
public boolean apply(Object source, String name, Object value) {
return true;
}
});
for(Map m : SerialNo){
JSONObject o = JSONObject.fromObject(m,conf);
o.put("SerialNo", m.get("f_bom_serial_no"));
o.put("productId", productId);
o.put("f_remark", m.get("f_remark"));
o.put("f_title", m.get("f_title"));
rows.add(o);
}
rtn.put("rows", rows);
responseWrite(rtn.toString());
}
写入的json数据对应到表格中。