Преобразовать CellSet в таблицу HTML и из HTML в JSON и в массив

Введение
Последние несколько дней я работаю над ADOMD и MDX. Я столкнулся с ситуацией, когда мне нужно преобразовать мой набор ячеек в таблицу HTML и отобразить его в Grid на стороне клиента. Поэтому я подумал поделиться этим со всеми вами.

1. Microsoft Analysis Services 2005: отображение сетки с использованием ADOMD.NET и MDX
2. Управляйте и запрашивайте данные OLAP с использованием ADOMD и многомерных выражений

Почему
Как я уже сказал, в моем текущем проекте мы используем кубы MDX, поэтому на стороне сервера мы получим только CellSet. Поэтому я очень старался преобразовать CellSet в JSON только для этой сетки JQX (все другие сетки в проекте используют таблицу HTML в качестве источника данных). Но я не мог найти хороший способ для этого. Поэтому я подумал о том, чтобы получить таблицу HTML из CellSet, как и в другой сетке на стороне сервера. И я знал, как сформулировать массив и JSON из таблицы HTML. Здесь я делюсь этой информацией.

Пожалуйста, предоставьте ваши ценные предложения по улучшению. 

Использование кода

Мы модифицируем код в соответствии с нашими потребностями из предыдущих статей и привязываем его к HtmlTextWriter. Мы создали функцию renderHTML (), которая будет принимать CellSet в качестве аргумента. Здесь я покажу код.

