angular与datatables 的结合(二)

angular与datatable

html 部分


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.min.css">
head>
<body ng-app ="myModule">
<div ng-controller="AngularWayChangeDataCtrl as showCase">
    <form class="form-inline" ng-submit="showCase.addPerson()">
        <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
            <thead>
            <tr>
                <th>
                    <div class="form-group">
                        <label>
                            <input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value="">
                        label>
                    div>
                th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="">
                        label>
                    div>
                th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="">
                        label>
                    div>
                th>
                <th>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">新增button>
                    div>
                th>
            tr>
            <tr>
                <th>IDth>
                <th>FirstNameth>
                <th>LastNameth>
                <th>th>
            tr>
            thead>
            <tbody>
            <tr ng-repeat="person in showCase.persons">
                <td>{{ person.id }}td>
                <td>{{ person.firstName }}td>
                <td>{{ person.lastName }}td>
                <td>
                    <button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning">修改button>
                    <button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger">删除button>
                td>
            tr>
            tbody>
        table>
    form>
div>
<script src="bower_components/jquery/dist/jquery.min.js">script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js">script>
<script src="bower_components/angular/angular.min.js">script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js">script>
<script src="./app.js">script>

body>
html>

angualrjs 部分



var data1 = [{
    "id": 860,
    "firstName": "Superman",
    "lastName": "Yoda"
}, {
    "id": 870,
    "firstName": "Foo",
    "lastName": "Whateveryournameis"
}, {
    "id": 590,
    "firstName": "Toto",
    "lastName": "Titi"
}, {
    "id": 803,
    "firstName": "Luke",
    "lastName": "Kyle"
}
];

angular.module('myModule', ['datatables'])
  .controller('AngularWayChangeDataCtrl', function ( DTOptionsBuilder, DTColumnDefBuilder){
    var vm = this;
    vm.persons = data1;
    vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
    vm.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3).notSortable()
    ];
    vm.person2Add = _buildPerson2Add(1);
    vm.addPerson = addPerson;
    vm.modifyPerson = modifyPerson;
    vm.removePerson = removePerson;

    function _buildPerson2Add(id) {
        return {
            id: id,
            firstName: 'Foo' + id,
            lastName: 'Bar' + id
        };
    }
    function addPerson() {
        vm.persons.push(angular.copy(vm.person2Add));
        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
    }
    function modifyPerson(index) {
        vm.persons.splice(index, 1, angular.copy(vm.person2Add));
        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
    }
    function removePerson(index) {
        vm.persons.splice(index, 1);
    }
  });

显示效果
angular与datatables 的结合(二)_第1张图片

总结

这种方法充分应该是完美的,充分利用了angular的模版系统,而且轻度依赖datatable,用来建立应用型web最佳之选。
附:
参考:[angular-datatables参考资料](http://l-lin.github.io/angular-datatables/)

你可能感兴趣的:(web开发,jquery,angularjs)