您的位置：首页 > 产品设计 > UI/UE

esayui datagrid 列内容超长自动换行

2015-11-12 17:30 393 查看

列自动换行 其实很简单 首先 datagrid 增加 nowrap: false 属性，

然后重写     datagrid-cell
<style type="text/css">
      .datagrid-cell
      {
          word-break:break-all
      }
</style> 成功！<!DOCTYPE HTML>
<html>
<head>
<title>列换行</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="she,sypro,sshe,springmvc,hibernate">

<script type="text/javascript" src="js/easyui/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js" charset="UTF-8"></script>
<link rel="stylesheet" href="js/easyui/themes/icon.css" type="text/css"></link>

<link id="easyuiTheme" rel="stylesheet" href="js/easyui/themes/default/easyui.css" type="text/css"></link>
<script type="text/javascript">

$(function () {
var data="[{'ID':1070000004,'NAME':'门禁卡1','TOTALCOST':'500','COSTDATE':'2015-07-23','CZY':'陈硕','REMARK':'asdasdasdasdasdasdasdasdasdasdsadasdasdasdasdasdasdasdacxzczxczxczxczxczxczxcxxxxxxxxxxxxxxxxxxxxxx'},{'ID':1070000003,'NAME':'水卡','TOTALCOST':'2500','COSTDATE':'2015-07-23','CZY':'陈硕','REMARK':null},{'ID':1070000021,'NAME':'水卡22补货','TOTALCOST':'200','COSTDATE':'2015-08-04','CZY':'陈硕','REMARK':null}]";
$('#payList').datagrid({
title: '',
loadMsg: "数据加载中，请稍后……",
nowrap: false,
//url: '${pageContext.request.contextPath}/payController/list.action',
singleSelect:true,
fit:true,
fitColumns:true,
columns: [[
{ field: 'NAME', title: '名称', width: 120, align: 'center' },
{ field: 'TOTALCOST', title: '费用', width: 100, align: 'center'},
{ field: 'COSTDATE', title: '日期', width: 100, align: 'center'},
{ field: 'CZY', title: '操作员', width: 100, align: 'center'},
{ field: 'REMARK', title: '备注', width: 100, align: 'center' }
]]
});
$("#payList").datagrid('loadData', eval('(' + data + ')'));
});

</script>
</head>
<style type="text/css">
.datagrid-cell
{
word-break:break-all
}
</style>

<body>
<table id="payList" style="width:400px;height:250px" >
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： esayui datagrid 单元格自动换行表格自动换行

相关文章推荐

新的分享

章节导航