我很陌生jQuery
。我目前正在做一个项目。在这个项目中,有 3 种类型的物品和三个袋子,因此用户应该选择任何一个袋子并尝试将物品放入其中。如果用户选择bag 1,那么他可以丢弃item1,item2,item3 如果他选择bag 2,他可以丢弃item2,item3 如果他选择bag3,他只能丢弃item3。
现在的问题是我添加了一个附加字段bag
来显示物品被丢弃的包的类型(例如“bag1”或“bag2”或“bag3”)。
但问题是我无法显示该bag
字段。有没有人让我知道我能做什么。我为此付出了很多努力。
关于 jsfiddle 的示例:http: //jsfiddle.net/Vwu37/48/
HTML:
<tr>
<th field="name" width=140>Name</th>
<th field="bag" width=60>Bag</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
Javascript:
var data = {
"total": 0,
"rows": []
};
var totalCost = 0;
$(function () {
$('#cartcontent1').datagrid({
singleSelect: true
});
$('.bag').droppable({
onDrop: function (e, source) {
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('$')[1]));
$(source.draggable).remove();
//$('.bag').droppable('enable');
$(this).droppable('enable');
}
});
$('.item').each(function (index, div) {
var scope = $(this).attr('data-scope');
//debugger;
$(div).draggable({
revert: true,
proxy: 'clone',
onStartDrag: function () {
$('.bag').droppable('enable');
$('.bag:not(.selected)').droppable('disable');
$('.bag:not(.bag[data-scope*=' + scope + '])').droppable('disable');
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function () {
//$('.bag').droppable('enable');
$(this).draggable('options').cursor = 'move';
}
});
});
$('.bag').click(function () {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
function addProduct(name, price) {
var totalQuantity = sumQuantity(data);
if (totalQuantity < 10) {
function add() {
for (var i = 0; i < data.total; i++) {
var row = data.rows[i];
if (row.name == name) {
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name: name,
quantity: 1,
price: price,
remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
});
}
add();
totalCost += price;
$('#cartcontent1').datagrid('loadData', data);
$('div.cart .total').html('Total: $' + totalCost);
} else {
alert('cannot have more than 10 items');
}
}
function removeProduct(el, event) {
var tr = $(el).closest('tr');
var name = tr.find('td[field=name]').text();
var price = tr.find('td[field=price]').text();
var quantity = tr.find('td[field=quantity]').text();
for (var i = 0; i < data.total; i++) {
var row = data.rows[i];
if (row.name == name) {
data.rows.splice(i, 1);
data.total--;
break;
}
}
totalCost -= price * quantity;
$('#cartcontent1').datagrid('loadData', data);
$('div.cart .total').html('Total: $' + totalCost);
}
function sumQuantity(data) {
var sum = 0;
for (var i = 0; i < data.total; i++) {
sum += data.rows[i].quantity;
}
return sum;
}