BootStrap行内编辑
Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到。
引用的js和css大致如下:
@*、Jquery组件引用*@
<script src="~/Scripts/jquery-3.3.1.js"></script>
@*、bootstrap组件引用*@
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
@*、bootstrap table组件以及中文包的引用*@
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="~/Scripts/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
@*、 X-Editable组件引用*@
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap3-editable/js/bootstrap-editable.js"></script>
这里需要提醒的是,你这些引用一定要对,否则你实现不了也是正常的。
代码:
$('#table').bootstrapTable({
url: '/MyCourse/GetCourseTable', //请求后台的URL(*)
method: 'get', //请求方式(*)
columns: [{
checkbox: true
},
{
field: 'ClassNumber',
title: '课程编号'
}, {
field: 'ClassName',
title: '课程名称',
editable: {
type: 'text',
title: '课程名称',
validate: function (v) {
if (!v) return '用户名不能为空';
}
}
}, {
field: 'TeacherName',
title: '授课老师',
editable: {
type: 'text',
title: '授课老师',
validate: function (v) {
if (!v) return '用户名不能为空';
}
}
}],
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/MyCourse/UpdataCourse",
data: row,
dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('提交数据成功');
}
},
error: function () {
alert('编辑失败');
},
complete: function () {
}
});
}
})
照着抄就行了。
BootStrap行内编辑的更多相关文章
- bootstrap editable 行内编辑
除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
- [转]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 ...
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
随机推荐
- 推广App篇
推广App篇 团队github地址:https://github.com/ouqifeng/EasyGoOperation.git 在完成该项目工程后,我们开始寻找合适的方法推广我们的软件. 经过一番 ...
- Maximal Binary Matrix CodeForces - 803A (贪心+实现)
题目链接 题意有点坑: 给你一个N*N的矩阵,让你填入K个1,使之整个矩阵关于左上到右下的对角线对称,并且这个要求这个矩阵的字典序最大. 对矩阵的字典序的定义是从每一行的第一个元素开始比较,大着为字典 ...
- CodeIgniter中使用base_url()时显示http://::1/ci/
URL 辅助函数文件包含了一些帮助你处理 URL 的函数. 加载辅助函数后,你可以使用base_url(),site_url(),current_url()等一些列函数,但是有时候你会遇到这种问题,就 ...
- NODE中解决跨域请求的问题
1.Node Express 解决请求跨域请求 标签(空格分隔): 跨域 1是Access-Control-Allow-Origin 允许的域 2是Access-Control-Allow-Heade ...
- Java的Spring内实现的mini版内存"计数器"功能
工期紧急,不让用Redis,自己实现了一个Spring内的mini版内存"计数器"功能,很简陋,和业务耦合太紧密,需要改进. public Long getCreationCoun ...
- Docker(二十七)-Docker 清理占用的磁盘空间
1. docker system命令 docker system df命令,类似于Linux上的df命令,用于查看Docker的磁盘使用情况: docker system dfTYPE TOTAL A ...
- [区块链]POW 与POS
POW:全称Proof ofWork,工作证明. 这是什么意思呢?就是说,你能获得多少货币,取决于你挖矿贡献的有效工作,也就是说,你电脑性能越好,分给你的矿就会越多,这就是根据你的工作证明来执行货币的 ...
- [转帖]GitHub上整理的一些工具
GitHub上整理的一些工具 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 inf ...
- YII2十三大特性
第一(框架&项目) 1. 框架安装 2. 框架扩展安装 3. 项目初始化-->php yii init 4. 美化URL配置 'urlManager' => [ 'enablePr ...
- 理解C语言递归up_and_down
函数调用.理解递归 对于程序,编译器会对其分配一段内存,在逻辑上可以分为代码段,数据段,堆,栈. 代码段:保存程序文本,指令指针EIP就是指向代码段,可读可执行不可写 数据段:保存初始化的全局变量和静 ...