尊龙集团官方手机版网站
  咨询电话:15509090502

尊龙线上

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

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

最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式。奈何各种问题不断,使用 jquery-ui中的 draggable各种坑不断,哎,一言难尽,最怕这种不是自己写的,只能不断踩坑,踩着踩着就好了

最终目的效果图

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

思路

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

难点

如何找到指定的元素,每次拖拽添加都会克隆元素,若是通过元素查找便会是一个数组,很多个,这个完全不现实,因而考虑给每一个添加指定的标识。若是考虑找到被克隆对象,目前我尝试多种方式,直接是找不到,一脸懵逼我,我也很无奈,直接两者间没有联系,尝试过event来找,依旧没有任何效果

代码看问题

html

<div >表格</div> <div > <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 > <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> <tr > <td>2</td> <td>TB - Monthly</td> <td>02/04/2012</td> <td>Declined</td> </tr> <tr > <td>3</td> <td>TB - Monthly</td> <td>03/04/2012</td> <td>Pending</td> </tr> <tr > <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; }});

效果图

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

使用 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层

重新定义一个函数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, 1, 0, 9);