2
SlickGrid를 사용하여 꽤 정교한 격자를 표시합니다. 여기에 나와있는 예제는 내 코드가 아니라 기본적으로 SlickGrid 사람들이 내 문제를 복제 한 예입니다. 내 그리드에는 AJAX 피드를 통해 공급되는 열 이름과 함께 동적으로 추가 된 열이 있어야합니다. JS에서 열 개체를 만드는 것은 문제가되지 않으며 .push를 사용하여 추가하는 것조차도 방화 녀 콘솔에서 볼 수 있으므로 제대로 작동하는 것 같습니다. 새로운 칼럼들은 절대 드러내지 않는 듯합니다. 그리드 끝 부분에 작은 빈 셀이 생기지 만 결코 채워지지 않습니다.AJAX를 사용하여 SlickGrid에 동적으로 열 추가하기. 열이 표시되지 않습니다.
아래 스크립트는 "example1-simple.html"의 스크립트로 바꿀 수 있습니다. here. 내가 선 그리드 = 새로운 Slick.Grid ("#의에는 myGrid", 데이터, dynamicColumns, 옵션)을 넣으면
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push({
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push({
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
; firebug 콘솔에서 실행하고 그리드를 실행하면 잘 렌더링됩니다. dynamicColumn을 작성하지 않아도 스크립트가 코드 줄을 실행하고있는 것과 거의 같습니다.
Digg AJAX 호출은 AJAX 호출을 시뮬레이트하는 것일뿐입니다. 물론 내 자신을 사용할 것입니다.