У меня прилично большая динамически генерируемая таблица со следующим топ-концом.Я избавлю вас от агонии публикации всей таблицы, так как она очень сложная и содержит таблицы в таблицах внутри таблиц:
<table class="pcsearchresults" style="table-layout:fixed;">
<thead>
<tr>
<th>
Assign Record
<% if (ViewData["CheckBoxAll"] != null)
{ %>
<input type="checkbox" id="checkBoxAll" name="checkBoxAll" checked="checked" />
<% } %>
<% else
{ %>
<input type="checkbox" id="checkBoxAll" name="checkBoxAll" />
<% } %>
</th>
<th onclick="javascript: SortData(0);" style="cursor: pointer;">
Part Number<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="0_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(1);" style="cursor: pointer;">
Description<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="1_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(2);" style="cursor: pointer;">
HTS Country<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="2_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(3);" style="cursor: pointer;">
Status<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="3_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(4);" style="cursor: pointer;">
Primary HTS<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="4_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(5);" style="cursor: pointer;">
Pref Trade Code<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="5_img"
style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(6);" style="cursor: pointer;">
Customs COO<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="6_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(7);" style="cursor: pointer;">
GTC Site<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="7_img" style="visibility: hidden" />
</th>
</tr>
<%
for (int i = 0; i < 7; i++)
if (ViewData["8"].Equals("" + i + "") && ViewData["SortOrder"].Equals("1"))
{ %>
<script type="text/javascript" language="javascript">
document.getElementById("<%=i%>_img").src = "/Drm/Content/jqGrid/steel/images/sort_asc.gif";
document.getElementById("<%=i%>_img").style.visibility = "visible";
</script>
<%}
else
if (ViewData["8"].Equals("" + i + "") && ViewData["SortOrder"].Equals("0"))
{
%>
<script type="text/javascript" language="javascript">
document.getElementById("<%=i%>_img").src = "/Drm/Content/jqGrid/steel/images/sort_desc.gif";
document.getElementById("<%=i%>_img").style.visibility = "visible";
</script>
<%} %>
<tbody>
<% if (Model.RecordCount == 0)
{ %>
<tr>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="Search/0"> No Match Found</a></td>
</tr>
<%
}
else
{ %>
<% string stripeClass = "odd"; %>
<% foreach (var pc in Model.SearchResultItems)
{ %>
<% stripeClass = stripeClass.CompareTo("odd") == 0 ? "even" : "odd"; %>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsCenterAlign">
<% if (ViewData["CheckboxAll"] != null ||
(ViewData["RecordIds"] != null &&
((string[])ViewData["RecordIds"]).Contains(Convert.ToString(pc.PcId))))
{ %>
<input type="checkbox" name="RecordId" value="<%= pc.PcId %>" checked="checked" />
<% } %>
<% else
{ %>
<input type="checkbox" name="RecordId" value="<%= pc.PcId %>" />
<% } %>
</td>
<td class="searchResultsLeftAlign">
<a href="ViewDetail/<%= pc.PcId %>">
<%= pc.PartNumber %></a>
<td class="searchResultsLeftAlign">
<%= pc.Description.Substring(0, pc.Description.Length > 30 ? 30 : pc.Description.Length) %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.HtsCountry.Code %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.Status %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.PrimaryHts %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.PreferentialTradeCode %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.CustomsCountryOfOrigin.Code %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.GtcSite.Name %>
</td>
</tr>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsDetailTitle" colspan="2">
Supplier Name:
</td>
<td class="searchResultsDetailDetail" colspan="2">
<%= pc.Supplier.Name %>
</td>
<td class="searchResultsDetailTitle">
Manufacturer:
</td>
<td class="searchResultsDetailDetail" colspan="2">
<%= pc.Manufacturer.Name %>
</td>
<td class="searchResultsDetailTitle">
Classified By:
</td>
<td class="searchResultsDetailDetail">
<% if (pc.ClassifiedBy.LastName.Length > 0)
{ %>
<%= pc.ClassifiedBy.LastName%>, <%= pc.ClassifiedBy.FirstName%>
<% } %>
</td>
</tr>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsDetailTitle" colspan="2">
MID:
</td>
<td class="searchResultsDetailDetail">
<%= pc.Mid %>
</td>
<td colspan="4">
<table border="0" width="100%" style="height: 95%;">
<tr>
<%--<td >Declared Add:</td>--%>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Declared Add:
<% if (pc.DeclaredAdditions > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<%--<td >Undeclared Add:</td>--%>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Undeclared Add:
<% if (pc.UndeclaredAdditions > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Undefinit. Pricing:
<% if (pc.UndefinitizedPricing > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Prop/Export Info:
<% if (pc.PropExportProductInfo.Length > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
</tr>
</table>
</td>
<td class="searchResultsDetailTitle">
Classified Date:
</td>
<td class="searchResultsDetailDetail">
<%= PcFormHelpers.PrintDate(pc.ClassifiedDate) %>
</td>
</tr>
<tr>
<td colspan="9" class="recordBreak">
</td>
</tr>
<% } %>
<!-- determine the display spacing when less than 5 records -->
<%
var recordCnt = Model.PageSize; // default setting is 5
// if recordCnt is not set in the logic below or records per page is set to less than 5
// display spacing will not be impacted or set accordingly)
// determine if records count is less than 5 or records per page is less than 5
// and it is not the last page
if ((Model.RecordCount < 5 || Model.PageSize < 5) && (Model.PageNumber != Model.PageCount))
{
if (Model.RecordCount < Model.PageSize) // less than 5 records
{
recordCnt = Model.RecordCount; // set recordCnt to record count
}
}
else if (Model.PageNumber == Model.PageCount) // determine if user is on the last display page
{
var recordCalc = 0; // initialize calculation variable
var recordRemd = 0; // initialize record remainder variable
recordCalc = (int)Math.DivRem(Model.RecordCount, Model.PageSize, out recordRemd); // calculate
if (recordRemd < 5 && recordRemd != 0) // less than 5 records to display an not 0
{
recordCnt = recordRemd; // set record count to record remainder
}
}
%>
<!-- set spacing for display when record display is less than 5 -->
<% switch (recordCnt)
{ %>
<% case 0: %>
<tr class="blankline-search-results0">
<td>
</td>
</tr>
<% break; %>
<% case 1: %>
<tr class="blankline-search-results1">
<td>
</td>
</tr>
<% break; %>
<% case 2: %>
<tr class="blankline-search-results2">
<td>
</td>
</tr>
<% break; %>
<% case 3: %>
<tr class="blankline-search-results3">
<td>
</td>
</tr>
<% break; %>
<% case 4: %>
<tr class="blankline-search-results4">
<td>
</td>
</tr>
<% break; %>
<% } %>
<% } %>
</tbody>
<tfoot>
<tr>
<td colspan="2">
Total Records Found:
<%= Model.RecordCount %>
</td>
<td colspan="5">
</td>
<td colspan="2">
</td>
</tr>
</tfoot>
</table>
, и, поскольку я знаю кого-то, у кого, скорее всего, задан вопрос, вот функция select all:
$("#checkBoxAll").click(function() {
var checked_status = this.checked;
$("input[name=RecordId]").each(function() {
this.checked = checked_status;
});
});
Таблица построена динамически с помощью встроенного кода страницы в стиле MVC.
Удивительно для меня, но довольно быстро загружается во всех браузерах.Тем не менее, левый столбец таблицы представляет собой ряд флажков, и при попытке щелкнуть по ним для его обработки требуется от одной до двух секунд.Это займет еще больше времени для обработки при нажатии флажка «выбрать все» в верхней части.Вот несколько вещей, которые я заметил относительно производительности
- Кажется, что на самом деле проходит много времени между наведением флажка, пока он не подсвечивается, указывая, что он распознает «зависание».(Это делает то же самое с гиперссылками в таблице и мышью, превращающейся в указатель.)
- Чем больше мой набор результатов, тем больше задержка.Если я отфильтрую таблицу до 30-40 строк, она будет работать нормально.(Да, я рассмотрел разбиение на страницы, но мне сказали, что не следует делать это)
- Задержка возникает только внутри реальной таблицы, я экспериментировал с установкой флажка на страницу в местах, постепенно приближающихся к таблице, и до тех пор, покасодержался в строке таблицы, он функционировал нормально.
- Это отставание не существует в Chrome, Firefox или даже IE6
Итак, мой вопрос заключается в следующем: что может быть причинойэтот?Является ли это просто неудачным фактом при работе с массивными, очень сложными таблицами в IE8?Если это так, то почему это так, чтобы я мог дать подробную причину, почему это не может быть исправлено.Если нет, как я могу ускорить этот процесс?