jQuery slickgrid events

I am trying to implement a "drill in/out" in a `slickgrid grid`. I am doing that based on this example: [http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html][1] [1]: http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html The example naturally works fine. All the `javascript` is within the `html` page in the body section. I'm putting my code in a separate file, within a function, so I guess this somehow affects the correct functioning. This is my code: function loadDrillGrid(){ var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false }; var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) { value = value.replace(/&/g,"&").replace(//g,">"); var spacer = ""; var idx = dataView.getIdxById(dataContext.id); if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) { if (dataContext._collapsed) { return spacer + " " + value; } else { return spacer + " " + value; } } else { return spacer + " " + 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(); } }); //}) } The grid is loaded successfully with the example data, however the "**grid.onClick.subscribe**" event keeps getting fired when the page loads, not only when I click the grid (at least this is my understanding about the theoretical behavior of this) and it gives me: `Uncaught TypeError: Cannot call method 'subscribe' of null`. I'm a real beginner in `JS` and `jQuery` so if you may give any pointers I would appreciate it. Cheers.

以上就是jQuery slickgrid events的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