如何使用 jquery 表示法引用光滑网格答案

【问题标题】：How to reference a slick grid with jquery notation如何使用 jquery 表示法引用光滑网格
【发布时间】：2017-07-30 23:38:59
【问题描述】：

我正在使用一个名为 slick grid 的 javascript 库来在网页上显示网格。我需要通过 ajax 将网格信息发送到服务器。我的问题是我需要使用 jquery 表示法来访问网格。

这里是 div 网格：

<div id="myGrid" style="width:100%;height:300px;"></div>

这是我正在使用的 javascript：

var grid;

$(function () {
    for (var i = 0; i < 30; i++) {
        data[i] = {
            pbc_id: "00" + i,
            task: "Task " + i,
            due_date: "02/02/2017"
        };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

    grid.setSelectionModel(new Slick.CellSelectionModel());
    grid.registerPlugin(new Slick.AutoTooltips());

    // set keyboard focus on the grid
    grid.getCanvasNode().focus();

    var copyManager = new Slick.CellCopyManager();
    grid.registerPlugin(copyManager);

    copyManager.onPasteCells.subscribe(function (e, args) {
        if (args.from.length !== 1 || args.to.length !== 1) {
            throw "This implementation only supports single range copy and paste operations";
        }

        var from = args.from[0];
        var to = args.to[0];
        var val;
        for (var i = 0; i <= from.toRow - from.fromRow; i++) {
            for (var j = 0; j <= from.toCell - from.fromCell; j++) {
                if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
                    val = data[from.fromRow + i][columns[from.fromCell + j].field];
                    data[to.fromRow + i][columns[to.fromCell + j].field] = val;
                    grid.invalidateRow(to.fromRow + i);
                }
            }
        }
        grid.render();
    });

    grid.onAddNewRow.subscribe(function (e, args) {
        var item = args.item;
        var column = args.column;
        grid.invalidateRow(data.length);
        data.push(item);
        grid.updateRowCount();
        grid.render();
    });
})

var DocumentViewModel = function () {

    var self = this;

    self.sendGridData = function () {
        var data = $("myGrid");

        //TODO: access the grid data and convert the data to a json string

        $.ajax({
            async: true,
            type: "POST",
            dataType: "json",
            url: '/MyService/SubmitRequest',
            data: ,
            success: function (response) {
               alert("success");
            },
            error: function (xhr, textStatus, exceptionThrown) {
                alert("error");
            }
        });
    };
};

任何帮助将不胜感激。

编辑：trying to access the grid variable where my todo is

【问题讨论】：

var Data_Grid = grid.getData();
由于某种原因，我无法访问 TODO 所在的网格变量。
我也在使用它，它正在工作 O_o
在我的编辑中查看图片：
grid 在全局命名空间中声明，因此应该在您的 TODO 点可用。但显然不是，正如您的屏幕截图所证明的那样。所以你的代码不像你上面写的那样。

标签： javascript jquery ajax asp.net-mvc slickgrid

【解决方案1】：

我设法在上面重现了您的问题。必须添加一些代码才能让示例按原样执行。似乎您的主要问题是，尽管网格变量是在全局地址空间中声明的，但 DocumentViewModel 的内容无法访问它，因为 DocumentViewModel 中的所有内容都是该函数私有的，或者您的 DocumentViewModel 在声明其他代码之前正在执行（更多可能）但是您没有显示触发 DocumentViewModel 的方式或时间，所以我无法确定。

但是通过在 '$(function () {' 中移动 DocumentViewModel 最终找到了变量并且可以访问网格。

我将在下面粘贴我的代码，其中包括您的代码以及我添加的额外代码以使其执行。

<html>
<head>
<h1>myGrid SO Question Test</h1>

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<style src="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></style>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>

<script src="http://mleibman.github.com/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellselectionmodel.js"></script>

<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.autotooltips.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellcopymanager.js"></script>

<script src="my.js"></script>
</head>
<body>
<div id="myGrid" style="width:100%;height:300px;"></div>
</body>
</html>

$(function () {

    var grid;

    // Addition Start
     var columns = [{
     id: "column",
     name: "",
     field: "column",
     //selectable: false,
     focusable: false
    },
               {
     id: "data",
     name: "Data",
     field: "data"
    }];

    var options = {
     enableCellNavigation: true,
     enableColumnReorder: false      
    };
    // Addition End


    var data = [];              // Addition
    for (var i = 0; i < 30; i++) {
        data[i] = {
            pbc_id: "00" + i,
            task: "Task " + i,
            due_date: "02/02/2017"
        };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

    grid.setSelectionModel(new Slick.CellSelectionModel());
    grid.registerPlugin(new Slick.AutoTooltips());

    // set keyboard focus on the grid
    grid.getCanvasNode().focus();

    var copyManager = new Slick.CellCopyManager();
    grid.registerPlugin(copyManager);

    copyManager.onPasteCells.subscribe(function (e, args) {
        if (args.from.length !== 1 || args.to.length !== 1) {
            throw "This implementation only supports single range copy and paste operations";
        }

        var from = args.from[0];
        var to = args.to[0];
        var val;
        for (var i = 0; i <= from.toRow - from.fromRow; i++) {
            for (var j = 0; j <= from.toCell - from.fromCell; j++) {
                if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
                    val = data[from.fromRow + i][columns[from.fromCell + j].field];
                    data[to.fromRow + i][columns[to.fromCell + j].field] = val;
                    grid.invalidateRow(to.fromRow + i);
                }
            }
        }
        grid.render();
    });

    grid.onAddNewRow.subscribe(function (e, args) {
        var item = args.item;
        var column = args.column;
        grid.invalidateRow(data.length);
        data.push(item);
        grid.updateRowCount();
        grid.render();
    });

    // Move DocumentViewModel inside "$(function ()" 
    var DocumentViewModel = function () {

    var self = this;

    self.sendGridData = function () {
        var data = $("myGrid");

        //TODO: access the grid data and convert the data to a json string

        var Data_Grid = grid.getData(); 
        var myJsonString = JSON.stringify(Data_Grid); 

        // $.ajax({
            // async: true,
            // type: "POST",
            // dataType: "json",
            // url: '/MyService/SubmitRequest',
            // data: ,
            // success: function (response) {
               // alert("success");
            // },
            // error: function (xhr, textStatus, exceptionThrown) {
                // alert("error");
            // }
        // });
    };

    self.sendGridData();    // Addition Trigger our local function
};

// Addition : Trigger our function to prove we can access the grid's data
DocumentViewModel();

})

【讨论】：