页面引用这4种:
<link href="${pageContext.request.contextPath}/resource/js/jquery/plugin/loading/css/loading.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/resource/js/jquery/plugin/colresizable/css/main.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/loading/CommonPerson.js"></script>
<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/colresizable/colResizable-1.6.min.js"></script>
js中添加这个方法:
//可拖拽
function toResizeTable() {
$("#normal").colResizable({disable:true});
$("#normal").colResizable({liveDrag:true,draggingClass:"dragging",resizeMode:'fit',gripInnerHtml:"<div class='grip'></div>"});
}
页面可刷新div:
<!-- 4 定义局部刷新区域的id -->
<input type="hidden" name="id_zone" value="countriesList1" loading="true" successRun="toResizeTable">
loading为加载时候的样式
successRun 可拖拽的js方法名
table中加上class样式加上text-nowrap
CSS实现内容超过长度后以省略号显示
样式:
<width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;>
说明:
white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格
overflow: hidden 隐藏超出单元格的部分
text-overflow: ellipsis 将被隐藏的那部分用省略号代替