平台表格自动换行使用技巧

       最近客户跟我抱怨我们的系统不好用，表格里面的字都看不完，点有点不开，完全没法使用的样，woo听了之后感觉很尴尬，研究了一发公司平台表格的配置项，发现好像没有可以做表格全显示配置的（这里得吐槽一下，都21世纪了，灵活一点嘛），所以没办法，只能手动来写JS，CSS了。我们这种垃圾后端人员哪里懂CSS啊，研究个P，还是发公司群问比较直接一点，群果然有大神。下面是陈然师姐教我的一种方法
平常我们的表格是这样子的

图片：1.png

不得不又吐槽一发，系统原始皮肤真难看，公司求求你了快开发出来一套好看一点的皮肤吧，我这还是换了白色皮肤才好看一点，原来那个蓝色简直。。。不想说了
下面是我做的自动换行实现效果

图片：2.png

第一步：写一个CSS

.x-grid3-cell-inner {
padding: 0!important;
white-space: normal;
word-wrap: break-word;
text-align:center;
}
一定要用css文件的形式，还有.x-grid3-cell-inner也不能变，这个是表格的class
第二步：把CSS文件绑定到页面上，就是托到页面上
第三步：实现CSS与行绑定，这里要简单的写一个逻辑流，逻辑流里面就一个自定义构件，直接return ，必须简单粗暴

图片：3.png

最后把这个逻辑流弄为表格的行加载事件就好了


简单的总结：做这么多的目的就是为了把white-space: normal;word-wrap: break-word;这两个CSS属性加到表格的class里面，这两个是CSS里面做强制文字换行的，浏览器的兼容性不知道怎么样，反正谷歌没问题。



题外话：公司平台现在需要跟进时代的脚步啊，平台的开发功能是很强大了，但是在人性化的方面还需要很大的改进，比如上面提到的这个问题，还有数据验证的问题，应该是用户填的时候如果错了就马上做提示，很明确的提示，简单的标红没用的，那些个用户就是傻子，哪知道标红是什么意思啊，不能等到用户点保存的时候或者是做了什么操作的时候才触发数据验证，这样用户很烦的，老子填了这么多你现在才告诉我说我填错了。问题还很多，和公司一同改进，一同进步吧。望公司越做越强，只要坚持三个原则：用户是傻子，用户很懒不会愿意多动一下鼠标，用户不愿意思考。