第三方库实现通用拖拽排序

效果：

准备：

网页框控件插件

第三方库（Sortable）

拖拽页面HTML文件(含JS、CSS)

拖拽排序.zip (16.27 K)

 

具体操作:

1、将上述两个文件分别放到服务器的webroot/help/is/Sortable.min.js和webroot/help/拖拽排序.html

2、新建一个决策报表或普通报表，创建一个需要进行排序的数据集，注意:数据集第一个字段的值必须排序序号，如果没有可使用开窗函数或其他函数加一个字段，字段类型为int

3、拖入网页框并设置网页框路径为: http:/服务器IP(域名):端口/help/拖拽排序html，并添加两个参数（参数名称不能变）:

heads: 存放需要展示的页面的字段名称，用英文逗号分割，顺序与第二步创建的数据集的顺序一致

valname: 数据集名称

4.拖入一个按钮绑定数据提交事件

// 获取 <iframe> 元素，可以使用其他方法获取，普通报表与决策报表不同
var iframe = $('iframe[name="RHIFRAME0"]')[0]
// 获取 <iframe> 的 window 对象
var data = iframe.contentWindow.orderTabWrite;//获取最新的数组数据
if(data!=undefined){
data.forEach(function(o, i) {
	var id = o[0];
	FR.remoteEvaluate(`sql("post_HR","update org.dw_temp_test set orders=` + (i + 1) + ` where id='` + id + `'",1)`);
})
iframe.contentWindow.location.reload();//刷新页面
}else{
	iframe.contentWindow.location.reload();//刷新页面
}

代码中的“orderTabWrite”是拖拽排序后产生的二维数组，存放在window对象中，这个二维数组不会返回序号列，可使用数组下标代替

 

其他

可自行修改HTML文件中的CSS修改样式

HTML代码中这一段为测试数据，可以注释掉，将下方的解除注释即可使用

 

没豆子了，等我明天摇到100个豆子再看你的帖子