各位大侠，
有个问题想请大家帮忙，就是我用easyui做页面开发，设计了订单录入界面，有表单表头及订单明细，
就是我怎样设计这样页面，同时怎样将该页面的数据提交到controller，哪位好心的大侠能帮忙解答一下我该怎样设计并怎样进行数据的提交，最好有相应的代码，万分感谢！
1.下面是controller
@RequestMapping("/add")
@ResponseBody
public Json add(SaleList saleList) {
System.out.println("SaleList saleList---->");
Json j = new Json();
try {
saleListService.add(saleList);
j.setSuccess(true);
j.setMsg("添加成功！");
} catch (Exception e) {
j.setMsg(e.getMessage());
}
return j;
}
2.下面是页面
<body class="easyui-layout">
<div data-options="region:'north'" style="height: 135px;padding: 10px;border: 0px;padding-top: 20px">
<fieldset style="border-color: #E7F0FF">
<legend>单号：<span id="dh"></span></legend>
<form id="fm" method="post">
<table cellspacing="8px">
<tr>
<td>
客 户：
<select id="customerId" name="customerId" class="easyui-combobox" style="width: 200px; height: 29px;" data-options="width:140,editable:false,panelHeight:'auto'">
<option value="">全部</option>
<c:forEach items="${customerList}" var="customer">
<option value="${customer.id}" >${customer.custName}</option>
</c:forEach>
</select>
</td>
<td>
应付金额：<input type="text" id="amountPayable" name="amountPayable" class="easyui-validatebox" required="true" readonly="readonly" size="10"/>
</td>
<td>
实付金额：<input type="text" id="amountPaid" name="amountPaid" class="easyui-validatebox" required="true" size="10"/>
</td>
<td>
销售日期：<input type="text" id="saleDate" name="saleDate" class="easyui-datebox" required="true" data-options="editable:false" size="18"/>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
备 注：<input type="text" id="remarks" name="remarks" size="78"/>
</td>
<td>
是否付款：<select class="easyui-combobox" id="state" name="state" style="width: 160px" editable=false panelHeight="auto">
<option value="1">已付</option>
<option value="2">未付</option>
</select>
</td>
<td>
<input type="hidden" id="saleNumber" name="saleNumber"/>
<input type="hidden" id="goodsJson" name="goodsJson"/>
<a href="javascript:saveSaleGoods()" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
</td>
</tr>
</table>
</form>
</fieldset>
</div>
<div data-options="region:'center'" style="padding: 10px;border: 1px">
<table id="dg" class="easyui-datagrid" style="height：1200px"
fitColumns="true" rownumbers="true" singleSelect="true"
fit="true" toolbar="#tb">
<thead>
<th field="code" width="30" align="center">商品编码</th>
<th field="name" width="150" align="center">商品名称</th>
<th field="model" width="50" align="center">商品型号</th>
<th field="unitInfoId" hidden="true">单位ID</th>
<th field="unitInfoName" width="50" align="center">单位</th>
<th field="price" width="50" align="center">单价</th>
<th field="num" width="50" align="center">数量</th>
<th field="total" width="50" align="right">总金额</th>
</thead>
</table>
<div id="tb">
<div style="padding: 2px">
<a href="javascript:openSaleListGoodsAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:openSaleListGoodsModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteSaleListGoods()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
</div>
</div>
</body>
