如何从 jsGrid 中的 JSON 响应中获取 id?
How can I get an id from a JSON response in jsGrid?
我有一个包含多行产品的 jsGrid。我有一个将产品添加到购物车的按钮,但此按钮需要产品 ID。如何获取产品 ID?
$(function() {
$('.jsGrid').jsGrid({
height: "500px",
width: "50%",
filtering: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
url: "{% url 'shop:get' %}",
type: "GET",
dataType: "json",
data: filter,
}).done(function(response) {
var fields = [];
for (let i = 0; i < response.length; i++) {
fields.push(response[i].fields);
}
d.resolve(fields);
});
return d.promise();
}
},
fields: [{
name: "name",
title: "Наименование",
type: "text",
width: 100
}, {
name: "prime_cost",
title: "Себестоимость",
type: "number",
width: 100
}, {
name: "sell_price",
title: "Цена для продажу",
type: "number",
width: 100
}, {
name: "stock",
title: "На складе",
type: "number",
width: 100
}, {
type: "control",
width: 100,
editButton: false,
deleteButton: false,
itemTemplate: function(value, item) {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
var $customButton = $("<button>").attr({
'data-target': "#exampleModal",
'data-toggle': 'modal',
class: 'cartAdd'
}).on('click', function() {
let csrf = $("input[name=csrfmiddlewaretoken]").val();
let td = $(this).parents('td');
let productID = td.children('.product_id').val();
console.log(data);
$('#product_id').val(productID);
});
return $result.add($customButton);
},
}]
});
});
AJAX 回复:
[{
"model": "shop.product",
"pk": 4,
"fields": {
"category": 2,
"name": "Balls",
"slug": "balls",
"sell_price": "12.00",
"prime_cost": "1.00",
"usd_price": "12.00",
"stock": 123,
"created": "2020-07-13T07:33:33.627Z",
"updated": "2020-07-13T07:33:33.627Z"
}
}, {
"model": "shop.product",
"pk": 5,
"fields": {
"category": 2,
"name": "Rod",
"slug": "rod",
"sell_price": "100.00",
"prime_cost": "12.00",
"usd_price": "12.00",
"stock": 1222,
"created": "2020-07-13T07:34:10.547Z",
"updated": "2020-07-13T07:34:10.547Z"
}
}, {
"model": "shop.product",
"pk": 1,
"fields": {
"category": 1,
"name": "Table",
"slug": "table",
"sell_price": "12.00",
"prime_cost": "1.00",
"usd_price": "1.50",
"stock": 985,
"created": "2020-07-11T05:55:00.203Z",
"updated": "2020-07-13T09:22:48.788Z"
}
}, {
"model": "shop.product",
"pk": 3,
"fields": {
"category": 3,
"name": "\u0418\u0437\u0434\u0435\u043b\u0438\u0435 \u0438\u0437 \u0431\u0443\u043c\u0430\u0433\u0438",
"slug": "izdelie-iz-bumagi",
"sell_price": "10.00",
"prime_cost": "1200.00",
"usd_price": "12.00",
"stock": 977,
"created": "2020-07-11T09:14:46.554Z",
"updated": "2020-07-13T09:22:48.829Z"
}
}, {
"model": "shop.product",
"pk": 2,
"fields": {
"category": 1,
"name": "\u0421\u0442\u0443\u043b",
"slug": "stul",
"sell_price": "1000.00",
"prime_cost": "12.00",
"usd_price": "10.00",
"stock": 893,
"created": "2020-07-11T06:10:27.666Z",
"updated": "2020-07-13T09:22:48.886Z"
}
}]
尝试解析您的 json 数据,然后您可以使用该 pk
console.log(data);
JSON.parse(data);
$('#product_id').val(pk);
这将是正确的解决方案。只需使用上面的行编辑您的代码。
我有一个包含多行产品的 jsGrid。我有一个将产品添加到购物车的按钮,但此按钮需要产品 ID。如何获取产品 ID?
$(function() {
$('.jsGrid').jsGrid({
height: "500px",
width: "50%",
filtering: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
url: "{% url 'shop:get' %}",
type: "GET",
dataType: "json",
data: filter,
}).done(function(response) {
var fields = [];
for (let i = 0; i < response.length; i++) {
fields.push(response[i].fields);
}
d.resolve(fields);
});
return d.promise();
}
},
fields: [{
name: "name",
title: "Наименование",
type: "text",
width: 100
}, {
name: "prime_cost",
title: "Себестоимость",
type: "number",
width: 100
}, {
name: "sell_price",
title: "Цена для продажу",
type: "number",
width: 100
}, {
name: "stock",
title: "На складе",
type: "number",
width: 100
}, {
type: "control",
width: 100,
editButton: false,
deleteButton: false,
itemTemplate: function(value, item) {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
var $customButton = $("<button>").attr({
'data-target': "#exampleModal",
'data-toggle': 'modal',
class: 'cartAdd'
}).on('click', function() {
let csrf = $("input[name=csrfmiddlewaretoken]").val();
let td = $(this).parents('td');
let productID = td.children('.product_id').val();
console.log(data);
$('#product_id').val(productID);
});
return $result.add($customButton);
},
}]
});
});
AJAX 回复:
[{
"model": "shop.product",
"pk": 4,
"fields": {
"category": 2,
"name": "Balls",
"slug": "balls",
"sell_price": "12.00",
"prime_cost": "1.00",
"usd_price": "12.00",
"stock": 123,
"created": "2020-07-13T07:33:33.627Z",
"updated": "2020-07-13T07:33:33.627Z"
}
}, {
"model": "shop.product",
"pk": 5,
"fields": {
"category": 2,
"name": "Rod",
"slug": "rod",
"sell_price": "100.00",
"prime_cost": "12.00",
"usd_price": "12.00",
"stock": 1222,
"created": "2020-07-13T07:34:10.547Z",
"updated": "2020-07-13T07:34:10.547Z"
}
}, {
"model": "shop.product",
"pk": 1,
"fields": {
"category": 1,
"name": "Table",
"slug": "table",
"sell_price": "12.00",
"prime_cost": "1.00",
"usd_price": "1.50",
"stock": 985,
"created": "2020-07-11T05:55:00.203Z",
"updated": "2020-07-13T09:22:48.788Z"
}
}, {
"model": "shop.product",
"pk": 3,
"fields": {
"category": 3,
"name": "\u0418\u0437\u0434\u0435\u043b\u0438\u0435 \u0438\u0437 \u0431\u0443\u043c\u0430\u0433\u0438",
"slug": "izdelie-iz-bumagi",
"sell_price": "10.00",
"prime_cost": "1200.00",
"usd_price": "12.00",
"stock": 977,
"created": "2020-07-11T09:14:46.554Z",
"updated": "2020-07-13T09:22:48.829Z"
}
}, {
"model": "shop.product",
"pk": 2,
"fields": {
"category": 1,
"name": "\u0421\u0442\u0443\u043b",
"slug": "stul",
"sell_price": "1000.00",
"prime_cost": "12.00",
"usd_price": "10.00",
"stock": 893,
"created": "2020-07-11T06:10:27.666Z",
"updated": "2020-07-13T09:22:48.886Z"
}
}]
尝试解析您的 json 数据,然后您可以使用该 pk
console.log(data);
JSON.parse(data);
$('#product_id').val(pk);
这将是正确的解决方案。只需使用上面的行编辑您的代码。