在treegrid中使用bootstrap的popover弹窗失败问题

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 组件即可。

你可能感兴趣的:(Bootstrap,JQuery,EasyUI)