**固定的。问题在于列。我正在执行 ajax 调用以使列显示在网格上,然后是列选择器的所有可能列。我忘记了 jQuery 不像后面的代码那样工作,所以我有一个函数 LoadColumns(); 然后是 LoadAllColumns();。在 LoadAllColumns 中进行 ajax 调用后,我正在加载网格。有时 LoadColumns 会先运行,一切都会好起来的,有时则不会。在 LoadColumns 中成功调用 ajax 后,我移动了 LoadAllColumns 函数,现在一切正常。谢谢您的帮助!
我正在将 Slick Grid 实施到我的 Web 应用程序中,但遇到了问题。我在一个单独的应用程序中开发网格,一切正常。然后我将网格和所有代码移动到我的 Web 应用程序中,并且每次都不会加载网格。有时我会来到网格,一切都会正常加载,有时,我会去网格,它不会显示任何东西。我正在使用数据视图并通过 ajax 获取数据。我首先提取所有数据,然后实例化网格和数据视图。我一整天都在浏览我的代码,对可能导致这种情况的原因感到困惑。
- 进行我的 ajax 调用(所有数据都按原样返回)
下面是我如何加载网格
function LoadGrid() { dataView = new Slick.Data.DataView({ inlineFilters: true }); grid = new Slick.Grid("#grid", dataView, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel()); var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); var columnpicker = new Slick.Controls.ColumnPicker(allColumns, grid, options); //for sorting of the columns grid.onSort.subscribe(function (e, args) { sortdir = args.sortAsc ? 1 : -1; sortcol = args.sortCol.field; dataView.sort(comparer, args.sortAsc); }); // if using the paging option, this is used to page through the rows dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1; var options = grid.getOptions(); var enableAddRow = false; grid.setOptions({ enableAddRow: enableAddRow }); }); InitializeDataView(); loadingIndicator.hide(); } function InitializeDataView() { UpdateGrid(); // if you don't want the items that are not visible (due to being filtered out // or being on a different page) to stay selected, pass 'false' to the second arg dataView.syncGridSelection(grid, true); // wire up model events to drive the grid dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); // if using the paging option, this is used to page through the rows dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1; var enableAddRow = isLastPage || pagingInfo.pageSize == 0; var options = grid.getOptions(); if (options.enableAddRow != enableAddRow) { grid.setOptions({ enableAddRow: enableAddRow }); } }); } function UpdateGrid() { // initialize the model after all the events have been hooked up dataView.beginUpdate(); dataView.setItems(data); dataView.setFilterArgs({ searchString: searchString }); dataView.setFilter(myFilter); dataView.endUpdate(); loadingIndicator.hide(); }
网格回来了,只是没有加载数据。此外,正确的行数应该是 312。下面是网格实例化后的 html。
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px; position: relative;
height: 797px;">
<div class="grid-canvas" style="width: 0px; height: 7800px;">
<div class="ui-widget-content slick-row odd" row="5" style="top: 125px">
</div>
<div class="ui-widget-content slick-row even" row="6" style="top: 150px">
</div>
<div class="ui-widget-content slick-row odd" row="7" style="top: 175px">
</div>
<div class="ui-widget-content slick-row even" row="8" style="top: 200px">
</div>
<div class="ui-widget-content slick-row odd" row="9" style="top: 225px">
</div>
<div class="ui-widget-content slick-row even" row="10" style="top: 250px">
</div>
<div class="ui-widget-content slick-row odd" row="11" style="top: 275px">
</div>
<div class="ui-widget-content slick-row even" row="12" style="top: 300px">
</div>
<div class="ui-widget-content slick-row odd" row="13" style="top: 325px">
</div>
<div class="ui-widget-content slick-row even" row="14" style="top: 350px">
</div>
<div class="ui-widget-content slick-row odd" row="15" style="top: 375px">
</div>
<div class="ui-widget-content slick-row even" row="16" style="top: 400px">
</div>
<div class="ui-widget-content slick-row odd" row="17" style="top: 425px">
</div>
<div class="ui-widget-content slick-row even" row="18" style="top: 450px">
</div>
<div class="ui-widget-content slick-row odd" row="19" style="top: 475px">
</div>
<div class="ui-widget-content slick-row even" row="20" style="top: 500px">
</div>
<div class="ui-widget-content slick-row odd" row="21" style="top: 525px">
</div>
<div class="ui-widget-content slick-row even" row="22" style="top: 550px">
</div>
<div class="ui-widget-content slick-row odd" row="23" style="top: 575px">
</div>
<div class="ui-widget-content slick-row even" row="24" style="top: 600px">
</div>
<div class="ui-widget-content slick-row odd" row="25" style="top: 625px">
</div>
<div class="ui-widget-content slick-row even" row="26" style="top: 650px">
</div>
<div class="ui-widget-content slick-row odd" row="27" style="top: 675px">
</div>
<div class="ui-widget-content slick-row even" row="28" style="top: 700px">
</div>
<div class="ui-widget-content slick-row odd" row="29" style="top: 725px">
</div>
<div class="ui-widget-content slick-row even" row="30" style="top: 750px">
</div>
<div class="ui-widget-content slick-row odd" row="31" style="top: 775px">
</div>
<div class="ui-widget-content slick-row even" row="32" style="top: 800px">
</div>
<div class="ui-widget-content slick-row odd" row="33" style="top: 825px">
</div>
<div class="ui-widget-content slick-row even" row="34" style="top: 850px">
</div>
<div class="ui-widget-content slick-row odd" row="35" style="top: 875px">
</div>
<div class="ui-widget-content slick-row even" row="36" style="top: 900px">
</div>
<div class="ui-widget-content slick-row odd" row="37" style="top: 925px">
</div>
<div class="ui-widget-content slick-row even" row="38" style="top: 950px">
</div>
<div class="ui-widget-content slick-row odd" row="39" style="top: 975px">
</div>
<div class="ui-widget-content slick-row even" row="40" style="top: 1000px">
</div>
<div class="ui-widget-content slick-row odd" row="41" style="top: 1025px">
</div>
<div class="ui-widget-content slick-row even" row="42" style="top: 1050px">
</div>
<div class="ui-widget-content slick-row odd" row="43" style="top: 1075px">
</div>
<div class="ui-widget-content slick-row even" row="44" style="top: 1100px">
</div>
<div class="ui-widget-content slick-row odd" row="45" style="top: 1125px">
</div>
<div class="ui-widget-content slick-row even" row="46" style="top: 1150px">
</div>
<div class="ui-widget-content slick-row odd" row="47" style="top: 1175px">
</div>
<div class="ui-widget-content slick-row even" row="48" style="top: 1200px">
</div>
<div class="ui-widget-content slick-row odd" row="49" style="top: 1225px">
</div>
<div class="ui-widget-content slick-row even" row="50" style="top: 1250px">
</div>
<div class="ui-widget-content slick-row odd" row="51" style="top: 1275px">
</div>
<div class="ui-widget-content slick-row even" row="52" style="top: 1300px">
</div>
<div class="ui-widget-content slick-row odd" row="53" style="top: 1325px">
</div>
<div class="ui-widget-content slick-row even" row="54" style="top: 1350px">
</div>
<div class="ui-widget-content slick-row odd" row="55" style="top: 1375px">
</div>
<div class="ui-widget-content slick-row even" row="56" style="top: 1400px">
</div>
<div class="ui-widget-content slick-row odd" row="57" style="top: 1425px">
</div>
<div class="ui-widget-content slick-row even" row="58" style="top: 1450px">
</div>
<div class="ui-widget-content slick-row odd" row="59" style="top: 1475px">
</div>
<div class="ui-widget-content slick-row even" row="60" style="top: 1500px">
</div>
<div class="ui-widget-content slick-row odd" row="61" style="top: 1525px">
</div>
<div class="ui-widget-content slick-row even" row="62" style="top: 1550px">
</div>
<div class="ui-widget-content slick-row odd" row="63" style="top: 1575px">
</div>
<div class="ui-widget-content slick-row even" row="64" style="top: 1600px">
</div>
<div class="ui-widget-content slick-row odd" row="65" style="top: 1625px">
</div>
<div class="ui-widget-content slick-row even" row="66" style="top: 1650px">
</div>
<div class="ui-widget-content slick-row odd" row="67" style="top: 1675px">
</div>
<div class="ui-widget-content slick-row even" row="68" style="top: 1700px">
</div>
<div class="ui-widget-content slick-row odd" row="69" style="top: 1725px">
</div>
<div class="ui-widget-content slick-row even" row="70" style="top: 1750px">
</div>
<div class="ui-widget-content slick-row odd" row="71" style="top: 1775px">
</div>
<div class="ui-widget-content slick-row even" row="72" style="top: 1800px">
</div>
</div>
</div>