若依前端问题记录

序言

  记录使用不分离版前端使用的问题点及措施。

1、bootstrap-table子父表默认展开

有兴趣了解bootstrap-table的朋友可参考博客Bootstrap-table 使用总结

bootstrap-table父子表（展开详情也类似）例图：

昨天打算将详情列表默认展开，但是查看了很多博客和官网，都没发现设置的属性。后来看到一篇博客有了启发Bootstrap table 父子表默认展开，博客给出的解决办法有些瑕疵，自己修改了一下：

$(function () {
        var options = {
            url: prefix + "/list",
            modalName: "***",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            detailView: true,
            onExpandRow : function(index, row, $detail) {
				// 加载子表
                initChildTable(index, row, $detail);
            },
            onLoadSuccess: function (data) {
				// 展开子表
                expand();
            },
			// 设置行样式
			rowStyle: function (row, index) {
                var style = {};
                style={css:{'color':'#ed5565'}};
                return style;
            },
            columns: [{
                checkbox: true,
                visible: false
            },
			{
				field: 'name',
				title: '名称',
				align: 'center'
			}]
        };
        $.table.init(options);
    });
    initChildTable = function(index, row, $detail) {
        var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
        $(childTable).bootstrapTable({
            url: prefix + "/list",
            method: 'post',
            sidePagination: "server",
            contentType: "application/x-www-form-urlencoded",
            queryParams : {
                name: row.name
            },
            columns: [
				{
                    field: 'name',
                    title: '名称',
                    align: 'center'
                }]
        });
    };

使用onLoadSuccess在表格加载完成后渲染，完成展开子表。但是有个bug，就是页面放大或者缩小之后onLoadSuccess就失效了，子表会合上（这应该是我哪里使用不对）。

2、bootstrap-table动态合并单元格

参考博客：bootstrap-table 动态合并行和列方法
Bootstrap-table实现动态合并相同行(表格同名合并)
这两个博客就写的很好了，不多赘述。

3、bootstrap-fileinput文件使用自己资源服务器的地址问题

在若依里，文件上传默认使用自己的电脑作为上传服务器，但是我们通常会使用资源服务器来使用存储资源（比如我们使用的fastDFS），数据库存储地址：pic/p/12/01/wKgB61-7dQmASHmcABaloVhBbsw4083158，原本我使用的方式是后台查询了图片地址再拼上服务器地址发到页面，但是在修改的页面里，图片地址会把服务器地址一起带过来，难道还有再去截取地址，好像很烦，出去拼地址，回来还有截取，不舒服。
后来查了不少博客，没看出所以然，无意间发现一个方式：

$(".file-upload").each(function (i) {
            // var val = $("input[name='" + this.id + "']").val() 默认的
            var val_s = $("input[name='" + this.id + "']").val()
            var val = url + val_simple;
            $(this).fileinput({
                uploadUrl: ctx + 'pic/upload',
                initialPreviewAsData: true,
                initialPreview: [val],
                maxFileCount: 1,
                minFileSize: 1,
                maxFileSize: 1024 * 9,
                autoReplace: true,
                allowedFileExtensions: ['jpg','png','gif','jpeg'],
                allowedFileTypes: ['image']
            }).on('fileuploaded', function (event, data, previewId, index) {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
            $(this).fileinput('_initFileActions');
        });

initialPreview字段，将图片服务器的地址拼进去，这样提交的时候就不会把地址带过来。但是服务器地址最好要存储在一个公告js里面，便于统一修改。

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： tenyears
• 本文链接： https://tenyears94.gitee.io/2020/12/01/若依前端问题记录/
• 版权声明： 本博客所有文章转载请注明出处！