我正在处理以下代码，该代码在下面显示一个网格并在单击时显示更多网格。
现在，当创建一个新网格时，如下面的正在运行的演示所示，新网格被创建了，但是问题是它在原始网格的正下方。我想在原始网格和新创建的网格之间留一些空间。这是JSFiddle，用于以下代码供参考
某些列显示为红色的原因是因为我在代码中设置了以下样式属性：
<ListView MinHeight="{Binding MaxHeight}" ... />
但是，如果我尝试应用以下CSS
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
什么都没发生。我有一种错误的用法。请让我知道应该在哪里正确应用它。
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
var source =
{
localdata: [
["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
["https://www.samplelink.com", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"],
["https://www.samplelink.com", "Martn Sommer", "Owner", "C\/ Araquil, 67", "Madrid", "Spain"],
["https://www.samplelink.com", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"],
["https://www.samplelink.com", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"],
["https://www.samplelink.com", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"],
["https://www.samplelink.com", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"],
["https://www.samplelink.com", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"],
["https://www.samplelink.com", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"],
["https://www.samplelink.com", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"],
["https://www.samplelink.com", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"],
["https://www.samplelink.com", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"],
["https://www.samplelink.com", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"],
["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
],
datafields: [
{ name: 'link', type: 'string', map: '0' },
{ name: 'ContactName', type: 'string', map: '1' },
{ name: 'Title', type: 'string', map: '2' },
{ name: 'Address', type: 'string', map: '3' },
{ name: 'City', type: 'string', map: '4' },
{ name: 'Country', type: 'string', map: '5' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var cellsrenderer = function (row, column, value) {
return `<div style="color: blue">${value}</div>`;
};
$("#grid").jqxGrid(
{
width: 800,
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
var id = 1;
$("#grid").on("rowselect", function (e) {
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
.append($("<div />", { id: "button" + id }))
.appendTo(document.body);
$("#grid" + id).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
$("#grid" + id).on('rowselect', function () {
$("<div />")
.append($("<div />", { id: "grid" + id }))
.append($("<div />", { id: "button" + id }))
.appendTo(document.body);
$("#grid" + id).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
$("#grid" + id).on('rowselect', function () {
});
$("#button" + id).jqxButton({ value: 'Export Grid ' + id });
let currentId = id;
$("#button" + currentId).on('click', function () {
//console.log('clickin ', currentId)
$("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId);
});
id++;
});
$("#button" + id).jqxButton({ value: 'Export Grid ' + id });
let currentId = id;
$("#button" + currentId).on('click', function () {
//console.log('click ', currentId)
$("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId);
});
id++;
});
答案 0 :(得分：0)
使用相同的方式在此处的样式值之前使用属性：
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
您需要在此处的值之前应用属性：
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
类似的东西：
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"padding: 50px 10px 20px 30px" }))
答案 1 :(得分：0)
您需要在样式属性中添加边距或填充
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
您指定样式的方式将被CSS编译错误。使用以下代码段进行更新。
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"padding:50px 10px 20px 30px" }))
根据您的偏好，您甚至可以添加边距而不是填充。