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行内编辑的更多相关文章

  1. bootstrap editable 行内编辑

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

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

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

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

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

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

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

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

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

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

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

  7. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

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

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

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

随机推荐

  1. 开始第一段SPRINT

    四则运算Sprint计划 1.小组成员: 李豌湄:master 江丹仪:产品负责人 2.现状: 初步有一个四则运算的程序代码, 我们这个团队的编程基础比较薄弱,还不知道怎么将程序与数据库连接,也是在边 ...

  2. 软件工程(GZSD2015)学生博客列表

    2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...

  3. hive分区表

    分区表创建 row format delimited fields terminated by ',';指明以逗号作为分隔符 依靠插入表创建分区表  从表sample_table选择 满足分区条件的 ...

  4. [Java] Thread的start()和run()函数区别

    1.start()方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码: 通过调用Thread类的start()方法来启动一个线程,这时此线程是处于就绪状 ...

  5. 一本通1587【例 3】Windy 数

    1587: [例 3]Windy 数 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 原题来自:SCOI 2009 Windy 定义了一种 Windy 数:不含前 ...

  6. POJ3258-River Hopscotch-二分答案

    一条河里有一串石头,给出石头间的间距,让你去掉m个石头,使最短间距最大. 二分答案,对于每一种mid,判断要不要删除这块石头.然后逼近答案. #include <cstdio> #incl ...

  7. 矩阵游戏 HYSBZ - 1059(最大流)

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6266  Solved: 3065[Submit][Stat ...

  8. 22 Zabbix系统版本升级过程

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix系统版本升级过程 Zabbix升级与其他相类似系统升级一样,前提一定做好备份,备 ...

  9. 【Luogu4512】多项式除法(FFT)

    题面 洛谷 题解 模板题... 我直接蒯我写的东西... 这个除法是带余除法,所以并不能直接求逆解决. 要求的就是给定两个多项式\(A(x),B(x)\),其项数为\(n,m\) 求解一个\(n-m\ ...

  10. luogu3380/bzoj3196 二逼平衡树 (树状数组套权值线段树)

    带修改区间K大值 这题有很多做法,我的做法是树状数组套权值线段树,修改查询的时候都是按着树状数组的规则找出那log(n)个线段树根,然后一起往下做 时空都是$O(nlog^2n)$的(如果离散化了的话 ...