1.
前台传值方式：前台传值为拼接字符串，
拼接类型：3个string，1二维数组，拼接为1个json串，传递给后台。
2. 难点：如何创建数组串，
解决方式，引入jsp页面，另外页面使用js遍历表格传为数组形式，然后在前台也转成json串
<tr class="item">
<td colspan="6">
<jsp:include page="../include/elec.jsp"></jsp:include>
</td>
</tr><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div id="xcForm">
<div class="input-item"><input type="hidden" id="xc_id"/>
</div>
<div class="input-item"><div id="xc_xcap" class="easyui-combobox no-valid" style="width:230px;" label="收入类型" editable="true" data-options="data:C.incameType,labelPosition:'top',tipPosition:'bottom'"></div> </div>
<div class="input-item">
<div id="xc_jtgj" class="easyui-combobox no-valid" style="width:230px;" label="电价类型" editable="true" data-options="data:C.elecIncame,labelPosition:'top',tipPosition:'bottom'"></div>
</div>
<div class="input-item"><input class="easyui-numberbox no-valid" id="xc_txrs" style="width:230px;" label="合同电价" data-options="labelPosition:'top',tipPosition:'bottom',precision:4,formatter: numberFilter"/></div>
<div id="xc_btn"><a class="easyui-linkbutton" οnclick="XC.add()" style="padding:0px 10px;">添加</a></div>
<div id="xc_btn"><input type="hidden" id="ptype" name="bean.ptype" class="easyui-textbox" ></div>
<div style="margin-left:5px;display:none;" id="xc_cancel"><a class="easyui-linkbutton btn-cancel" οnclick="XC.clearData()" style="padding:0px 10px;">取消编辑</a></div>
</div>
<div class="dev-10"></div>
<table class="easyui-datagrid" id="xcGrid" style="wdith:100%;height:auto;" data-options="scrollbarSize:0,nowrap:false,cls:'hjGrid',showFooter:true,data:XC.initData,fitColumns:true,rownumbers:true,onClickRow:XC.clearRow">
<thead>
<tr>
<th data-options="field:'xcap',width:100">收入类型</th>
<th data-options="field:'jtgj',width:100">电价类型</th>
<th data-options="field:'txrs',width:100">合同电价(元)</th>
<th data-options="field:'op',width:100,align:'right',formatter:XC.xcFormatter">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var C = {
//收入类型
incameType: [
{
text: "测试",
value: "测试"
}
],
//电价类型
elecIncame:[
{
text: "测试",
value: "测试"
}
],
}
/* var dataPtype = $("#ptype").val();
var ptypeArray = eval(dataPtype);
*/
// 行程对象
var XC = {
id: 1,
getId: function(){
return this.id++;
},
// 初始化数据
initData: {
rows: []
}
};
// 添加或编辑
XC.add = function() {
var id = $("#xc_id").val();
var isModify = id != 0;
var rs = {
id: isModify ? id : this.getId(),
"xcap": $("#xc_xcap").combobox("getValue"),
"jtgj": $("#xc_jtgj").combobox("getValue"),
"txrs": numberFilter($("#xc_txrs").numberbox("getValue")),
}
//都不能为空
/* for (var k in rs) {
var v = $.trim(rs[k]);
if (v == "") return;
} */
if(rs.xcap == "" || rs.xcap == null){
Toast.error("请输入收入类型");
return;
}
if (isModify) {
$("#xcGrid").datagrid("updateRow", {
index: XC.findRowIndex(id),
row: rs
});
}else{
$("#xcGrid").datagrid("appendRow", rs);
}
XC.clearData();
}
// 根据ID找行号
XC.findRowIndex = function(id) {
var rows = $("#xcGrid").datagrid("getRows");
var row;
for (var i = 0; i < rows.length; i++) {
var r = rows[i];
if (r.id == id) {
row = r;
break;
}
}
return $("#xcGrid").datagrid("getRowIndex", row);
}
// 格式化操作列
XC.xcFormatter = function(v, r, i) {
if (v == "hj") return "";
return opFormatter({
name: "编辑 ",
id: r.id,
click: "XC.modify"
},{
name: " 删除",
id: r.id,
click: "XC.deleteRow"
});
}
// 删除行
XC.deleteRow = function(btn) {
var id = $(btn).data("id");
$("#xcGrid").datagrid("deleteRow", XC.findRowIndex(id));
var fid = $("#xc_id").val();
if (id == fid) XC.clearData();
}
// 填充修改数据
XC.modify = function(btn) {
var id = $(btn).data("id");
var row = $("#xcGrid").datagrid("getRows")[XC.findRowIndex(id)];
$("#xc_xcap").combobox("setValue", row.xcap);
$("#xc_jtgj").combobox("setValue", row.jtgj);
$("#xc_txrs").numberbox("setValue", row.txrs);
$("#xc_id").val(row.id);
$("#xc_cancel").show();
$("#xc_btn .l-btn-text").html("修改");
}
// 清除表单数据
XC.clearData = function() {
$("#xc_xcap").combobox("clear");
$("#xc_jtgj").combobox("clear");
$("#xc_txrs").numberbox("clear");
$("#xc_id").val(0);
$("#xc_cancel").hide();
$("#xc_btn .l-btn-text").html("添加");
}
// grid不允许选中行
XC.clearRow = function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
}
// 格式化行程数据后传递给后台
XC.getFormatData = function() {
var travels = $("#xcGrid").datagrid("getRows");
var nts = [];
if (travels.length > 0) {
for (var i = 0; i < travels.length; i++) {
var t = travels[i];
nts.push([t.xcap,t.jtgj,t.txrs,]);
}
}
return nts;
}
// 设置值
XC.setData = function(list){
var rows = [];
for(var i=0; i<list.length; i++){
var bean = list[i];
var row = {
xcap:"",//行程安排
jtgj:"",//交通工具
txrs:""//同行人数
};
row.id = this.getId();
row.xcap = bean[0];//行程安排
row.jtgj = bean[1];//交通工具
row.txrs = bean[2];//同行人数
rows.push(row);
}
$("#xcGrid").datagrid({data: rows});
}
</script>
3. 后端接受：
public void add() {
Result result = new Result();
try {
// 校验纳税人识别号号唯一性
List<CompanyProductBean> list = companyProductService.infoByField("pname", bean.getPname().trim());
if (0 != list.size()) {
result.setRe(ReturnCode.R__2, "产品已存在");
ResponseUtil.sendResult(result);
return;
}
companyProductService.add(bean);
}catch (Exception e) {
e.printStackTrace();
result.fail();
log.error("[CarAction.add] 新增出错", e);
}
ResponseUtil.sendResult(result.toJSONString());
}
4. 前台页面提交json串
function save() {
// 获取include的jsp得到的数组；
var travels = XC.getFormatData();
if(travels.length < 1){
Toast.error("请输入收入类型");
return;
}
//转为json串
var b = JSON.stringify(travels);
// 校验表单
var form = $("#tableForm");
if (!form.form("validate")) return;
// 请求成功
var onSuccess = function(rs) {
if (rs.returnCode != 0) {
Toast.error(rs.returnMessage, 2000);
}else{
Toast.ok("数据保存成功", 1000, function() {
closeSelf();
});
}
}
// loading
Toast.load("提交中...", false, function() {
Ajax({
type: "POST",
url: "${base}/companyProduct_add.do",
data: {
"bean.companyid":$("#companyid").textbox("getValue"),
"bean.companyname":$("#companyname").textbox("getValue"),
"bean.pname":$("#pname").textbox("getValue"),
"bean.ptype": b
},
success: onSuccess
});
});
}
PS：主要问题
最大的问题就是传值，与数组形式的创建，是个二维数组a[][]，但是数组内部长度不知，已知的是a[i].length=2；所以，我选择使用引入jsp页面，在这个jsp页面种创建表格，然后遍历表格，通过表格的形式，来进行二维数组的建立，这样页面看起来简单便捷。
4533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
