BootStrap table实现表格行拖拽效果

2024-11-26 16:13:20

本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码，供大家参考，具体内容如下

不上图了

首先还是得添加三个文件，自己上网搜搜就行

<script src="~/Content/bootstrap-table/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table-reorder-rows.css" rel="stylesheet"/>

前台，加在Bootstrap Table 属性里面

//当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据
   onReorderRowsDrag: function(table, row) {
    //取索引号
    dragbeforeidx = $(row).attr("data-index");
   },
   //拖拽完成后的这条数据，并且可以获取这行数据的上一行数据和下一行数据
   onReorderRowsDrop: function (table, row) {
    //取索引号
    draglateridx = $(row).attr("data-index");
   },
   //当拖拽结束后，整个表格的数据
   onReorderRow: function (newData) {
    //这里的newData是整个表格数据，数组形式
    if (dragbeforeidx != draglateridx) {//这是我其他地方需要的，你们可不必要这个
     //console.log(newData); 调试用代码
     $.post("Sort",
      { jsondata: JSON.stringify(newData) },//将整张表数据Post，当然，先序列化成Json
      function(data) {
       if (data == "success") {
        $table.bootstrapTable('refresh');
       }
      });
    }
   }

后台代码Controller

public string Sort(string jsondata)
  {
   //将json序列化为List<T>
   JavaScriptSerializer serializer = new JavaScriptSerializer();
   List<WorkFlow> list = serializer.Deserialize<List<WorkFlow>>(jsondata);
   BLL.Base.WorkFlow bllworkflow = new BLL.Base.WorkFlow();
   var result = bllworkflow.Sort(list);
   return result;
  }

排序的思路：当前台拖动完成后，将整个表格数据传入后台，先删除之前数据库中的数据，重新保存当前数据实现排序。

缺点： 如果你有分页显示，返回的Table数据只为第一页的。第二页就会出现排序问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="
详解为Bootstrap Modal添加拖拽的方法

网上有许多给Bootstrap Modal添加拖拽实现,但是许多代码看起来都比较复杂感觉封装性可能也不太好,有的甚至使用了jquery ui的拖拽功能,这些都不是我想要的,其实我在给Bootstrap Modal添加拖拽功能的事情已经是2017年春节的时候了,弹指一挥间一年就过去了.2017年春节的时候,由于之前项目有同事使用layer来做前端,但是对于我这种略懂js前端的后端开发来说,让我引入layer和layui的一整套东西是艰难的,曾经大致的浏览过layui的一些组件,发现组件功能不是很完
.net core版文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能本篇内容主要解决.net core中文件上传的问题开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写
BootStrap modal实现拖拽功能

bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下在使用modal时首选需要引用js <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></scr
JS组件Bootstrap Table表格多行拖拽效果实现代码

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来.现在分享给大家: 原文地址:http://www.panshy.com/articles/201509/webdev-2524.html 以下为Bootstrap模态框拖拽功能的增加方法 $("#myModal&
bootstrap模态框实现拖拽效果

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
JS组件Bootstrap Table表格行拖拽效果实现代码

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

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

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

背景 1.vue项目中的表格需要实现行拖拽功能 2.表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap. 参考地址: https://github.com/So
ant design中实现table的表格行的拖拽

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

目录问题描述案例一简单拖拽代码附上案例二 el-table表格拖拽效果图代码附上问题描述 Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动端哦.本文举两个案例来学习一下. 案例一简单拖拽效果图代码附上关于理解看注释哦,运行的话复制粘贴即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
element表格行列拖拽的实现示例

element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的. 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import Sortable from 'sortablejs' 需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况. ###示例代码 <template> <div st
react 实现表格列表拖拽排序的示例

目录问题描述思路解析 1. react-sortable-hoc 2. array-move 问题描述在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

BootStrap table实现表格行拖拽效果

相关推荐

随机推荐