bootstrap-editable实现bootstrap-table行内编辑
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行内编辑的更多相关文章
- element-ui table 行内编辑
EditRow.ts vue+element-ui+slot-scope原生实现可编辑表格 interface NoParamConstructor<T> { new(): T; } ex ...
- bootstrap editable 行内编辑
除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...
- BootStrap行内编辑
Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
#base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...
- datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
- jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
随机推荐
- Replica Set + sharding搭建mongodb集群
先上几个用到的yaml文件,以后有时间了再更新,我是借鉴的https://blog.csdn.net/zeroctu/article/details/71082168,本人按照上面的搭建,是可行的,不 ...
- vue 路由守卫
router.beforeEach((to, from, next) => { const nextRoute = [ 'login']; var token = window.localSto ...
- token鉴权的一种实现方式图解
- 系统管理--配置Gitlab
很多教程都有配这个,但这个又不能用于”源码管理”模块拉取代码,我一直很困惑这个配置有什么用,然后就找到了该插件的github项目地址才弄明白,链接:https://github.com/jenkins ...
- Hadoop3.2.0集群(4节点-无HA)
1.准备环境 1.1配置dns # cat /etc/hosts 172.27.133.60 hadoop-01 172.27.133.61 hadoop-02 172.27.133.62 hadoo ...
- C# 启动外部进程
C# 启动外部进程: var processInfo = new ProcessStartInfo(fullName); processInfo.UseShellExecute = false; pr ...
- 【做题】SRM701 Div1 Hard - FibonacciStringSum——数学和式&矩阵快速幂
原文链接 https://www.cnblogs.com/cly-none/p/SRM701Div1C.html 题意:定义"Fibonacci string"为没有连续1的01串 ...
- C# 简单粗暴写日志
public static void WriteLog(string text) { string path = AppDomain.CurrentDomain.BaseDirectory; path ...
- criteo marketing api 相关
官网登陆地址:https://marketing.criteo.com/ 官网api介绍:https://marketing.criteo.com/e/s/article?article=360001 ...
- zookeeper调试命令
转载自 https://www.cnblogs.com/andy6/p/7674028.html 一.zkServer.sh 1.查看 zkServer.sh 帮助信息[root@bigdata05 ...