DevExtreme 之dxDataGrid 在Angularjs 框架下的应用

最新推荐文章于 2023-05-20 10:31:55 发布

weixin_34284188

最新推荐文章于 2023-05-20 10:31:55 发布

阅读量1.1k

点赞数

文章标签： javascript python xhtml ViewUI

原文链接：https://my.oschina.net/SummerSaxes/blog/737551

版权

2019独角兽企业重金招聘Python工程师标准>>>

dxDataGrid 有几种写法都可以达到构建一个表格的目的，官网给出的方法是：

Demo里给出了几种写法：

<body ng-controller="myCtrl">
        
        <div style="height:420px; max-width:750px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: [
    			{ dataField: 'author', width: 125 },
                { dataField: 'title', allowGrouping: false },
    			{ dataField: 'year', width: 60, sortIndex: 0, sortOrder: 'asc', allowGrouping: false },
    			{ dataField: 'genre', visible: false },
    			{ dataField: 'price', width: 60, format: { type: 'currency', precision: 2 }, visible: false, allowGrouping: false },
    			{ dataField: 'length', width: 65, allowGrouping: false },
    			{ dataField: 'format', width: 90 }
            ],
            columnChooser: { enabled: true },
            allowColumnReordering: true,
            sorting: { mode: 'multiple' },
            groupPanel: { visible: true, emptyPanelText: 'Drag a column header here to group grid records' },
            pager: { visible: true },
            paging: { pageSize: 7 },
            editing: {
                allowUpdating: true,
                mode: 'row',
                allowAdding: true,
                allowDeleting: true
            },
            filterRow: { visible: true },
            searchPanel: { visible: true },
            selection: { mode: 'none' }
        }">
        </div>
        
    </body>

刚接触DevExpress的时候，感觉代码风格偏向ECharts之类（可能是我先接触的ECharts所以有先入为主的观念），但是说实话当时看了时候的感觉是“把js代码写在<div>里面不是很优雅啊”，毕竟笔者自己是习惯于用编辑器自带的格式化代码快捷键的，比如webstorm的["ctrl+alt+l"]之类的，若文本判定是html语言的话，一格式化以后，<div>里面所有代码都没有了缩进，奇丑无比，也不利于代码维护，建议还是分开来写。

其他写法：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Configuring DataGrid</title>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
        <![endif]-->
        <!--[if gte IE 9]><!-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
        <!--<![endif]-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.web.js"></script>
        <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
        <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />
        <script type="text/javascript" src="grid.js"></script>
    </head>
    <body ng-controller="myCtrl">
        <div style="height:420px; max-width:750px; margin: 0 auto" dx-data-grid="{
            dataSource: books
        }">
        </div>
    </body>
</html>

var books = [
   { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman',
       price: 4.56, language: 'EN', length: 220, format: 'paperback' },	
   { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi',
       price: 12.43, language: 'EN', length: 224, format: 'hardcover' },
   { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi',
       price: 7.21, language: 'EN', length: 306, format: 'e-book' },
   { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel',
       price: 4.95, language: 'EN', length: 218, format: 'paperback' },
   { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction',
       price: 29.84, language: 'EN', length: 1024, format: 'hardcover' },
   { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel',
       price: 4.73, language: 'EN', length: 357, format: 'e-book' },
   { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction',
       price: 15.53, language: 'EN', length: 376, format: 'hardcover' },
   { author: 'G. Grass', title: "The Tin Drum", year: 1959, genre: 'Speculative fiction',
       price: 19.51, language: 'EN', length: 592, format: 'hardcover' },
   { author: 'R. Bradbury', title: "Dandelion Wine", year: 1957, genre: 'Novel',
       price: 5.95, language: 'EN', length: 298, format: 'e-book' },
   { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi',
       price: 4.50, language: 'EN', length: 298, format: 'e-book' },
   { author: 'R. Bradbury', title: "Fahrenheit 451", year: 1953, genre: 'Dystopian novel',
       price: 7.90, language: 'EN', length: 179, format: 'paperback' },	
   { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction',
       price: 2.41, language: 'EN', length: 384, format: 'paperback' },
   { author: 'F. Scott Fitzgerald', title: "The Great Gatsby", year: 1925, genre: 'Novel',
       price: 16.18, language: 'EN', length: 176, format: 'hardcover' },
   { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel',
       price: 9.12, language: 'EN', length: 480, format: 'e-book' },
   { author: 'E. Hemingway', title: "Farewell to Arms", year: 1929, genre: 'War novel',
       price: 8.59, language: 'EN', length: 354, format: 'e-book' },
   { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners',
       price: 8.28, language: 'EN', length: 258, format: 'paperback' }
];


