Bootstrap 可视化布局--拖拽后弹窗进行编辑

时间:2023-03-10 04:52:54
Bootstrap 可视化布局--拖拽后弹窗进行编辑

Bootstrap 可视化布局--拖拽后弹窗进行编辑

最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式。

奈何各种问题不断,使用 jquery-ui中的 draggable各种坑不断,哎,一言难尽,最怕这种不是自己写的,只能不断踩坑,踩着踩着就好了

最终目的效果图

Bootstrap 可视化布局--拖拽后弹窗进行编辑

原始效果是没有之后的弹窗,需要点击才会有

思路

  • 思路1: 将点击的代码直接放到 拖拽结束时使用即可
  • 思路2: 找到被拖拽的对象,对其进行修改即可
  • 思路3: 找到点击弹窗的按钮(需要对应到指定的对象)

难点

如何找到指定的元素,每次拖拽添加都会克隆元素,若是通过元素查找便会是一个数组,很多个,这个完全不现实,因而考虑给每一个添加指定的标识。

若是考虑找到被克隆对象,目前我尝试多种方式,直接是找不到,一脸懵逼我,我也很无奈,直接两者间没有联系,尝试过event来找,依旧没有任何效果

代码看问题

html

<div class="preview">表格</div>
<div class="view">
<table class="table" contenteditable="true">
<thead>
<tr>
<th>编号</th>
<th>产品</th>
<th>交付时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Default</td>
</tr>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
</div>

js

// 拖拽的代码
$(".sidebar-nav .box").draggable({
connectToSortable: ".column",
helper: "clone",
handle: ".drag",
start: function(e,t) {
if (!startdrag) stopsave++;
startdrag = 1;
},
drag: function(e, t) {
t.helper.width(400)
},
stop: function(e) {
handleJsIds(e);
if(stopsave>0) stopsave--;
startdrag = 0;
}
});

效果图

Bootstrap 可视化布局--拖拽后弹窗进行编辑

各种思路尝试的结果,就不一一列举了,都是泪

  • 使用 jquery-uidraggable的各类属性,始终无效果,modal:ture无法弹窗,结合dialog却无法找到指定被修改对象
  • 最终症结所在,便是如何找到你刚拖拽的对象身上,这样一切都好解决

开启找到指定拖拽的对象之旅

思路是有,一直不知道如何有效实现,当看到此处代码时,一切就豁然开朗

// 此处是在拖拽 stop时被调用的
function handleJsIds(e) {
handleModalIds();
handleAccordionIds();
handleCarouselIds();
handleTabsIds();
handleDialog()
}
// 这里看到给每个添加属性,就知道还是要走这条路了
function handleCarouselIds() {
var e = $(".demo #myCarousel");
var t = randomNumber();
var n = "carousel-" + t;
e.attr("id", n);
e.find(".carousel-indicators li").each(function(e, t) {
$(t).attr("data-target", "#" + n)
});
e.find(".left").attr("href", "#" + n);
e.find(".right").attr("href", "#" + n)
}

开始时,一直都在找弹出按钮,因为点击,会出现修改的modal层

Bootstrap 可视化布局--拖拽后弹窗进行编辑

重新定义一个函数hangleDialog

// 用来触发弹窗
function handleDialog(params) {
// 找到所有的按钮
var e = $('body.edit .demo [data-target=#editorModal]')
const n = randomNumber()
e.each(function(i, t) {
// 判断是否添加了flag属性
if (!$(t).attr('flag')) {
$(t).attr('flag', n)
// 触发按钮弹窗
$(t).trigger('click')
}
})
}

总结

目前而言,这个是改动最小的,基本没有对源代码进行修改,只是单纯添加一段而已,个人十分喜欢,其他方式改动幅度过大,效果既没出来,还不敢保证是否会影响其他效果

补充

  • 源代码 ,虽说原作者不允许公开,但还是让我找到了,仅供技术探讨吧layoutit
  • 一个插件 通过html可以找到对应绑定的事件 visual event