使用$ http.post和php页面进行dirpagination + xeditable内联编辑

时间:2017-05-03 08:26:14

标签: php html angularjs post

我有一些代码: - angularjs [dirpagination和xeditable]

<script type="text/javascript">
var app = angular.module('appRoot',["angularUtils.directives.dirPagination","xeditable"]);
app.controller('ctrlData', function($scope,$http){
    $scope.pageSize = 25;
    $scope.currentPage = 1;
    $scope.dataTable = <?php print $this->json; ?>;

    $scope.sort = function(keyname){
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    }

    $scope.pageChangeHandler = function(num) {
        console.log('Data page changed to ' + num);
    }

    $scope.saveData = function (){
        $http({
            method:"post",
            url: "<?php print Config::get('URL');?>phonebook/modify",
            data: {
                nik: $scope.nik,
                ipphone: $scope.ipphone
            },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
    }
});

和带有dirpagination的html表。在td标签上我有一些与xeditable相似的代码  <a editable-text="adb.ipphone" onaftersave="saveData()"> {{ adb.ipphone || 'empty' }} </a>

和发布数据的php函数=电话簿/修改

public function modify(){
    $postdata = file_get_contents("php://input");
    $data = json_decode($postdata);
    @$user = $data->nik;
    @$ipphone = $data->ipphone;

    $output = LDAP::changeAttrWithauthForAdmin($user,'ipphone',$ipphone);
    if(!$output){
        Session::add('feedback_negative', Text::get('FEEDBACK_LDAP_IPPHONE_SAVED'));
        return false;
    }
    Redirect::to('phonebook/index');
}

输出到这里: list table

edit list table

  

我的问题:    - 编辑数据后未更改为db

1 个答案:

答案 0 :(得分:0)

ini jawabannya,ribet pake bahasa inggris indonesia aja udah oke。

<div class="main main-raised top-move">
<div class="section section-basic table-responsive" ng-controller="ctrlData">
    <div class="container"><div class="title"><h2>Account Management</h2></div>
        <div class="header">
            <form class="form">
                <div class="col-md-10">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">search</i>
                        </span> 
                        <div class="form-group is-empty">
                            <input type="text" class="form-control" ng-model="search" placeholder="Type text here.." />
                           <span class="material-input"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 pull-right">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">pageview</i>
                        </span>
                        <div class="form-group">
                            <select ng-model="pageSize" class="form-control">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            <span class="material-input"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr style="font-size:12px;">
                        <th style="text-align: center;">No</th>
                        <th style="text-align: center;" ng-click="sort('nik')">NIK
                            <span class="glyphicon sort-icon" ng-show="sortKey=='nik'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('fname')">Firstname
                            <span class="glyphicon sort-icon" ng-show="sortKey=='fname'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('lname')">Last Name
                            <span class="glyphicon sort-icon" ng-show="sortKey=='lname'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('namakaryawan')">Nama Karyawan
                            <span class="glyphicon sort-icon" ng-show="sortKey=='namakaryawan'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('title')">Jabatan
                            <span class="glyphicon sort-icon" ng-show="sortKey=='title'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('department')">Department
                            <span class="glyphicon sort-icon" ng-show="sortKey=='department'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('ipphone')">Ext
                            <span class="glyphicon sort-icon" ng-show="sortKey=='ipphone'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('email')">Email
                            <span class="glyphicon sort-icon" ng-show="sortKey=='email'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="adb in dataTable | orderBy:sortKey:reverse | filter:search | itemsPerPage: pageSize" pagination-id="listphonebook" style="font-size: 11px;">
                        <td><center>{{ $index+1 }}</center></td>
                        <td>{{ adb.nik }}</td>
                        <td><a editable-text="adb.fname" onbeforesave="updateFname($data, adb.nik)">{{ adb.fname || 'empty' }}</a></td>
                        <td><a editable-text="adb.lname" onbeforesave="updateLname($data, adb.nik)">{{ adb.lname || 'empty' }}</a></td>
                        <td><a editable-text="adb.namakaryawan" onbeforesave="updateDname($data, adb.nik)">{{ adb.namakaryawan || 'empty' }}</a></td>
                        <td><a editable-text="adb.title" onbeforesave="updateTitle($data, adb.nik)">{{ adb.title || 'empty' }}</a></td>
                        <td><a editable-text="adb.department" onbeforesave="updateDept($data, adb.nik)">{{ adb.department || 'empty' }}</a></td>
                        <td><a editable-text="adb.ipphone" onbeforesave="updateExt($data, adb.nik)">{{ adb.ipphone || 'empty' }}</a></td>
                        <td><a editable-text="adb.email" onbeforesave="updateEml($data, adb.nik)">{{ adb.email || 'empty' }}</a></td>
                    </tr>
                </tbody>
            </table>
            <div class="pull-right">
                Show <b>{{ pageSize }}</b> data(s) of <b>{{ dataTable.length }}</b> entrie(s).
            </div>
        </div>
    </div>
</div>
<center>
    <div ng-controller="ctrlPagination">
        <dir-pagination-controls pagination-id="listphonebook" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="<?php echo Config::get('URL'); ?>pagination"></dir-pagination-controls>
    </div>
</center>

<script type="text/javascript">
app.controller('ctrlData', function($scope,$http,$filter){
    $scope.pageSize = 10;
    $scope.currentPage = 1;
    $scope.dataTable = <?php print $this->json; ?>;

    $scope.sort = function(keyname){
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    }

    $scope.pageChangeHandler = function(num) {
        console.log('Data page changed to ' + num);
    }

    $scope.updateExt = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'ipphone' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change IPPhone Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateDname = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'displayname' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change Nama Karyawan Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateFname = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'givenname' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change FirstName Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateLname = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'sn' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change LastName Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateTitle = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'title' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change Title/Jabatan Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateDept = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'department' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change Department Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };

    $scope.updateEml = function(data,id){
        $http({
            method: "POST",
            url: "<?php print Config::get('URL');?>ldapmanagement/modify",
            data: {
                id: id,
                data_object: data,
                action_object: 'mail' /* name of attributes in LDAP or column in database */
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response){
            $scope.info_messages = "Change Email Success";
            alert($scope.info_messages);
        }, function errorCallback(response){
            console.log(response);
        });
    };
});