Angular-xeditable 入坑记

今天搞了搞这个东西。。不得不抱怨angular被墙的太厉害不过我还是要留下网址
http://vitalets.github.io/angular-xeditable/
我自己以后能看中文的所以我就自己写一篇笔记，这样一些平常的功能我就不用去读英文文档了，省事了好多。道友们中文福利来啦~~

xeditable是什么呢，是一款对表格操作的插件，省去了我们自己去写ng-model去双向绑定数据，当然这只是其中的一点而已，来让我们看看它的神奇吧

当然他也依赖一些库，类似于Bootstrap 的CSS 当然有些功能也需要angular-ui bootstrap. ，在API可以知道需要加载什么，其实全加进去就行，angular开发需要的插件还是不少的。

下载地址上面给出的官网或者bower下载 bower install angular-xeditable

在我们项目中使用

<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>

var app = angular.module("app", ["xeditable"]);
//这里是设置主题，提供了应该是3中主题，在源码的最后有兴趣可以看一下。
app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

先是最简单的

html

//自行加上ng-app才能在下面给出的网站运行
<div ng-controller="TextSimpleCtrl" id="TextSimpleCtrl">
  <a href="#" editable-text="user.name" e-label="User Name">{{ user.name || 'empty' }}</a>
</div>

controller.js

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});
//以上代码之后省略了
app.controller('TextSimpleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});

http://jsfiddle.net/NfPcH/28/ 前端代码在线演示的网站可以把代码复制上去
这个代码什么意思呢，首先从html说起 editable-text=“user.name” 就是文本table中的文本本身就有双向绑定不需要我们写ng-model ，绑定的便是我们的user.name 至于controller只要学过angular都应该看得懂的，是不是提起兴趣了~~~。接着上干货

demo2

<div ng-controller="SelectLocalCtrl">
  <a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>
</div>

app.controller('SelectLocalCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
});

这个就是当我们表格中需要有下拉框时我们需要的，editable-select=“user.status” select下拉菜单，双向绑定了user.status
最坑的代码来了e-ng-options="s.value as s.text for s in statuses 这东西我整了好久才明白 - -||
这里面 s.text是下拉框中的值，s.value是当我在下拉框选中后我给双向绑定的值，也就是说我controller
user.status的值是s.value 是不是有点晕，去网站上一试就明白了~~~ controller里的过滤器的意思也不是很难理解，对statuses进行过滤当其中的value等于user.status时取出来，因为我们的user.status是我们双向绑定的值所以我们可以通过它来锁定我们需要的值在哪里。之后将我们需要的值返回，这是比较难得一个地方，我觉得我解释的还算好吧~大家勉强看看吧。

上面这个是本地数据，在实际项目中我们需要从后台获取数据~ 博主就在和java后台合作~

<div ng-controller="SelectRemoteCtrl">
  <a href="#" editable-select="user.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
    {{ user.groupName || 'not set' }}
  </a>
</div>

app.controller('SelectRemoteCtrl', function($scope, $filter, $http) {
  $scope.user = {
    group: 4,
    groupName: 'admin' // original value
  }; 

  $scope.groups = [];

  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.$watch('user.group', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      $scope.user.groupName = selected.length ? selected[0].text : null;
    }
  });
});

其实和上一个差不多，只是在controller里多了一些方法，我们来看看有什么变化loadGroups里就是一个$http请求so~easy不知道的可以百度谷歌下，这里不说了

scope.

$s c o p e .$ watch(‘user.group’, function(newVal, oldVal) 添加一个观察的，当user.group里的值变化时就执行，里面的和上面的也差不多

官网还有许多零碎的东西类似于editable-checklist等等的，都大同小异没什么区别，就算是英文结合上面的代码也不会有什么障碍

剩下的涉及到后台交互，也就是我们前台给后台传数据，我们应该如何写呢？
onbeforesave 和 onaftersave 的使用，表面意思就是在前台保存前，在前台保存后，使用方法都一样，他们唯一的区别是，我们传给后台时使用onaftersave 因为我们需要前台先保存了值再传给后台，否则传给后台的值是之前的值。onbeforesave是用来设置验证信息，确保信息正确。

<div ng-controller="OnaftersaveCtrl" id="OnaftersaveCtrl">
  <a href="#" editable-text="user.name" onaftersave="updateUser()">
    {{ user.name || 'empty' }}
  </a>
</div>

app.controller('OnaftersaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function() {
    return $http.post('/updateUser', $scope.user);
  };
});

华丽分割线--------------------------------
以上这些都是单独一个的表格，涉及到整个表格的编辑或者某行的编辑我们该怎么写呢，官网给出了明确的例子

<div ng-controller="EditableRowCtrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:35%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>
      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button type="button" class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>

  <button type="button" class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

controller.js

app.controller('EditableRowCtrl', function($scope, $filter, $http) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
    angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

  // remove user
  $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

  // add user
  $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
    };
    $scope.users.push($scope.inserted);
  };
});

这段代码很长我叫最重点的几个陌生的东西myform.$show() myform是表单的名字相当于上面那些例子去点击文本一样，

让

我

们

的

上

面

带

有

的

以

标

签

样

子

显

示

出

来

。

我

们

可

以

在

下

审

查

元

素

，

观

察

变

化

，

‘

(

show让我们的上面带有的editable的以form标签样子显示出来。我们可以在chrome下审查元素，观察dom变化，`saveUser(

$s h o w 让我们的上面带有的 e d i t a b l e 的以 f o r m 标签样子显示出来。我们可以在 c h r o m e 下审查元素，观察 d o m 变化， ‘ s a v e U s e r ($ data, user.id) $data的意思是所有的带有editable的值，我们就通过这个获得到值给后台传值。

‘

，

我

们

一

开

始

网

站

渲

染

是

没

有

显

示

出

的

，

所

以

我

们

可

以

根

据

是

否

显

示

来

显

示

隐

藏

‘

visible` ，我们一开始网站渲染是没有显示出form的，所以我们可以根据form是否显示来显示隐藏 `

$v i s i b l e ‘ ，我们一开始网站渲染是没有显示出 f o r m 的，所以我们可以根据 f o r m 是否显示来显示隐藏 ‘$ waiting`博主也不是很懂，如果有道友明白希望能告知下

官网说e-required will not work since HTML5 validation only works if submitting a form with a submit button and editable-form submits via a script.
也就是说这个e-required html5出了验证后就无法使用了。

好了看了上面的估计也不多可以使用插件了，再结合官网，敲代码的热情一触即发是不是，来来来，搬砖吧。