BootStrap行内编辑

时间:2022-04-08 18:27:05

  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. &lbrack;转&rsqb;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&lpar;客户关系管理系统&rpar;--69--59PerfectCRM实现king&lowbar;admin行内编辑

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

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

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

  8. jQuery EasyUI 数据网格 - 启用行内编辑(转自http&colon;&sol;&sol;www&period;runoob&period;com&sol;jeasyui&sol;jeasyui-datagrid-datagrid12&period;html)

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

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

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

随机推荐

  1. 在 Web 项目中应用 Apache Shiro

    Apache Shiro 是功能强大并且容易集成的开源权限框架,它能够完成认证.授权.加密.会话管理等功能.认证和授权为权限控制的核心,简单来说,"认证"就是证明你是谁? Web ...

  2. interesting js

    [‎5/‎3/‎2016 4:18 PM] Calos Chen: function a(b,e){var a=0;a+=b;if(e){console.log(b+e);return;} retur ...

  3. Robotlegs2 学习笔记 -- SwiftSuspenders 2&period;x (1)

    Swiftsuspenders2 是一个基于元数据(metadata)的IOC(控制反转,inversion of control)的AS3的解决方案.反转控制又被称依赖注射(Dependency I ...

  4. 基于MapReduce的SimRank&plus;&plus;算法研究与实现

    一.算法应用背景 计算广告学(Computational Advertising)是一门广告营销科学,以追求广告投放的收益最大化为目标,重点解决用户与广告匹配的相关性和广告的竞价模型问题,涉及到自然语 ...

  5. 奇怪的haproxy 跳转

    <pre name="code" class="html">奇怪的Haproxy 跳转: acl admin_req path_beg -i /ad ...

  6. iOS多用连接、反向协议、安全

    资源 WWDC-2013-Session-708 BlackHat-US-2014-"It Just (Net)works" Understanding Multipeer Con ...

  7. What is WCF

    几个博客前,都是关于WCF零散的知识.要了解下下面的宏,什么是WCF? WCF:Windows Communication Foundation(WCF)框架. 1.WCF体系框架 2.框架分析 2. ...

  8. perl的INC设置

    perl中的INC变量中包含了所有的perl module的查找路径. 可以使用perl -V 来查看INC的值. 1)默认地INC如下: @INC:    C:/Perl/site/lib    C ...

  9. C语言 Struct 结构体在 Java 中的体现

    大一整个学期完成了 C 语言的学习,大二就进入了Java 的学习. 和C语言一样,我们都会尝试写一个小小的学生管理系统什么的,学习过 C 语言同学知道,在管理系统中 Struct 结构体是个很好用的东 ...

  10. 开发框架模块视频系列(2)-Winform分页控件介绍

    在软件开发过程中,为了节省开发时间,提高开发效率,统一用户处理界面,尽可能使用成熟.功能强大的分页控件,这款Winform环境下的分页控件,集成了数据分页.内容提示.数据打印.数据导出.表头中文转义等 ...