基于Bootstrap 和 bootstrapDualListbox的表格动态生成

最新推荐文章于 2024-10-10 08:18:53 发布

最新推荐文章于 2024-10-10 08:18:53 发布 · 650 阅读

文章标签：

#javascript #json #ViewUI

BootStrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何设计并动态生成菜品方案，包括页面初始化、动态生成菜品下拉框、动态关联表格显示菜品信息、根据折扣动态设置价格、封装获取表格数据的方法以及通过JSON数组形式保存方案等关键步骤。

（1）整体设计讲解

（2）核心代码分析

（2.1）页面初始化传入参数，请传入本次方案涉及到的所有菜品

格式：Json数组

属性分析：

dishId：菜品ID

dishName：菜品名称

zPrice：原价

aPrice：金卡价

bPrice：银卡价

cPrice：绿卡价

demo：

var dishesArray = [ {
"dishId" : 1,
"dishName" : "清蒸鲈鱼1",
"zPrice":101,
"aPrice":71,
"bPrice":81,
"cPrice":91
},{
"dishId" : 2,
"dishName" : "清蒸鲈鱼2",
"zPrice":102,
"aPrice":72,
"bPrice":82,
"cPrice":92
},{
"dishId" : 3,
"dishName" : "清蒸鲈鱼3",
"zPrice":103,
"aPrice":73,
"bPrice":83,
"cPrice":93
},{
"dishId" : 4,
"dishName" : "清蒸鲈鱼4",
"zPrice":104,
"aPrice":74,
"bPrice":84,
"cPrice":94
},{
"dishId" : 5,
"dishName" : "清蒸鲈鱼5",
"zPrice":105,
"aPrice":75,
"bPrice":85,
"cPrice":95
},{
"dishId" : 6,
"dishName" : "清蒸鲈鱼6",
"zPrice":106,
"aPrice":76,
"bPrice":86,
"cPrice":96
} ]

（2.2）动态生成菜品下拉框插件，使用DualListBox插件

$("#duallistboxDishes").bootstrapDualListbox();

（2.3）动态方案菜单关联表格

 //2.根据保存的方案自动生成菜单，设置价格
function savePlanDishes() {
var dishes = $("#duallistboxDishes").val();//（2.3.1）获取插件值
$("#tablePlanDishesSetPrice").html("");
initTablePlanDishesSetPrice();
        //（2.3.2）动态生成
for(var i in dishes) {
var dishId = dishes[i];
for(var z = 0; z < dishesArray.length; z++) {
if(dishId == dishesArray[z].dishId) {
var tr = $("<tr>").attr("id","_TR_DISH");

var td1 = $("<td>").html("<input type='text' id='dishId' value="+dishesArray[z].dishId+" disabled='disabled'>");
var td2 = $("<td>").html("<input type='text' id='dishName' value="+dishesArray[z].dishName+" disabled='disabled'>");
var td3 = $("<td>").html("<input type='text' id='zPrice' value="+dishesArray[z].zPrice+" disabled='disabled'>");
var td4 = $("<td>").html("<input type='text' id='aPrice' value="+dishesArray[z].aPrice+">");
var td5 = $("<td>").html("<input type='text' id='bPrice' value="+dishesArray[z].bPrice+">");
var td6 = $("<td>").html("<input type='text' id='cPrice' value="+dishesArray[z].cPrice+">");

tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);

$("#tablePlanDishesSetPrice").append(tr);
}

}
}
}

（2.4）封装“根据DOM_ID获取table中所有的input输入框的值”并且返回JSON数组

//根据DOM_ID获取table中所有的input输入框的值
function getTableAllValue(domId) {
var array = new Array();
var Obj = new Object();

var _tr = "#" + domId +" tr";
$(_tr).each(function (){
if($(this).attr("id") == "_TR_DISH") {
var Obj = new Object();
$(this).find("input").each(function (){
var _id = $(this).attr("id");
 	var _val = $(this).val();
 	Obj[_id] = _val;
})
array.push(Obj);
}
})
//alert(JSON.stringify(array));
return array;
}

（2.5）根据折扣动态设置表格中的价格

（2.6）获取表格中的数据信息

直接调用 （2.4）中的方法，返回的是一个JSON数组字符串

格式：

选择菜品后方案JSON数组：

[{"dishId":"2","dishName":"清蒸鲈鱼2","zPrice":"102","aPrice":64.8,"bPrice":73.8,"cPrice":82.8},{"dishId":"3","dishName":"清蒸鲈鱼3","zPrice":"103","aPrice":65.7,"bPrice":74.7,"cPrice":83.7}]

（2.7）所有代码均在附件中crmActivityPlan.zip