Bootstrap
发布时间:2022-04-18 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JS组件Bootstrap Table表格行拖拽效果实现代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
944_0@
@H_
944_0@项目涉及到订单模块,那天突然接到
一个需求,说是两种不同状态的订单之间要实现插单的
效果,
页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格
增加一行。除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态。可能描述会让大家模拟两可,反正已经实现了,先来看看
效果图吧。
@H_
944_0@
1、先看看拖动之前的效果
@H_
944_0@
2、这是拖动左边表格行数据的效果
@H_
944_0@
3、拖动一行完成之后表格数据的效果
@H_
944_0@
4、第二次、第三次拖动完成后效果
@H_
944_0@
5、右边表格上面撤销操作点击效果
@H_
944_0@
6、多次点击撤销,表格回到初始状态
@H_
944_0@
接到需求的第一感觉是应该上Bootstrap table api里面找一下,毕竟开源的力量是强大的,或许
有相关的示例呢。经过一番查找,很可惜,Bootstrap Table没有这种两张表格之
间的操作。想想其实也可以理解,Bootstrap Table是针对某个动态表格数据绑定的,它的侧重点是表格
内部的功能,比如表格内部行的拖拽排序(Reorder Rows)有很好的
解决方案,对于像博主这样的特殊需求,似乎也应该自己去实现。
1、需求分析
既然决定自己去写,开始分析需求,似乎这个操作里面比较困难的是拖拽
效果,说到拖拽
效果,原来使用JsPlumb的时候那使用太多了,于是就想到了我们神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的
问题解决了,那么还有
一个难点,就是撤销操作怎么办?我们知道Ctrl+z的意思是还原,什么叫还原?就是返回到上一步的操作,那么前提是要能够保存上一步的状态,说到保存某一步的状态,博主就知道怎么
做了,需要
一个全局变量Json,里面要有三个键值对,分别是当前步骤的索引、左边表格的数据、右边表格的数据。似乎也不太难嘛,就此着手,开干。
2.1 cshtml页面代码
@ViewBag.title
@Style
s.Render("~/Content/css")
@Style
s.Render("~/Content/table-css")
@Script
s.Render("~/bundles/jquery")
@Script
s.Render("~/bundles/knockout")
@Script
s.Render("~/bundles/bootstrap")
@Script
s.Render("~/bundles/bootstrap-table")
@RenderSection("Scripts",
fals
E)
@RenderBody()
@H_
944_0@@
{
ViewBag.
title = "订单插单";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@H_
944_0@@Script
s.Render("~/bundles/Order/InsertOrder")
@Style
s.Render("~/bundles/Order/css")
@Script
s.Render("~/Content/bootstrap/datepicker/js")
@Style
s.Render("~/Content/bootstrap/datepicker/css")
@H_
944_0@<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.js">
@H_
944_0@<div class="panel-body" style="padding-bottom:0px;">
@H_
944_0@<div class="panel panel-default" style="margin-bottom:0px;">
<div class="panel-
heading">
查询条件
大佬总结
以上是大佬教程为你收集整理的JS组件Bootstrap Table表格行拖拽效果实现代码全部内容,希望文章能够帮你解决JS组件Bootstrap Table表格行拖拽效果实现代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。