esayui datagrid 列内容超长自动换行

最新推荐文章于 2024-01-30 18:34:30 发布

小硕同学

最新推荐文章于 2024-01-30 18:34:30 发布

阅读量1k

点赞数

分类专栏： esayui 文章标签： esayui datagrid 单元格自动换行表格自动换行

本文链接：https://blog.csdn.net/csvszhy/article/details/49802253

版权

esayui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

列自动换行 其实很简单 首先 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>

小硕同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
esayui datagrid 列内容超长自动换行

列自动换行其实很简单首先 datagrid 增加 nowrap: false 属性，然后重写 datagrid-cell &lt;style type="text/css"&gt; .datagrid-cell { word-break:break-all }&lt;/style&gt; 成功！&lt;!DOCTYPE HTML&gt;...
复制链接

扫一扫