RelicV
Привет nrkhi401,
Если вы строго ищете привязку данных к таблице html, выполните следующие действия.
ниже приведен метод вызова ajax для вашего веб-сервиса. Пожалуйста, внесите необходимые изменения в соответствии с вашими требованиями, чтобы удовлетворить вашу заявку.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "~/YourWebserviceFile.asmx/YourWebServiceName",
data: "{}",
dataType: "json",
success: function (data)
{
//Write functionality to display data
$("#bookContainer").append(CreateTableView(data.d, 'CssClassName', true));
},
error: function (result) {
alert("Error: " + result);
}
});
Теперь используйте следующий скрипт для привязки данных к таблице. Html-код выглядит следующим образом:
<table id="bookContainer"></table>
Последняя часть состоит в том, чтобы вызвать метод CreateTableView, который создаст строки и столбцы и добавит их в таблицу (с id="bookContainer"). Этот метод вызывается в собственность успешность метода "Аякс".
Этот метод имеет 3 параметра. Во-первых, это данные json из webservice, во-вторых, имя класса для добавления любого стиля в таблицу. Третий-Показать/Скрыть заголовок.
// This function creates a standard table with column/rows
// Parameter Information
// objArray = Anytype of object array, like JSON results
// theme (optional) = A css class to add to the table (e.g. <table class="<theme>">
// enableHeader (optional) = Controls if you want to hide/show, default is show
function CreateTableView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
theme = ''; //default theme
}
if (enableHeader === undefined) {
enableHeader = true; //default enable headers
}
// If the returned data is an object do nothing, else try to parse
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '<table class="' + theme + '">';
// table head
if (enableHeader) {
str += '<thead><table><tbody><tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
break;
}
str += '</tr></tbody></table></thead>';
}
// table body
str += '<tbody>';
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
for (var index in array[i]) {
if (array[i][index] == null) {
str += '<td> </td>';
}
else {
str += '<td>' + array[i][index] + '</td>';
}
}
str += '</tr>';
}
str += '</tr></tbody>'
str += '</table>';
return str;
}
</table>
Надеюсь, это вам поможет. Счастливого кодирования..!
Спасибо,
Вамси