bootstrap-editable行内编辑效果如下:

需要引入插件

列初始化代码,为可编辑的列添加editable属性:

columns = [
{
title: '文件名',
field: 'Name',
align: 'center',
valign: 'middle',
sortable: true,
width: '20%'
}, {
title: '文件版本号',
field: 'VerNum',
align: 'center',
valign: 'middle',
sortable: true,
width: '20%',
editable:{
emptytext: '-',
}
}, {
title: '文件描述',
field: 'Description',
align: 'center',
valign: 'middle',
editable: {
emptytext: '-'
}
}, {
title: '文件ID',
field: 'ObjectId',
visible: false
}
]

保存修改后台调用方法:

function $onRowEditableSave(field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "../FilesDownload/Edit?type=FileInfo",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (data == "1" && status == "success") {
showTip('修改成功!', "success");
refreshTable();
$('#table .editable').editable('enable');
$('#btn_offeditfile').hide();
$('#btn_editfile').show();
}
else {
showTip('修改失败!', "error");
refreshTable();
$('#table .editable').editable('enable');
$('#btn_offeditfile').hide();
$('#btn_editfile').show();
}
},
error: function () { showTip('连接服务器超时!', "error");
},
complete: function () { } });
}

通过js动态控制是否可编辑:

$('#table .editable').editable('disable');

bootstrap-editable实现bootstrap-table行内编辑的更多相关文章

  1. element-ui table 行内编辑

    EditRow.ts vue+element-ui+slot-scope原生实现可编辑表格 interface NoParamConstructor<T> { new(): T; } ex ...

  2. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

  3. BootStrap行内编辑

    Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...

  4. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  5. [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  6. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  7. Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑

    #base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...

  8. datatables表格行内编辑的实现

    Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...

  9. jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)

    可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...

随机推荐

  1. BELLMEN-FORD普通

    #include <iostream> using namespace std; int m, n, u[100010], v[100010], w[100010];int check;i ...

  2. webpack4 坑收集:html-webpack-plugin在多页面时,无法将optimization.splitChunks提取的公共块,打包到页面中

    问题描述:  有2个页面index.html和product.html,用html-webpack-plugin和optimization.splitChunks的基本配置如下 { template: ...

  3. java 执行https的请求

    普通的get和post请求只能执行http的请求,遇到的了https的就歇菜了,需要SSL安全证书处理. 该方法只能用jdk1.7和1.8进行处理,jdk1.6会报Could not generate ...

  4. python generator用法

    转自:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868196510 ...

  5. 自娱自乐RN版小说APP历程记录

    当前rn版本 "react": "16.6.3" "react-native": "0.58.5" 通过react-na ...

  6. Pandas逐行读取Dateframe并转为list

    for indexs in df.index: rowData = df.loc[indexs].values[0:7] rowData = rowData.tolist() #print(rowDa ...

  7. python文件读书笔记

    一.打开文件 1 f=open('text.txt',r)  二.读取文件 print(f.read) 三.关闭文件 f.close() 比较好用的是运用with with open('text.tx ...

  8. jQuary学习の五のAJAX

    AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 一.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. loa ...

  9. docker容器的时间同步

    好久没写博客了,有时间开始陆续整理一下工作中遇到的问题,今天罗列一下docker容器的时间同步问题 我们每次在run容器的时候,会存在时区不同的问题,这样对数据处理会有很大障碍,操作如下: 第一种方式 ...

  10. java扫描文件。

    前言:一步一步来实现迷你ioc框架,前面的容器工厂也是一个铺垫,这次的扫描文件也是一个铺垫…… 需求:扫描当前项目下所有文件.包括文件夹下文件夹里面的文件.利用递归进行扫描 ScanFileUtil类 ...