如何创建可重用的ig-grid

时间:2017-03-09 21:33:48

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

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

...谢谢

示例:

   $(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>

1 个答案:

答案 0 :(得分: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%" }
]

希望它可以帮助那些人。