1.使用bootstrap的popover弹窗显示详情的插件,引入bootstrap第三方CSS,js
bootstrap.min.css; jquery.js; bootstrap.js
2.在treegrid初始化时,如果单元格要展示的内容较长,选择弹窗展示:
$('#' + treeGrid)
.treegrid({
url: URL,
loadMsg: '数据加载中,请稍候...',
rownumbers: true,
pagination: false, //分页控件
pageList: [10, 20, 30, 40, 50, 100, 150, 200],
pageSize: 10,
method: 'post',
dataType: 'json',
singleSelect: true,//单选还是多选
fit:true,
fitColumn:false,
striped: true,
cascadeCheck: false,
idField: 'id',
treeField: 'type',
onLoadSuccess : function(value){
$("[data-toggle='popover']").popover(); //没有此句,则会导致弹窗失败
},
nowrap: false,// 为true则数据长度超出列宽时将会自动截取。
frozenColumns: [[
{
title: '主键',
field: 'id',
checkbox: true
}, {
title: '名称',
field: 'name',
}
columns: [[
{
title: '处理结果',
field: 'result',
width: 60,
align:'center',
formatter : function(value, row, index) {
//处理结果 1,成功;0失败;
if (value == '1') {
return '成功';
} else if (value == '0') {
return '失败';
}else {
return value;
}
}
},{
title: '处理开始时间',
field: 'beginDate',
width: 86,
sortable:true,
formatter : function(value, row, index) {
if (value != null) {
var unixTimestamp = new Date(
value);
return dateFormat(
unixTimestamp,
"yyyy-MM-dd HH:mm:ss");
}
}
}, {
title: '处理结束时间',
field: 'endDate',
width: 86,
sortable:true,
formatter : function(value, row, index) {
if (value != null) {
var unixTimestamp = new Date(
value);
return dateFormat(
unixTimestamp,
"yyyy-MM-dd HH:mm:ss");
}
}
},{
title: '根因错误原因',
field: 'rootCause',
width: 100,
formatter:function(value,row,index) {
if (value && value!='' ) {
var testHtml = ' '+'详情'+'';
return testHtml;
} else {
return '';
}
}
}]],
其中 popover语句一定要加在表格加载成功后,否则弹窗无效。
onLoadSuccess : function(value){
$("[data-toggle='popover']").popover();
},
3.自定义弹窗内容和样式
.popover{
padding:4px;
background-color:#fff;
color:#0d8ddb;
max-height: 276px;
width:auto;
}
当data-html ="true"时,可向弹出框插入 HTML,data-content="" 中对应添加html 的DOM 组件即可。