불행하게도 검도 그리드 좋은 SEO (see here)에 기본 솔루션을 제공하지 않는 것 내 fiddle hereAjax 호출을 트리거하지 않고 Kendo Grid dataSource를 원격 URL로 업데이트하는 방법은 무엇입니까?
를 살펴 보자. 그러나 나는 그것을 시도해보고, 내가 할 수있는 일이 있는지 알아 보았다. 이것은 내가 지금까지 무엇을 가지고 : 는 바이올린의 HTML 섹션을 참조하십시오 (SEO 목적
- 전 기존의 HTML 테이블 :
이 검도 그리드와 적절한 점진적 개선 방식을 달성하기 위해, 나는 3 개 부분이)
- HTML 표와 동일한 데이터이지만 JSON (은 바이올린의 js 섹션 상단을 참조하십시오.). 이것은 Kendo가 올바른 페이지와 전체 페이지를 보여줄 것입니다 (HTML 그리드 만 변환 시키면이 작업을하지 않습니다 !!).
- 모든 후속 통화는 ajax를 통해 처리됩니다. 깨끗하고 단정 한 모든 것을 유지하려면
(는 바이올린 그리드 출력 위의 "진보적 인 저를 강화"버튼을 참조), I는 HTML 테이블과 JSON 모두를 생성하는 서버 측 스크립트가 있습니다. 방금 내 서버 측 변수를 내 뷰 (페이지)에 삽입하면 모든 것이 잘 맞습니다.
그러나 한 가지 문제가 남아 있습니다. "Progressive Enhance Me!"키를 누를 때 보여 주듯이 dataSource를 원격 URL로 업데이트해야합니다. 단추. 버튼을 누르면 불필요한 ajax 호출이 발생합니다. 실제 애플리케이션에서이 불필요한 초기 ajax 호출은 서버 측 중복 데이터베이스 쿼리가 페이지 속도를 늦출 수있는 비용이 많이 든다. 아약스 호출을하지 않고 dataSource를 업데이트 할 수있는 방법이 있습니까?
(나는 Kendo Grid를 사용하여 점진적 향상을 얻는 더 좋은 방법에 대한 제안도 있습니다.)
myData = {
// some json here...see fiddle
};
$("#grid").kendoGrid({
dataSource: {
data : myData,
dataType: "json",
pageSize:5,
serverPaging: true,
serverSorting: true,
schema: {
data: "results",
total: function (data) {
return data.__count;
}
}
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [
{
field:"OrderID",
filterable: false,
width: 75
},
{
field:"Freight",
filterable: false,
width: 75
},
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 260
},
{
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
// Button should NOT make an ajax call...I just want to update the dataSource
$("#progress-enhance-me").click(function(){
var grid = $("#grid").data("kendoGrid");
var newDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
OrderDate: { type: "date" },
ShipName: { type: "string" },
ShipCity: { type: "string" }
}
}
},
page: 1,
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
grid.setDataSource(newDataSource);
});
편집 : 내가 requestStart 호출을 사용하여, 다른 접근 방식을 시도했다. fiddle here을 참조하십시오. 그러나 나는 이것이 새로운 데이터 소스에 대한 마지막 클릭 (페이지 번호 클릭 또는 정렬 헤더 클릭 등)을 전송할 방법이 없기 때문에 이것이 작동 할 것이라고 생각하지 않는다.