bootstrapTable treegrid 点击行展开

目录

1、点击行展开

2、表格内容过多，截断后加省略号，鼠标略过显示全部

---

1、点击行展开

bootstrapTable:

var toggle = {};
$("#table").bootstrapTable("destroy");
$("#table").bootstrapTable({
    detailView: true,
    icons:{
        detailOpen:"glyphicon glyphicon-chevron-up",
        detailClose:"glyphicon glyphicon-chevron-down"
    },
    toolbar:"#toolbar",
    
    onClickRow: function(row,$element){
        //获取每页显示的数量
        $("#table").bootstrapTable("getOptions").pageSize;
        //当前第几页
        $("#table").bootstrapTable("getOptions").pageNumber;
        //所点击行的index
        var indexInPage= $element.data("index");
        //序号
        var index = pageSize * (pageNumber - 1) + indexInPage + 1;
        //点击行展开/收起detailView
        if("expanded" !== toggle[index]){
            var isExpanded = $("#table").bootstrapTable("expandRow",indexInPage);
            toggle[index] = "expanded";
        }else{
            var isExpanded = $("#table").bootstrapTable("collapseRow",indexInPage);
            toggle[index] = "collapsed";
        }
    },
    onPageChange: function(number,size){
        toggle = {};//清空
    }
})

jQuery-treegrid:

$("#table").bootstrapTable("destroy");
$("#table").bootstrapTable({
    ...
    columns: [
        ...
    ],
    idField: "child_id",
    treeShowField: "title",
    parentIdField: "parent_id",
    onResetView: function(data){
        $("#table").treegrid({
            initialState: 'collapsed',
            treeColumn: 0,
            saveState: true,
        })
    },
    onClickRow: function(row,$element){
        //jq-treegrid默认点击小箭头是span,加入行点击后，span会响应一次，行也会响应一次
        //结果就是点击箭头span没有响应
        //所以这里将点击箭头span排除，点击箭头时只响应行点击
        if(!$(event.target).is($("span"))){
            $element.treegrid('toggle');
        }
    },
})

2、表格内容过多，截断后加省略号，鼠标略过显示全部

公用函数可写在公用js文件中调用：

function InfoCanBeVeryLong(value,minLength= 10){
    if(null === value){
        return "";
    }
    if(value.length > minLength){
        return "<a title='" + value + "' style='text-decoration:none'><span style'color:#333;'>" + value.slice(0,minLength-2) + "...</span></a>";
    }else{
        return value;
    }
}

调用——在bootstrapTable columns formatter中调用：

$("#table").bootstrapTable({
    ...
    columns: [
    {
        field: "description",
        title: "描述信息",
        formatter: function(value,row,index){
            return InfoCanBeVeryLong(value);
        }
    }
    ]
})