引入 tablednd

jquery.tablednd.1.0.5.min.js
<script th:src="@{/statics/ajax/libs/tablednd/jquery.tablednd.1.0.5.min.js}"></script>

bootstrapTreeTable 添加渲染回调

在renderTable 函数末尾增加如下内容

            if(options.onTreeTableRendered && (typeof options.onTreeTableRendered =="function")){
                options.onTreeTableRendered.apply();
            }

注册渲染回调

function onTreeTableRendered(){
            $.modal.closeLoading();
            $('#bootstrap-tree-table').tableDnD({
                onDragStyle: null,
                onDropStyle: null,
                onDragClass: 'reorder_rows_onDragClass',
                onDrop: onDrop,
                onAllowDrop: onAllowDrop,
                onDragStart: onDragStart,
                dragHandle: null
            });
        }

        var options = {
            code: "id",
            parentCode: "parent",
            expandColumn: "1",
            uniqueId: "id",
            url: prefix + "/list?ruleId="+ruleId,
            createUrl: prefix + "/add/{id}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove/{id}",
            exportUrl: prefix + "/export",
            modalName: "消息解析规则项",
            clickToSelect: false,
            onTreeTableRendered:onTreeTableRendered,
            columns: [{
                field: 'selectItem',
                radio: true
            },
                {
                    field: 'name',
                    title: '数据项名称',
                    width:'300px',
                    align: 'left'
                },
/*                {
                    field: 'id',
                    title: '规则表主键',
                    align: 'left'
                },*/
                {
                    field: 'parent',
                    title: '父级规则项',
                    align: 'left',
                    visible:false
                },
                {
                    field: 'seq',
                    title: '规则排序',
                    align: 'left'
                },
                {
                    field: 'format',
                    title: '解析表达式',
                    align: 'left',
                    formatter: function(value, row, index) {
                        return '<div class="basic-r" style=\'width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;\' title="'+value+'">'+value+'</div>';
                    }
                },
                {
                    field: 'status',
                    title: '是否可选',
                    align: 'left',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(statusDatas, value);
                    }
                },
                {
                    field: 'value',
                    title: '常量',
                    align: 'left',
                    formatter: function(value, row, index) {
                        return '<div class="basic-r" style=\'width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;\' title="'+value+'">'+value+'</div>';
                    }
                },
                {
                    field: 'field',
                    title: '输出到根节点',
                    align: 'left'
                },
                {
                    field: 'isout',
                    title: '输出',
                    align: 'left',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(isoutDatas, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    align: 'left',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-info  btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.id + '\')"><i class="fa fa-plus"></i>新增</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.treeTable.init(options);

    });

行拖拽功能实现函数

function onDrop(table, droppedRow){
        $.modal.loading("正在保存数据，请稍后...");
        var dragRow = getRowData(droppedRow);
        var toRow = getRowData(dragToRow);
        let droppedRowTop =    $(droppedRow).offset();
        let dragToRowRowTop =    $(dragToRow).offset();
        // dir = true 向下  false 向上
        let dir = droppedRowTop.top>dragToRowRowTop.top?true:false;

        // toRow 的所有平级要重新排序，拖拽的行的parent的code要改变
        dragRow.parent = toRow.parent;
        var bros = getBro(toRow.parent);

        // 删除已有的
        for (var i = 0; i < bros.length; i++) {
            if (bros[i].id == dragRow.id) {
                bros.splice(i,1);
                break;
            }
        }

        // 插入
        for (var i = 0; i < bros.length; i++) {
            if (bros[i].id == toRow.id) {
                let index=i;
                if (dir) {
                    index=i+1;
                }
                bros.splice(index,0,{
                    id:dragRow.id,
                    seq:dragRow.seq,
                    parent:dragRow.parent
                });
                break;
            }
        }

        // 排序
        for (var i = 0; i <bros.length; i++) {
            bros[i].seq=i+1;
        }

        // 更新后台，重新加载treetable
        $.ajax({
            method:'post',
            url:prefix+'/editBatch',
            data: JSON.stringify(bros),
            success:function (res){
                $.treeTable.refresh();
            },
            dataType:'json',
            contentType:'application/json'
        })

    }

    function onDragStart(table, row){

    }

    function dragHandle(){

    }

    function onAllowDrop(draged,bottom){
        dragToRow = bottom;
        var dragRow = getRowData(draged);
        var toRow = getRowData(dragToRow);
        if (toRow.parent == dragRow.id) {
            return false;
        }
        return true;
    }

    function getRowData(row) {
        var target = $('#bootstrap-tree-table').data('bootstrap.tree.table');
        var dataList = target.data_obj;
        var id = $(row).find('input[name=select_item]').val();
        return dataList['id_'+id];
    }

    function setNewPid(rowid,newpid){
        var target = $('#bootstrap-tree-table').data('bootstrap.tree.table');
        var dataList = target.data_obj;
        var row = dataList['id_'+rowid];
        row.parent = newpid;
    }

    function getBro(pid){
        var target = $('#bootstrap-tree-table').data('bootstrap.tree.table');
        var dataList = target.data_obj;
        var bros =[];
        for (var i in dataList) {
            if(pid== dataList[i].parent){
                bros.push({
                    id:dataList[i].id,
                    seq:dataList[i].seq,
                    parent:dataList[i].parent
                });
            }
        }

        return bros;

    }

效果

---