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行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
 
随机推荐
- 开始第一段SPRINT
			
四则运算Sprint计划 1.小组成员: 李豌湄:master 江丹仪:产品负责人 2.现状: 初步有一个四则运算的程序代码, 我们这个团队的编程基础比较薄弱,还不知道怎么将程序与数据库连接,也是在边 ...
 - 软件工程(GZSD2015)学生博客列表
			
2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...
 - hive分区表
			
分区表创建 row format delimited fields terminated by ',';指明以逗号作为分隔符 依靠插入表创建分区表 从表sample_table选择 满足分区条件的 ...
 - [Java] Thread的start()和run()函数区别
			
1.start()方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码: 通过调用Thread类的start()方法来启动一个线程,这时此线程是处于就绪状 ...
 - 一本通1587【例 3】Windy 数
			
1587: [例 3]Windy 数 时间限制: 1000 ms 内存限制: 524288 KB 题目描述 原题来自:SCOI 2009 Windy 定义了一种 Windy 数:不含前 ...
 - POJ3258-River Hopscotch-二分答案
			
一条河里有一串石头,给出石头间的间距,让你去掉m个石头,使最短间距最大. 二分答案,对于每一种mid,判断要不要删除这块石头.然后逼近答案. #include <cstdio> #incl ...
 - 矩阵游戏 HYSBZ - 1059(最大流)
			
1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 6266 Solved: 3065[Submit][Stat ...
 - 22 Zabbix系统版本升级过程
			
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix系统版本升级过程 Zabbix升级与其他相类似系统升级一样,前提一定做好备份,备 ...
 - 【Luogu4512】多项式除法(FFT)
			
题面 洛谷 题解 模板题... 我直接蒯我写的东西... 这个除法是带余除法,所以并不能直接求逆解决. 要求的就是给定两个多项式\(A(x),B(x)\),其项数为\(n,m\) 求解一个\(n-m\ ...
 - luogu3380/bzoj3196 二逼平衡树 (树状数组套权值线段树)
			
带修改区间K大值 这题有很多做法,我的做法是树状数组套权值线段树,修改查询的时候都是按着树状数组的规则找出那log(n)个线段树根,然后一起往下做 时空都是$O(nlog^2n)$的(如果离散化了的话 ...