如何创建可重复使用的 ig-grid答案

【问题标题】：How to create a reusable ig-grid如何创建可重复使用的 ig-grid
【发布时间】：2017-03-09 21:33:47
【问题描述】：

我已经搜索了一个示例，但没有找到。我的目标是通过传入不同的变量来重用 CreateGrid 方法。我的问题是我无法动态设置网格中的列。我无法弄清楚如何传递列变量。如果有人知道，请提交一个例子或指导我一个例子。任何帮助表示赞赏。

谢谢...

例子：

   $(document).ready(function () {      
        var blnAuto = false;


        var dogs = @Html.Raw(Json.Encode(Model.DogList));
        var gridA = "#gridDog";
        var dogColumns =  '{ key: "Type", headerText: "Type", dataType: "string", width: "50%"},{ key: "Name", headerText: "Name", dataType: "string", width: "50%" }'

        CreateGrid(dogs, gridA, blnAuto,  dogColumns);

        var cars = @Html.Raw(Json.Encode(Model.CarList));
        var  gridB = "#gridCar";
        var carColumns =  '{ key: "Make", headerText: "Make", dataType: "string", width: "34%"},{ key: "Model", headerText: "Model", dataType: "string", width: "33%" }, { key: "Year", headerText: "Year", dataType: "string", width: "33%"}'

        CreateGrid(cars, gridB, blnAuto, carColumns)           
    })



    function CreateGrid(data, grid, autoGen, columnVariable)
    {
        var bln = false;


            $(grid).igGrid({
                width: "100%",
                dataSource: data,
                dataSourceType: "json",
                autoGenerateColumns: bln,
                columns: [ columnVariable ],
                features: [
                    {
                        name: "Sorting",
                        type: "local",
                        applySortedColumnCss: false,
                        sortedColumnTooltip: "",
                        unsortedColumnTooltip: ""
                    }
                ]
            });
    }
    </script>

【问题讨论】：

我的标题应该是“如何创建可重复使用的 ig-grid 函数”，因为我不会使用相同的网格，而是实际的方法。

标签： javascript model-view-controller infragistics ignite-ui iggrid

【解决方案1】：

我很尴尬，我没有注意到列是一个数组。设置列如：

var carColumns =  [
    { key: "Make", headerText: "Make", dataType: "string", width: "34%" },
    { key: "Model", headerText: "Model", dataType: "string", width: "33%" },
    { key: "Year", headerText: "Year", dataType: "string", width: "33%"}
]

var dogColumns = [
    { key: "Type", headerText: "Type", dataType: "string", width: "50%" },
    { key: "Name", headerText: "Name", dataType: "string", width: "50%" }
]

希望它对那里的人有所帮助。

【讨论】：