天天看点

kendo grid 的小例子

    //grid数据初始化start

            var columnsData = [{   //grid列定义start

                title: "序号",

                template: "<span class='row-number'></span>",

                width: 80

            }, {

                field: "accountCode",

                title: "科目代码",

                width: 200

            }, {

                field: "accountName",

                title: "科目名称"

            }, {

                field: "CompanyName",

                title: "目标成本"

            }, {

                field: "Country",

                title: "基线目标成本"

            }];   //grid列定义end

            $scope.templateListOption = {

                dataSource: {

                    transport: {

                        read: {

                            url: abp.appPath + 'api/services/app/DicFinancialAccount/LoadSon',

                            type: "post",

                            contentType: "application/json",

                            dataType: "json",

                            data: function () {

                                return { page: 1 };

                            }

                        },

                        parameterMap: function (options, operation) {

                            if (operation == "read") {

                                return JSON.stringify(options);

                            }

                        }

                    },

                    schema: {

                        type: "json",

                        data: function (data) {

                            return data.result.data.data; //指向返回json中的table数据项

                        },

                        model: {

                            id: "id",

                            fields: {

                                "accountCode": { editable:false, type: "number" }

                            }

                        }

                    },

                },

                editable:true,

                dataBound: function () {

                    var rows = this.items();

                    $(rows).each(function () {

                        var index = $(this).index() + 1;

                        var rowLabel = $(this).find(".row-number");

                        $(rowLabel).html(index);

                    });

                },

                columns: columnsData

            }

            //grid数据初始化end

            //基本信息input显示内容初始化数据

            $scope.projectInfo = {

                type: "8月份成本预算",

                classify: "月份成本预算",

                projectManager: "陶经理",

                projecyName: "大众",

                projectCode: "123456",

                projectLeader: "陶经理",

                startTime: "2016-06-05",

                endTime: "2016-08-15",

                price:"120000"

            };

            //测试保存数据       注意,这里可以获取grid表格里的数据,在编辑完数据之后在获取更改后的数据方法

            $scope.saveModel = function () {

                var grid = $("#grid").data("kendoGrid");//获取grid对象

                console.log(grid.dataSource.data());//获取grid里的data

            }