bootstrapTable 行鼠標懸浮顯示內容

bootstrapTable 行鼠標懸浮顯示內容
只需在列中添加函數  cellStyle:formatTableUnit, formatter:paramsMatter 即可。
 <script th:inline="javascript">
        var prefix = ctx + "system/adminQuickFunction";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
                modalName: "後臺主頁快捷功能",
            search: false,
            showExport: false,
            showSearch: false,
                columns: [{
                  checkbox: true
              },
            {
               field : 'id', 
               title : 'id',
               align:'center',
               halign:'center',
               visible: false
            },
            {
               field : 'functionName', 
               title : '功能名稱',
               align:'center',
               halign:'center',
               cellStyle:formatTableUnit,
               formatter:paramsMatter,
//             sortable: true
            },
            {
               field : 'iconName', 
               title : '圖標名字(暫時沒用到)',
               visible: false,
//             sortable: true
            },
            {
               field : 'iconAddress', 
               title : 'icon地址',
               align:'center',
               halign:'center',
//             sortable: true,
               cellStyle:formatTableUnit,
               formatter:paramsMatter,
               visible:false
            },
            {
               field : 'orderFlag', 
               title : '排序',
               align:'center',
               halign:'center',
               sortable: true
            },
            {
               field : 'linkAddress', 
               title : '連接地址',
               cellStyle:formatTableUnit,
               formatter:paramsMatter,
               align:'center',
               halign:'center',
//             sortable: true
            },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                     var actions = [];
                     actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>編輯</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>刪除</a>');
                  return actions.join('');
                  }
              }]
            };
            $.table.init(options);
        });
      function paramsMatter(value,row,index) {
         var span=document.createElement('span');
         span.setAttribute('title',value);
         span.innerHTML = value;
         return span.outerHTML;
      }

      function formatTableUnit(value, row, index) {
         return {
            css: {
               "white-space": 'nowrap',
               "text-overflow": 'ellipsis',
               "overflow": 'hidden'
            }
         }
      }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章