ASP. NET 에서 Excel: (10) 클 라 이언 트 에서 HTML 표를 생 성 합 니 다 [수정]
서버 쪽 웹 서 비 스 를 먼저 구현 하고 ReadDataService. asmx 로 가정 합 니 다.그 실현 은 대체로 다음 과 같다.
using System.Xml;
using System.Xml;
...
/// <summary>
/// Summary description for MyService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ReadDataService: System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public XmlDocument read(string excelFile) // ， ， id ，
{
XmlDocument xml = new XmlDocument();
xml.LoadXml("<?xml version=/"1.0/" encoding=/"utf-8/" ?><Data></Data>");
// xml
...
return xml; //
}
...
}페이지 에 WebService 에 대한 인용 을 추가 해 야 합 니 다. MasterPage 에 추가 할 수도 있 습 니 다.
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="ReadDataService.asmx" />
</Services>
</ajaxToolkit:ToolkitScriptManager>클 라 이언 트 에서 이렇게 JavaScript 스 크 립 트 를 통 해 WebService 를 호출 하 는 방법:
ReadDataService.read(onReadDataSucceeded, onReadDataFailed, 'xmlDocument');onReadData Succeed 와 onReadData Failed 는 호출 성공 과 실패 사건 을 각각 처리 합 니 다.우 리 는 성공 할 때 표를 만 들 고 실 패 는 힌트 를 줍 니 다.
// result
// context ， 'xmlDocument'
// methodName read， ReadDataService.read
function onReadDataSucceeded(result, context, methodName)
{
readTicks = getMilliseconds() - readTicks; // 10 ， 7.3－7.5
//alert('Time consumption:' + (readTicks / 1000.0) + ' seconds');
if ( document.all ) // IE
{
for(var sheet_idx = 0; sheet_idx < result.documentElement.childNodes.length; sheet_idx++) //
{
var sheet_node = result.documentElement.childNodes[sheet_idx]; //
var _rowNum = 1, //
_colNum = 1,
sheetName = ''; //
var table = document.createElement('TABLE'); //
table.id = 'Sheet_' + sheet_idx; //
//
table.style.borderCollapse = 'collapse';
table.style.tableLayout = 'fixed';
table.style.border = '1px solid black';
//
table.cellPadding = 0;
table.cellSpacing = 0;
for(var attr_idx = 0; attr_idx < sheet_node.attributes.length; attr_idx++)
{
var attr = sheet_node.attributes[attr_idx];
switch(attr.nodeName)
{
case 'name': sheetName = attr.nodeValue; break;
case 'width': table.style.width = attr.nodeValue + 'pt'; break; //
case 'row': _rowNum = parseInt(attr.nodeValue); break; // ，
case 'col': _colNum = parseInt(attr.nodeValue); break;
}
}
// document
if ( document.sheet )
document.sheet[document.sheet] = { 'table': table.id, 'name': sheetName };
else
document.sheet = [{ 'table': table.id, 'name': sheetName }];
//
var sheetNameRow = table.insertRow();
var sheetNameCell = sheetNameRow.insertCell();
initHeaderCell(sheetNameCell);
sheetNameCell.colSpan = _colNum + 1;
sheetNameCell.innerText = sheetName;
sheetNameCell.style.width = table.style.width;
//
var colHeaderRow = table.insertRow();
for(var col_idx = 0; col_idx <= _colNum; col_idx++ )
{
var cell = colHeaderRow.insertCell(); //col_idx);
if ( col_idx > 0 )
cell.innerText = getColLabel(col_idx);
else
cell.innerText = ' '; // !
initHeaderCell(cell);
}
for(var row_idx = 0; row_idx < sheet_node.childNodes.length; row_idx++ ) //
{
var row = table.insertRow() // row_idx + 1); //
{//
var rowHeaderCell = row.insertCell(); //0);
initHeaderCell(rowHeaderCell);
rowHeaderCell.innerText = row_idx + 1; //row.rowIndex;
}
var row_node = sheet_node.childNodes[row_idx]; //
for(var attr_idx = 0; attr_idx < row_node.attributes.length; attr_idx++ ) // ，
{
var attr = row_node.attributes[attr_idx]; //
switch(attr.nodeName)
{
case "height": row.height = attr.nodeValue; break; //
}
}
if ( row_node.childNodes.length == 0 ) // ，
{
for(var i = 1; i <= _colNum; i++ ) //
{
initEmptyCell(row.insertCell()); //i));
}
}
else
for(var cell_idx = 0; cell_idx < row_node.childNodes.length; cell_idx++ ) //
{
var cell_node = row_node.childNodes[cell_idx]; //
var prev_cell_node = cell_node.previousSibling; //
var cellProp = { //
'row': 0,
'col': 0,
'rowspan': 1,
'colspan': 1,
'hasFormula': false,
'formula': '',
'value2': '',
'weight': '',
'height': '',
'font-family': '',
'font-size': '',
'font-color': '',
'font-bold': false,
'font-italic': false,
'font-strikethrough': false,
'align': '',
'valign': ''
}; //
for(var attr_idx = 0; attr_idx < cell_node.attributes.length; attr_idx++ )
{
var attr = cell_node.attributes[attr_idx];
cellProp[attr.nodeName] = attr.nodeValue;
}
// XML ， number，
cellProp.col = parseInt(cellProp.col);
cellProp.rowspan = parseInt(cellProp.rowspan);
cellProp.colspan = parseInt(cellProp.colspan);
if ( prev_cell_node ) // ，
{
var prevColIdx = 0, //
prevColSpan = 1;for(var attr_idx = 0; attr_idx < prev cell node. attributes. length; attr idx +) / / 이전 셀 의 속성 가 져 오기 { var attr = prev_cell_node.attributes[attr_idx]; switch(attr.nodeName) { case 'col': prevColIdx = parseInt (attr. nodeValue); break; / 열 번호 case 'colspan': prevColSpan = parseInt (attr. nodeValue); break; / 열 범위 } } if (prevColIdx + prevColSpan < cellProp. col) / / 중간 에 시간 이 있 으 면 삽입 { for ( var i = prevColIdx + prevColSpan; i < cellProp.col; i++) { initEmptyCell (row. insertCell (); / i); / / 빈 구멍 을 메 웁 니 다. } } } else { if (cellProp. col > 1) / / 첫 번 째 셀 이 아니라면 (0 부터 열 헤더) 보완 이 필요 합 니 다. { for ( var i = 1; i < cellProp.col; i++ ) initEmptyCell (row. insertCell (i); / 빈 구멍 을 메 웁 니 다. } } // 셀 삽입 var cell = row.insertCell(); // 속성 설정 cell.align = cellProp.align; cell.valign = cellProp.valign; cell.width = cellProp.width; cell.height = cellProp.height; cell.style.color = cellProp['font-color']; cell.style.fontFamily = cellProp['font-family']; cell.style.fontSize = cellProp['font-size']; cell.style.fontWeight = cellProp['font-bold'] == 'true' ? 'bold' : ''; cell.style.border = '1px solid black'; cell.colSpan = cellProp.colspan; cell._rowspan = cellProp.rowspan; // 데이터 필드 설정 cell.hasFormula = cellProp.hasFormula; cell.formula = cellProp.formula; cell.dataField = cell.innerText = cellProp.value2; // 후속 노드 가 없 으 면 마지막 셀 임 을 표시 합 니 다. 이 때 는 colNum 열 을 가지 도록 보완 해 야 합 니 다. if (cell_node.nextSibling == null && cellProp.col + cellProp.colspan <= _colNum) { for ( var i = cellProp.col + cellProp.colspan; i <= _colNum; i++ ) initEmptyCell (row. insertCell (); / i); / / 빈 칸 삽입 } } // for cell } // for row setAllCellTip(table); document.body.appendChild(table); } // for sheet } else { // fireFox // 학생 들 의 방과 후 숙제 를 남 겨 두다. } }
function onReadDataFailed (error) / 알림 처리 오류 { var stackTrace = error.get_stackTrace(); var message = error.get_message(); var statusCode = error.get_statusCode(); var exceptionType = error.get_exceptionType(); var timedout = error.get_timedOut(); // Display the error. alert( "Stack Trace: " + stackTrace + "
" + "Service Error: " + message + "
" + "Status Code: " + statusCode + "
" + "Exception Type: " + exceptionType + "
" + "Timedout: " + timedout);}
이로써 클 라 이언 트 가 표를 만 드 는 작업 도 완료 되 었 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
