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="#" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.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' } } }
bootstrapTable 行鼠标悬浮显示内容
最新推荐文章于 2023-06-14 14:07:52 发布