重绘表时,所选单元格不是永久性的

时间:2016-02-23 09:08:23

标签: javascript html angularjs json html-table

我有一张桌子:

<style>
    table .highlighted {
        background-color: #999;
    }
    table .unhighlighted {
        background-color: whitesmoke;
    }

</style>

    <form>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-search"></i>
                        </div>
                        <input type="text" class="form-control" placeholder="Aramak İstediğiniz Ürün Alanını Giriniz" ng-model="src_product">
                    </div>
                </div>
            </form>
        </div>
        <div class="row">

            <div class="col-md-10">
                <br/>
                <table ng-table="usersTable" id="productTable" class="table table-striped">

                    <tr>
                        <th ng-repeat="column in cols">{{column}}</th>
                        <th> Adet</th>
                    </tr>

                    <tr ng-repeat="row in data  | filter: src_product">

                        <td class="unhighlighted" ng-click="selectCell(this)" ng-repeat="column in cols ">{{row[column]}}</td>
                        <td><input class="input-group" type="text" style="width: 100%; height: 30px !important" name=" adet" value="0"></td>
                    </tr>

                </table>
            </div>

        </div>

这是我的javascript文件:

myApp.controller('productController', ['$rootScope', '$scope', 'SharedDataService', "productFactory", "$log", "$filter", 'ngTableParams', function ($rootScope, $scope, SharedDataService, productFactory, $log, $filter, ngTableParams) {


    $scope.users = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
                        {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"},
                        {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
                        {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},                      
    {"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4@fda.gov","country":"Russia","ip_address":"128.72.13.52"},{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
                        {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"},
                        {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
                        {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},                      
    { "id": 50, "first_name": "Andrea", "last_name": "Greene", "email": "agreene4@fda.gov", "country": "Russia", "ip_address": "128.72.13.52" },
    { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "pkim0@mediafire.com", "country": "Indonesia", "ip_address": "29.107.35.8" },
                        { "id": 2, "first_name": "Judith", "last_name": "Austin", "email": "jaustin1@mapquest.com", "country": "China", "ip_address": "173.65.94.30" },
                        { "id": 3, "first_name": "Julie", "last_name": "Wells", "email": "jwells2@illinois.edu", "country": "Finland", "ip_address": "9.100.80.145" },
                        { "id": 4, "first_name": "Gloria", "last_name": "Greene", "email": "ggreene3@blogs.com", "country": "Indonesia", "ip_address": "69.115.85.157" },
    { "id": 50, "first_name": "Andrea", "last_name": "Greene", "email": "agreene4@fda.gov", "country": "Russia", "ip_address": "128.72.13.52" }];


    $scope.usersTable = new ngTableParams({
        page: 1,
        count: 10
    }, {
        total: $scope.users.length,
        getData: function ($defer, params) {

//this is redrawing part

            $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
            $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
            $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
            $defer.resolve($scope.data);
        }
    });
    $scope.cols = Object.keys($scope.users[0]);

    $scope.src_product = '';
$scope.cell = "";


$scope.selectCell = function (cell) {

    //  var den = Object.keys($scope.users[0])[4];
    var selectedCellindex = (cell.$index) + (cell.$parent.$index) * ($scope.cols.length + 1);
    var selectedCell = document.getElementsByTagName("td")[selectedCellindex];

    if (selectedCell.getAttribute("class") === null) {

        selectedCell.setAttribute("class", "highlighted");

    }
    else {
        selectedCell.removeAttribute("class");
    }

}
}]);

这是我的表格: enter image description here

我可以选择多个单元格,但是当我点击另一个页面或搜索任何内容时,表格会被重新绘制,选定的单元格会不再显示。 如何修复此用户数组没有任何更改?

0 个答案:

没有答案