Skip to content

angular xeditable

Jump to bottom
遇见王斌 edited this page Jun 23, 2020 · 5 revisions

angular-xeditable

1 前言

https://github.com/vitalets/angular-xeditable

Angular-xeditable 是 AngularJS 指令绑定，允许创建（可编辑元素） editable elements，这种技术被称之为 click-to-edit 或 edit-in-place。

官方手册

angular-xeditable 是基于 x-editable 开发的，但是是使用 AngularJS，支持复杂的表单和可编辑的网格。

2 使用

<span editable-text="key"  e-readonly="true" e-name="key" e-form="rowform">
__ key __
</span>

属性解释

【类型】editable-text       // 数据类型，后面的 "key" 为 `__key__`,即编辑模式的时候的显示值
【属性】e-readonly="true"   // 表示此字段只读，有些时候有些字段不需要人为编辑时，很有用
【属性】e-name="key"        // 表示编辑模式时字段的名称，生成数据时为 `{'key': xxx}`
【属性】e-form="rowform"    // 用于和按钮关联，进行联动

使用 x-editable 后，新增和更新在后端是同一个接口，因为新增行后的保存按钮和对原来的配置保存的按钮的功能是一样的

2.1 点击保存时，如何区分是新增记录还是更新记录

在前端保存函数中区分下是否是刚新增的配置, 如果是新增的配置，则触发后端新增接口，否则触发更新接口

2.1.1 所有记录以 dict 表达时

var app = angular.module('app')
app.controller('WuxingGroupDetailCtrl', ['$scope', 'Request', '$stateParams',
function ($scope, Request, $stateParams) {

    //$scope.groupData = {}
    $scope.get_list = function () {
        Request.get('/wuxing/group_get?appid=' + $stateParams.appid,
        function (res) {
            $scope.groupData = res.data;
        }, false, true);
    }
    // delete
    $scope.delete = function(key){
        var data = {};
        data["appid"] = $stateParams.appid
        data["key"] = key

        Request.post('/wuxing/group_delete', data ,
        function (res) {
            if (res.stat == "OK"){
                delete $scope.groupData[res.data.key]
            }
        });
    }
    // update
    $scope.save = function(data) {
        // appid 从 URL 中进行获取
        data["appid"] = $stateParams.appid
        if ($scope.groupData.hasOwnProperty(data.key))
        {
            // update
            Request.post('/wuxing/group_update', data ,
            function (res) {
                $scope.get_list();
            });
        }
        else
        {
            // create
            Request.post('/wuxing/group_create', data ,
            function (res) {
                $scope.get_list();
            });
        }

    };
    // create
    $scope.add = function() {
        $scope.inserted = {
            key: null,
            value: null,
        };
        $scope.groupData['key'] = $scope.inserted;
    };

    $scope.get_list();
}]);

2.1.2 所有记录以 list 表达时

可以将记录中的一个字段设置为只读字段，比如 id, 此 id 由服务端生成

当点击保存时，如果 id 字段值为默认值，则此记录需要 create，否则进行 update

3 常见问题

3.1 点击添加行按钮时，如何同时出现编辑按钮

shown="inserted == job" 起着非常重要的作用

<td style="white-space: nowrap">
    <!-- form -->
    <form editable-form name="rowform" onbeforesave="saveJob($data)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == job">
        <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-sm btn-info">
            保存
        </button>
        <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-sm btn-default">
            取消
        </button>
    </form>
    <div class="buttons" ng-show="!rowform.$visible">
        <button class="btn btn-sm btn-info" ng-click="rowform.$show()">编辑</button>
        <button class="btn btn-sm btn-danger" ng-click="removeJob(job.name)">删除</button>
    </div>
</td>
Clone this wiki locally