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);
        }
    }
    ]
})