bootstrap table 数据表格行内修改的实现代码

js中设置列的属性 editable :

{
type : 'text',//数据显示在文本框内
emptytext : "--",//数据为空时显示
validate : function(value) {
if ($.trim(value) == '') {
return '不能为空';//修改是数据为空 显示
}
}
}

js中设置bootstrop-table加载数据时属性

onEditableSave : function(field, row, oldValue, $el) {
$('#id').bootstrapTable('resetView');
row = dataWarp(row, field);// 编辑时重新包装数据 可写可不写
$.ajax({
type : "post",
url : 路径,
data : row,//行内修改后的数据
dataType : 'JSON',
success : function(data, status) {
if (status == "success") {
Modal.alert({
msg : "编辑成功！"
});
}
},
error : function() {
Modal.alert({
msg : "编辑失败！"
});
$('#id').bootstrapTable('refresh');// 数据加载成功后刷新
},
complete : function() {
}
});
}

以上所述是小编给大家介绍的bootstrap table 数据表格行内修改的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

  • Angualrjs和bootstrap相结合实现数据表格table

    Angualrjs和bootstrap相结合实现数据表格table

    AngularJS的数据表格 需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te

  • BootStrap数据表格实例代码

    首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:

  • Bootstrap Table表格一直加载(load)不了数据的快速解决方法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

  • el表达式 写入bootstrap表格数据页面的实例代码

    el表达式 写入bootstrap表格数据页面的实例代码

    el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

  • bootstrap table 数据表格行内修改的实现代码

    js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空 显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)

  • BootStrap table实现表格行拖拽效果

    本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下 不上图了 首先还是得添加三个文件,自己上网搜搜就行 <script src="~/Content/bootstrap-table/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js">

  • Layui表格行内动态编辑数据

    Layui表格行内动态编辑数据

    目录 前言 样式功能说明 初始化代码 添加监听事件 监听头工具栏 监听表格行工具栏 监听单元格 结尾 前言 今天向大家分享一些关于经典前端框架 layui 中的动态表格数据操作,结合 JQuery 动态编辑单元格中的数据,希望能帮助到有需要的人,加油,共勉! 样式功能说明 初始化代码 根据 Layui 开发文档,我们能很容易写出如下代码,加载内置组件,动态表格数据填充: layui.use(function () { let layer = layui.layer, element = layu

  • BootStrap table删除指定行的注意事项(笔记整理)

    BootStrap table删除指定行的注意事项(笔记整理)

    这里一定要做一个笔记,这个问题花了好几个小时,问题虽小,但是从中获得一定经验. 问题:对于table指定行的数据进行删除,仅仅是前端实现! 方法有两种: 1.使用官方文档的数据(反正我试了2个小时都不行,如有大神请指导下):使用events和operate相结合的方式 2.不使用events,在formatter里面定义事件的实现. 上面的例子只是一个细节点,bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现从数据库中提取数据到前端进行相应操作的功能,很好用!

  • ant design中实现table的表格行的拖拽

    ant design中实现table的表格行的拖拽

    前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路,   然后就打开官网的文档进行观看.一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码 代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr

  • 使用layui 渲染table数据表格的实例代码

    先上最终效果图: 1,引入layui的css和js文件 <link rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" > <script src="lib/layui/layui.js"></script> 2,在页面放置一个table元素 <table class="layui-h

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • JS组件Bootstrap Table表格行拖拽效果实现代码

    JS组件Bootstrap Table表格行拖拽效果实现代码

    一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

  • bootstrap table实现iview固定列的效果实例代码详解

    因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr

  • Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na

随机推荐