try { System.Text.StringBuilder result = new System.Text.StringBuilder(); //check if any axes were returned else throw error. int axes_count = cst.Axes.Count; if (axes_count == 0) thrownew Exception("No data returned for the selection"); //if axes count is not 2 if (axes_count != 2) thrownew Exception("The sample code support only queries with two axes"); //if no position on either row or column throw error if (!(cst.Axes[0].Positions.Count > 0) && !(cst.Axes[1].Positions.Count > 0)) thrownew Exception("No data returned for the selection"); int cur_row, cur_col, col_count, row_count, col_dim_count, row_dim_count; cur_row = cur_col = col_count = row_count = col_dim_count = row_dim_count = 0; //Number of dimensions on the column col_dim_count = cst.Axes[0].Positions[0].Members.Count; //Number of dimensions on the row if (cst.Axes[1].Positions[0].Members.Count > 0) row_dim_count = cst.Axes[1].Positions[0].Members.Count; //Total rows and columns row_count = cst.Axes[1].Positions.Count + col_dim_count; //number of rows + rows for column headers col_count = cst.Axes[0].Positions.Count + row_dim_count; //number of columns + columns for row headers //gridPanel.ClientIDMode = System.Web.UI.ClientIDMode.AutoID; //////lets clear any controls under the grid panel //gridPanel.Controls.Clear(); ////Add new server side table control to gridPanel Table tblgrid = new Table(); tblgrid.Attributes.Add("Id", "myhtmltab"); tblgrid.Attributes.Add("class", "display"); //We will use label control to add text to the table cell Label lbl; string previousText = ""; int colSpan = 1; for (cur_row = 0; cur_row < row_count; cur_row++) { //add new row to table TableRow tr = new TableRow(); for (cur_col = 0; cur_col < col_count; cur_col++) { //create new cell and instance of label TableCell td = new TableCell(); TableHeaderCell th = new TableHeaderCell(); lbl = new Label(); //check if we are writing to a ROW having column header if (cur_row < col_dim_count) { //check if we are writing to a cell having row header if (cur_col < row_dim_count) { //this should be empty cell -- it's on top left of the grid. //result.Append(" ,"); lbl.Text = " "; td.CssClass = "titleAllLockedCell"; //this locks //the cell so it doesn't scroll upwards nor leftwards } else { //this is a column header cell -- use member caption for header //result.Append(cst.Axes[0].Positions[cur_col - // row_dim_count].Members[cur_row].Caption + ","); //if (cur_row < 1) //{ lbl.Text = cst.Axes[0].Positions[cur_col - row_dim_count].Members[cur_row].Caption; th.CssClass = "titleTopLockedCell"; // this lockeders //the cell so it doesn't scroll upwards //} if (lbl.Text == previousText) { colSpan++; } else { colSpan = 1; } } } else { //We are here.. so we are writing a row having data (not column headers) //check if we are writing to a cell having row header if (cur_col < row_dim_count) { //this is a row header cell -- use member caption for header lbl.Text = cst.Axes[1].Positions[cur_row - col_dim_count].Members[cur_col].Caption.Replace(",", " "); td.CssClass = "titleLeftLockedCell"; // this lockeders //the cell so it doesn't scroll leftwards } else { //this is data cell.. so we write the Formatted value of the cell. lbl.Text = cst[cur_col - row_dim_count, cur_row - col_dim_count].FormattedValue; //td.InnerText = cst[cur_col - row_dim_count, //cur_row - col_dim_count].FormattedValue; td.CssClass = "valueCell"; //this right //aligns the values in the column } //turn the wrapping off for row header and data cells. td.Wrap = true; } if (((lbl.Text != previousText) || (lbl.Text == " ")) && (cur_row < col_dim_count)) { tr.TableSection = TableRowSection.TableHeader; th.Text = "HEADER"; th.Controls.Add(lbl); tr.Cells.Add(th); tblgrid.Rows.Add(tr); } elseif ((lbl.Text != previousText) || (lbl.Text == " ") || (lbl.Text == null) || (lbl.Text == "")) { td.Controls.Add(lbl); tr.Cells.Add(td); tblgrid.Rows.Add(tr); } else { try { tr.Cells[tr.Cells.Count - 1].ColumnSpan = colSpan; } catch { } } if (cur_row < col_dim_count) previousText = lbl.Text; } //result.AppendLine(); } using (StringWriter writer = new StringWriter()) { HtmlTextWriter htw = new HtmlTextWriter(writer); tblgrid.RenderControl(htw); return htw.InnerWriter.ToString(); } } catch (Exception ex) { throw ex; } 

Наконец, функция вернет вывод в виде HTML-таблицы с идентификатором «myhtmltab», где отображаются все теги th, tr и td.

Теперь, если вы хотите, вы можете преобразовать таблицу HTML в массив JSON на стороне клиента.

Теперь нам нужно просто добавить динамический HTML в DOM. Вы можете сделать это следующим образом:

$('#your element id').html(data); 

Пожалуйста, прочитайте здесь для получения дополнительной информации:  Получить HTML-содержимое первого элемента в наборе соответствующих элементов .

Динамическое преобразование HTML в массив в jQuery
Предположим, у вас есть функция Ajax jQuery, которая будет возвращать вывод, как я показал на выходном изображении.

Если вы новичок в jQuery Ajax-функции, пожалуйста, прочитайте здесь:

• Привязать выпадающий список в ASP.NET с помощью jQuery AJAX
• JQuery Ajax Вызов функций
• Конструктор кода для jQuery AJAX (вызов веб-служб)

Затем, в случае успеха функции Ajax, вы можете написать такой код, чтобы сформулировать массив.

Далее нужно получить столбцы и строки из динамической таблицы HTML, которую вы только что сформулировали с помощью CellSet:

var rows = $("#myhtmltab tbody tr"); //Select Rows , looping through every tr var columns = $("#myhtmltab thead th"); //Select columns , looping through every th

Теперь нам нужен массив, где мы можем заполнить данные. ?

var data = []; for (var i = 0; i < rows.length; i++) { var row = rows[i]; var datarow = {}; for (var j = 0; j < columns.length; j++) { // get column's title. var columnName = $.trim($(columns[j]).text()); // select cell. var cell = $(row).find('td:eq(' + j + ')'); datarow[columnName] = $.trim(cell.text()); } data[data.length] = datarow; } 

Теперь пришло время сформулировать JSON из таблицы. ?

Конвертировать динамический HTML в JSON динамически в jQuery
Как мы уже говорили выше, здесь мы также перебираем столбцы и строки. Цель этого заключается в том, чтобы сформулировать динамический JSON для назначения данных в моей сетке JQX (Вы можете проверить это:  Работа с сеткой JQX с фильтрацией и сортировкой ).

var varDataFields = '['; var varDataColumns = '['; var typ = 'string'; var align = 'center'; var width = '200'; var myColumns = $("#myhtmltab thead th"); for (var j = 0; j < myColumns.length; j++) { var column = myColumns[j]; var col = $(column).text().trim(); //col = col.replace('<span>', ''); //col = col.replace('</span>', ''); //var col = $(columns).find('th:get(' + j + ').find(' < span > ').text()'); //if (!col == '') { varDataFields = varDataFields + ' { \"name\" : \"' + col + '\" , \"type\" : \"' + typ + '\"},'; varDataColumns = varDataColumns + ' { \"text\" : \"' + col + '\" , \"dataField\" : \"' + col + '\" , \"align\" : \"' + align + '\" , \"width\" : \"' + width + '\"},'; //} if (j == myColumns.length - 1) { varDataFields = varDataFields.slice(0, -1); varDataColumns = varDataColumns.slice(0, -1) } } varDataFields = varDataFields + ']'; varDataColumns = varDataColumns + ']'; varDataFields = varDataFields.trim(); varDataColumns = varDataColumns.trim(); var DataFields = $.parseJSON(varDataFields); var DataColumns = $.parseJSON(varDataColumns); 

Так что в DataFields, DataColumns я получу JSON так, как я хочу. Это я могу напрямую связать с сеткой JQX. ?

Достопримечательности

• ADOMD, MDX

история

• Первая версия: 05 мая 2015