2

我正在尝试在slickgrid grid. 我是根据这个例子做的：http: //mleibman.github.com/SlickGrid/examples/example5-collapsing.html

该示例自然可以正常工作。所有内容都在正文部分javascript的页面内。html我将我的代码放在一个单独的文件中，在一个函数中，所以我猜这会以某种方式影响正确的功能。

这是我的代码： 

function loadDrillGrid(){

     var options = {
      editable: true,
      enableAddRow: true,
      enableCellNavigation: true,
      asyncEditorLoading: false
    };

    var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
      value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
      var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
      var idx = dataView.getIdxById(dataContext.id);
      if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
        if (dataContext._collapsed) {
          return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
        } else {
          return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
        }
      } else {
        return spacer + " <span class='toggle'></span>&nbsp;" + value;
      }
    };
    var data = [];
    var columns = [
      {id: "title", name: "Title", field: "title", width: 220, formatter: TaskNameFormatter, validator: requiredFieldValidator, cannotTriggerInsert: true},
      {id: "duration", name: "Duration", field: "duration", cannotTriggerInsert: true},
      {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, cannotTriggerInsert: true},
      {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, cannotTriggerInsert: true},
      {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, cannotTriggerInsert: true},
      {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80,  field: "effortDriven", cannotTriggerInsert: true}
    ];
    //$(function () {
    var indent = 0;
    var parents = [];
    var grid;   

      // prepare the data
      for (var i = 0; i < 10; i++) {
        var d = (data[i] = {});
        var parent = null;

        if (Math.random() > 0.8) {
          indent++;
          parent = i - 1;
          parents.push(parent);
        } else if (Math.random() < 0.3 && indent > 0) {
          indent--;
          parent = parents.pop();
        } else if (parents.length > 0) {
          parent = parents[parents.length - 1];
        }

        if (indent == 0) {
          parent = null;
        }

        d["id"] = "id_" + i;
        d["indent"] = indent;
        d["parent"] = parent;
        d["title"] = "Task " + i;
        d["duration"] = "5 days";
        d["percentComplete"] = Math.round(Math.random() * 100);
        d["start"] = "01/01/2009";
        d["finish"] = "01/05/2009";
        d["effortDriven"] = (i % 5 == 0);
      }

    //initialize dataview
     dataView = new Slick.Data.DataView({ inlineFilters: true });
       // initialize the model

      dataView.beginUpdate();
      dataView.setItems(data);
      dataView.endUpdate();
      // initialize the grid
      grid = new Slick.Grid('#view-per-member-table', dataView, columns, options);

    grid.onClick.subscribe(function (e, args) {
        if ($(e.target).hasClass("toggle")) {
          var item = dataView.getItem(args.row);
          if (item) {
            if (!item._collapsed) {
              item._collapsed = true;
            } else {
              item._collapsed = false;
            }

            dataView.updateItem(item.id, item);
          }
          e.stopImmediatePropagation();
        }
      });
    //})
    }

网格已成功加载示例数据，但是“ grid.onClick.subscribe ”事件在页面加载时不断被触发，不仅是在我单击网格时（至少这是我对此的理论行为的理解）和它给了我：

Uncaught TypeError: Cannot call method 'subscribe' of null.

我是一个真正的初学者JS，jQuery所以如果你能提供任何指示，我将不胜感激。干杯。

4

0 回答 0