jqGrid及普通表格的生成和使用

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>
&nbsp;   为空格。   

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数据对应到表格中。