0

**固定的。问题在于列。我正在执行 ajax 调用以使列显示在网格上,然后是列选择器的所有可能列。我忘记了 jQuery 不像后面的代码那样工作,所以我有一个函数 LoadColumns(); 然后是 LoadAllColumns();。在 LoadAllColumns 中进行 ajax 调用后,我正在加载网格。有时 LoadColumns 会先运行,一切都会好起来的,有时则不会。在 LoadColumns 中成功调用 ajax 后,我移动了 LoadAllColumns 函数,现在一切正常。谢谢您的帮助!

我正在将 Slick Grid 实施到我的 Web 应用程序中,但遇到了问题。我在一个单独的应用程序中开发网格,一切正常。然后我将网格和所有代码移动到我的 Web 应用程序中,并且每次都不会加载网格。有时我会来到网格,一切都会正常加载,有时,我会去网格,它不会显示任何东西。我正在使用数据视图并通过 ajax 获取数据。我首先提取所有数据,然后实例化网格和数据视图。我一整天都在浏览我的代码,对可能导致这种情况的原因感到困惑。

  1. 进行我的 ajax 调用(所有数据都按原样返回)
  2. 下面是我如何加载网格

    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>
4

0 回答 0