Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 微信号：weibw162
本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术
一、需求描述
在使用FIneReport软件开发时，有时候我们在前台看到的报表的顺序可能不是我们当时想要的，在给领导或者用户演示时希望可以实时将报表的整行数据进行上下拖拽重新排序。其实现效果大致如下：
针对以上需求，本文提出一种可行的方案，其大致步骤如下：
- 引入
JqueryUI.js的Interactions模块。 - 通过配置
sortable事件，实现前台表格的整行拖拽。
注1：不支持移动端。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。
二、具体操作
第一步
下载jquery-ui-1.9.2.custom.min.js文件，并将其存放到工程目录下，具体目录路径为：webroot/help/js
第二步
在模板中引入该js文件。具体操作为，点击左上角 模板->模板web属性->引入JavaScript->选中上一步的js文件并添加。
第三步
点击左上角 模板->模板web属性->数据分析设置->事件设置 中增加加载结束事件，并写入如下JavaScript脚本。 JavaScript 代码如下：
javascript
// 定义拾起元素后事件
var fixHelper = function (e, ui) {
ui.children().each(function () {
// 设置元素被拾起后的宽度和原宽度一致。
$(this).width($(this).width());
$(this).height($(this).height());
// 设置元素被拾起后背景色调整为淡红色
$(this).css({ "background": "rgba(255,0,0,0.2)" });
});
return ui;
};
// 定义元素被放置后事件
var stopFunc = function (e, ui) {
ui.item.children().each(function () {
// 设置元素被放置后的颜色调整为淡蓝色
$(this).css({ "background": "rgba(0,0,255,0.2)" });
});
return ui;
};
// 给表格增加排序
$("#frozen-center .x-table").sortable({
helper: fixHelper,
items: "tr",// 配置可以移动的元素，表格一般默认行tr元素
axis: "y",// 配置移动方向
stop: stopFunc
});// 定义拾起元素后事件
var fixHelper = function (e, ui) {
ui.children().each(function () {
// 设置元素被拾起后的宽度和原宽度一致。
$(this).width($(this).width());
$(this).height($(this).height());
// 设置元素被拾起后背景色调整为淡红色
$(this).css({ "background": "rgba(255,0,0,0.2)" });
});
return ui;
};
// 定义元素被放置后事件
var stopFunc = function (e, ui) {
ui.item.children().each(function () {
// 设置元素被放置后的颜色调整为淡蓝色
$(this).css({ "background": "rgba(0,0,255,0.2)" });
});
return ui;
};
// 给表格增加排序
$("#frozen-center .x-table").sortable({
helper: fixHelper,
items: "tr",// 配置可以移动的元素，表格一般默认行tr元素
axis: "y",// 配置移动方向
stop: stopFunc
});第四步
冻结标题行及最左侧的序号列。 注1：冻结可以使该行或列不参与拖拽。这里冻结标题行是防止标题行也出现拖拽，冻住序号列是为了拖拽后不用重新排序
完成以上步骤后，我们直接点击左上角的选择数据分析预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。
三、模板文件下载
链接: https://pan.baidu.com/s/14N0BloNVwyc69ngHZRmhcQ?pwd=9dbh 提取码: 9dbh 复制这段内容后打开百度网盘手机App，操作更方便哦
如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。