var myApp = angular.module('myApp', ['dx']);
myApp.controller("myCtrl", function ($scope) {
    $scope.books = books;
});

好了，扯回正事。

dxDataGrid功能丰富，拖动表头可以直接更换列表顺序，提供了丰富的搜索和排序功能，表内数据可直接编辑。

一下提供一个表格编辑和弹窗popup组件联动的Demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>DevExtreme Demo</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" />
    <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script>
        window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))
    </script>
    <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script>
    <script src="data.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="index.js"></script>
</head>

<body class="dx-viewport">
    <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
        <div id="form-demo">
            <div dx-button="addButton"></div>
            <div id='showOlValue'></div>
            <div id='showNewValue'></div>
            <div dx-data-grid="vm.dxgrid" dx-item-alias="dxTemplateModel">
                <div data-options="dxTemplate:{ name:'cellTmlp' }" style="text-align: center;">
                    <div dx-button="Button" ng-click="showPoup(dxTemplateModel.data)"></div>
                </div>
            </div>
            <div dx-popup="plantWinOpt">
                <div data-options="dxTemplate: { name:'info' }">
                    <div dx-form="plantWinFrom"> </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var DemoApp = angular.module('DemoApp', ['dx']);
    DemoApp.controller('DemoController', function DemoController($scope) {
        var vm = $scope.vm = {
            fromData: {}
        };

        vm.dxgrid = {
            dataSource: customers,
            showRowLines: true,
            showColumnHeaders: true,
            showColumnLines: true,
            showBorders: true,
            pager: {
                visible: false,
                showNavigationButtons: true,
                showInfo: true,
                showPageSizeSelector: false,
            },
            allowColumnReordering: true,
            allowColumnResizing: true,
            columns: ["CompanyName", "City", "State", "Phone", "Fax", {
                dataField: 'Edit',
                width: 150,
                allowSorting: false,
                cellTemplate: "cellTmlp"
            }]
        }

        $scope.addButton = {
            text: 'add',
            type: 'default',
            onClick: function () {
                $scope.plantWinShow = true;
            }
        };

        $scope.Button = {
            text: 'Edit',
            type: 'default',
        };

        $scope.showPoup = function (data) {
            vm.fromData = angular.copy(data);
            $scope.plantWinShow = true;
        }

        $scope.plantWinOpt = {
            width: 700,
            height: 380,
            contentTemplate: "info",
            showTitle: true,
            title: "Form",
            deferRendering: true,
            dragEnabled: true,
            closeOnOutsideClick: false,
            toolbarItems: [{
                location: "after",
                toolbar: "bottom",
                visible: true,
                widget: 'dxButton',
                options: {
                    text: 'OK',
                    type: 'default',
                    onClick: function () {
                        $('#showNewValue').html("The value of CompanyName is : " + vm.fromData.CompanyName);
                    },
                }
            }, {
                location: "after",
                toolbar: "bottom",
                visible: true,
                widget: 'dxButton',
                options: {
                    text: 'cancel',
                    onClick: function () {
                        $scope.plantWinShow = false;
                    }
                }
            }],
            onHiding: function (e) {
                vm.from_validator.resetValues();
            },
            onInitialized: function (e) {
                vm.plantWin = e.component;
            },
            bindingOptions: {
                visible: "plantWinShow",
            }
        };


        $scope.plantWinFrom = {
            showRequiredMark: true,
            showColonAfterLabel: false,
            items: [{
                dataField: 'CompanyName',
                editorType: "dxTextBox",
            }, {
                dataField: 'City',
                editorType: "dxTextBox",
            }, {
                dataField: 'State',
                editorType: "dxTextBox",
            }, {
                dataField: 'Phone',
                editorType: "dxTextBox",
            }, {
                dataField: 'Fax',
                editorType: "dxTextBox",
            }],
            bindingOptions: {
                formData: 'vm.fromData',
            },
            onInitialized: function (e) {
                vm.from_validator = e.component;
            },
        }

    });

    var customers = [{
        "ID": 1,
        "CompanyName": "Super Mart of the West",
        "Address": "702 SW 8th Street",
        "City": "Bentonville",
        "State": "Arkansas",
        "Zipcode": 72716,
        "Phone": "(800) 555-2797",
        "Fax": "(800) 555-2171",
        "Website": "http://www.nowebsitesupermart.com"
    }, {
        "ID": 2,
        "CompanyName": "Electronics Depot",
        "Address": "2455 Paces Ferry Road NW",
        "City": "Atlanta",
        "State": "Georgia",
        "Zipcode": 30339,
        "Phone": "(800) 595-3232",
        "Fax": "(800) 595-3231",
        "Website": "http://www.nowebsitedepot.com"
    }, {
        "ID": 3,
        "CompanyName": "K&S Music",
        "Address": "1000 Nicllet Mall",
        "City": "Minneapolis",
        "State": "Minnesota",
        "Zipcode": 55403,
        "Phone": "(612) 304-6073",
        "Fax": "(612) 304-6074",
        "Website": "http://www.nowebsitemusic.com"
    }, {
        "ID": 4,
        "CompanyName": "Tom's Club",
        "Address": "999 Lake Drive",
        "City": "Issaquah",
        "State": "Washington",
        "Zipcode": 98027,
        "Phone": "(800) 955-2292",
        "Fax": "(800) 955-2293",
        "Website": "http://www.nowebsitetomsclub.com"
    }, {
        "ID": 5,
        "CompanyName": "E-Mart",
        "Address": "3333 Beverly Rd",
        "City": "Hoffman Estates",
        "State": "Illinois",
        "Zipcode": 60179,
        "Phone": "(847) 286-2500",
        "Fax": "(847) 286-2501",
        "Website": "http://www.nowebsiteemart.com"
    }, {
        "ID": 6,
        "CompanyName": "Walters",
        "Address": "200 Wilmot Rd",
        "City": "Deerfield",
        "State": "Illinois",
        "Zipcode": 60015,
        "Phone": "(847) 940-2500",
        "Fax": "(847) 940-2501",
        "Website": "http://www.nowebsitewalters.com"
    }, {
        "ID": 7,
        "CompanyName": "StereoShack",
        "Address": "400 Commerce S",
        "City": "Fort Worth",
        "State": "Texas",
        "Zipcode": 76102,
        "Phone": "(817) 820-0741",
        "Fax": "(817) 820-0742",
        "Website": "http://www.nowebsiteshack.com"
    }, {
        "ID": 8,
        "CompanyName": "Circuit Town",
        "Address": "2200 Kensington Court",
        "City": "Oak Brook",
        "State": "Illinois",
        "Zipcode": 60523,
        "Phone": "(800) 955-2929",
        "Fax": "(800) 955-9392",
        "Website": "http://www.nowebsitecircuittown.com"
    }, {
        "ID": 9,
        "CompanyName": "Premier Buy",
        "Address": "7601 Penn Avenue South",
        "City": "Richfield",
        "State": "Minnesota",
        "Zipcode": 55423,
        "Phone": "(612) 291-1000",
        "Fax": "(612) 291-2001",
        "Website": "http://www.nowebsitepremierbuy.com"
    }, {
        "ID": 10,
        "CompanyName": "ElectrixMax",
        "Address": "263 Shuman Blvd",
        "City": "Naperville",
        "State": "Illinois",
        "Zipcode": 60563,
        "Phone": "(630) 438-7800",
        "Fax": "(630) 438-7801",
        "Website": "http://www.nowebsiteelectrixmax.com"
    }, {
        "ID": 11,
        "CompanyName": "Video Emporium",
        "Address": "1201 Elm Street",
        "City": "Dallas",
        "State": "Texas",
        "Zipcode": 75270,
        "Phone": "(214) 854-3000",
        "Fax": "(214) 854-3001",
        "Website": "http://www.nowebsitevideoemporium.com"
    }, {
        "ID": 12,
        "CompanyName": "Screen Shop",
        "Address": "1000 Lowes Blvd",
        "City": "Mooresville",
        "State": "North Carolina",
        "Zipcode": 28117,
        "Phone": "(800) 445-6937",
        "Fax": "(800) 445-6938",
        "Website": "http://www.nowebsitescreenshop.com"
    }, {
        "ID": 13,
        "CompanyName": "Braeburn",
        "Address": "1 Infinite Loop",
        "City": "Cupertino",
        "State": "California",
        "Zipcode": 95014,
        "Phone": "(408) 996-1010",
        "Fax": "(408) 996-1012",
        "Website": "http://www.nowebsitebraeburn.com"
    }, {
        "ID": 14,
        "CompanyName": "PriceCo",
        "Address": "30 Hunter Lane",
        "City": "Camp Hill",
        "State": "Pennsylvania",
        "Zipcode": 17011,
        "Phone": "(717) 761-2633",
        "Fax": "(717) 761-2334",
        "Website": "http://www.nowebsitepriceco.com"
    }, {
        "ID": 15,
        "CompanyName": "Ultimate Gadget",
        "Address": "1557 Watson Blvd",
        "City": "Warner Robbins",
        "State": "Georgia",
        "Zipcode": 31093,
        "Phone": "(995) 623-6785",
        "Fax": "(995) 623-6786",
        "Website": "http://www.nowebsiteultimategadget.com"
    }, {
        "ID": 16,
        "CompanyName": "EZ Stop",
        "Address": "618 Michillinda Ave.",
        "City": "Arcadia",
        "State": "California",
        "Zipcode": 91007,
        "Phone": "(626) 265-8632",
        "Fax": "(626) 265-8633",
        "Website": "http://www.nowebsiteezstop.com"
    }, {
        "ID": 17,
        "CompanyName": "Clicker",
        "Address": "1100 W. Artesia Blvd.",
        "City": "Compton",
        "State": "California",
        "Zipcode": 90220,
        "Phone": "(310) 884-9000",
        "Fax": "(310) 884-9001",
        "Website": "http://www.nowebsiteclicker.com"
    }, {
        "ID": 18,
        "CompanyName": "Store of America",
        "Address": "2401 Utah Ave. South",
        "City": "Seattle",
        "State": "Washington",
        "Zipcode": 98134,
        "Phone": "(206) 447-1575",
        "Fax": "(206) 447-1576",
        "Website": "http://www.nowebsiteamerica.com"
    }, {
        "ID": 19,
        "CompanyName": "Zone Toys",
        "Address": "1945 S Cienega Boulevard",
        "City": "Los Angeles",
        "State": "California",
        "Zipcode": 90034,
        "Phone": "(310) 237-5642",
        "Fax": "(310) 237-5643",
        "Website": "http://www.nowebsitezonetoys.com"
    }, {
        "ID": 20,
        "CompanyName": "ACME",
        "Address": "2525 E El Segundo Blvd",
        "City": "El Segundo",
        "State": "California",
        "Zipcode": 90245,
        "Phone": "(310) 536-0611",
        "Fax": "(310) 536-0612",
        "Website": "http://www.nowebsiteacme.com"
    }];
</script>

</html>

转载于:https://my.oschina.net/SummerSaxes/blog/737551