2017年2月 总版技术专家分月排行榜第三
2017年5月 .NET技术大版内专家分月排行榜第一2017年4月 .NET技术大版内专家分月排行榜第一2017年3月 .NET技术大版内专家分月排行榜第一2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。Angular-xeditable插件
xeditable是什么呢，是一款对表格操作的插件，省去了我们自己去写ng-model去双向绑定数据，当然这只是其中的一点而已，来让我们看看它的神奇吧
xeditable是什么呢，是一款对表格操作的插件，省去了我们自己去写ng-model去双向绑定数据，当然这只是其中的一点而已，来让我们看看它的神奇吧
当然他也依赖一些库，类似于Bootstrap 的 当然有些功能也需要angular-ui bootstrap. ，在API可以知道需要加载什么，其实全加进去就行，angular开发需要的插件还是不少的。
下载地址 上面给出的官网 或者bower下载 bower install angular-xeditable
在我们项目中使用
&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'
先是最简单的
//自行加上ng-app才能在下面给出的网站运行
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都应该看得懂的，是不是提起兴趣了~~~。接着上干货
app.controller('SelectLocalCtrl', function($scope, $filter) {
$scope.user = {
$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后台合作~
app.controller('SelectRemoteCtrl', function($scope, $filter, $http) {
$scope.user = {
groupName: 'admin' // original value
$scope.groups = [];
$scope.loadGroups = function() {
return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
$scope.groups =
$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 :
其实和上一个差不多，只是在controller里多了一些方法，我们来看看有什么变化loadGroups里就是一个http请求soeasy不知道的可以百度谷歌下，这里不说了scope.$watch(&user.group&, function(newVal, oldVal) 添加一个观察的，当user.group里的值变化时就执行，里面的和上面的也差不多
官网还有许多零碎的东西类似于editable-checklist等等的，都大同小异没什么区别，就算是英文结合上面的代码也不会有什么障碍
剩下的涉及到后台交互，也就是我们前台给后台传数据，我们应该如何写呢？
onbeforesave 和 onaftersave 的使用，表面意思就是在前台保存前，在前台保存后，使用方法都一样，他们唯一的区别是，我们传给后台时使用onaftersave 因为我们需要前台先保存了值再传给后台，否则传给后台的值是之前的值。onbeforesave是用来设置验证信息，确保信息正确。
app.controller('OnaftersaveCtrl', function($scope, $http) {
$scope.user = {
name: 'awesome user'
$scope.updateUser = function() {
return $http.post('/updateUser', $scope.user);
华丽分割线——————————&
以上这些都是单独一个的表格，涉及到整个表格的编辑或者某行的编辑我们该怎么写呢，官网给出了明确的例子
{{ user.name || 'empty' }}
{{ showStatus(user) }}
{{ showGroup(user) }}
savecancel
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 =
$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';
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(data, user.id)` $data的意思是所有的带有editable的值，我们就通过这个获得到值给后台传值。$visible ，我们一开始网站渲染是没有显示出form的，所以我们可以根据form是否显示来显示隐藏 $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出了验证后就无法使用了。
好了看了上面的估计也不多可以使用插件了，再结合官网，敲代码的热情一触即发是不是，来来来，搬砖吧。JS表格组件BootstrapTable行内编辑解决方案x-editable【6】
&&&&【提要】本篇《JS表格组件BootstrapTable行内编辑解决方案x-editable【6】》特别为需要编辑编程学习的朋友收集整理的，仅供参考。内容如下：
editable属性来配置可编辑的参数，注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，在列的editable属性里面也可以同样配置，这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。&&&&2、时间选择框&&&&有了上面的知识作为基础，我们来初始化生日这一列：&&&&-------------------------------------&&&&{field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy-MM-dd");},editable: {type: 'date',title: '生日'}}&&&&其他地方不用做任何修改，得到效果：&&&&&&&&这是x-editable的默认样式，如果你看着不爽，可以自行配置，x-editable提供了许多配置日期框的参数，如下：&&&&&&&&当然，如果精确到时分秒，可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果，看着还不错。&&&&&&&&&&&&3、下拉框&&&&表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式，比如我们的部门这一列的编辑可以写成这样：&&&&-------------------------------------&&&&{field: "DeptId",title: "部门",editable: {type: 'select',title: '部门',source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]}}&&&&得到效果&&&&&&&&当然，这种本地设置数据源的方法肯定是不能满足我们需求的，因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了，比如我们可以这样写：&&&&-------------------------------------&&&&{field: "DeptId",title: "部门",editable: {type: 'select',title: '部门',source: function () {var result = [];$.ajax({url: '/Editable/GetDepartments',async: false,type: "get",data: {},success: function (data, status) {$.each(data, function (key, value) {result.push({ value: value.ID, text: value.Name });});}});}}}&&&&后台我们配置一个方法&&&&-------------------------------------&&&&public JsonResult GetDepartments(){var lstRes = new List&Department&();lstRes.Add(new Department() { ID = "1", Name = "研发部" });lstRes.Add(new Department() { ID = "2", Name = "销售部" });lstRes.Add(new Department() { ID = "3", Name = "行政部" });lstRes.Add(new Department() { ID = "4", Name = "创意部" });lstRes.Add(new Department() { ID = "5", Name = "事业部" });return Json(lstRes, JsonRequestBehavior.AllowGet);}&&&&同样能达到我们想要的结果。&&&&代码释疑：这里有一点需要说明一下，细心的园友可能发现了，我们这里的 field: "DeptId" ，为什么这里要配置DeptId而不是DeptName呢很简单，因为我们需要和数据源里面的value值对应。&&&&4、复选框&&&&除了上述几种常见的编辑框，x-editable还为我们提供了复选框组的编辑。比如：&&&&-------------------------------------&&&&{field: "Hobby",title: "爱好",editable: {type: "checklist",separator:",",source: [{ value: 'bsb', text: '篮球' },{ value: 'f
特别声明：dataTable和x-editable中混合使用的问题 – Jason.z