jQuery MiniUI

标题: 【datagrid颜色问题】 [打印本页]
作者: wendys1127    时间: 2015-11-10 16:42:17     标题: 【datagrid颜色问题】

是这样
------------------------------------------
datagrid读取Excel文件后，在点击保存的时候，数据验证，
验证这里我是不通过的数据行，通过addRowCls添加红色背景样式。

问题在于：
我现在是有1000多条数据导入，然后数据验证拦截 318条未通过，然后颜色变红，然后我在浏览datagrid上下查看时，
点击，所有红色都不见了？？是不是数据量过大，导致渲染没了吗？？就是我拖动滚动条时，颜色没了
作者: dforce    时间: 2015-11-10 16:51:05

请提供重现页面
作者: wendys1127    时间: 2015-11-10 17:26:17

dforce 发表于 2015-11-10 16:51
请提供重现页面

-----临时弄得一个demo
-------------------------------------------------
CSS:
.color{
background-color:#f3b198;
}


--Html
<div id="datagrid">
  <div property=columns>
     <div field="user" header="姓名"></div>
     <div field="age" header="年龄"></div>
  </div>
</div>


-------------------------
脚本部分
<script>
mini.parse();
var grid=mini.get("datagrid");

function ChangeColor(){
for(var int i=0,i<1200;i++){
  grid.addRow({
    user:'姓名'+i,
    age:'20'
});
}
}

var data=grid.getData();
for(var i=0;i<data.length;i++){
   grid.addRowCls(data,"color");
}

</script>

以上示例
作者: dforce    时间: 2015-11-10 17:45:36

wendys1127 发表于 2015-11-10 17:26
-----临时弄得一个demo
-------------------------------------------------
CSS:

你这样的操作效率很差
数据量大需要虚拟滚动，虚拟滚动渲染样式不能通过addRowCls来实现
建议用drawcell来处理
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <title></title>
  5.         <script src="../../scripts/boot.js" type="text/javascript"></script>
  6.         <style>
  7.                 .color
  8.                 {
  9.                         background-color: #f3b198;
  10.                 }
  11.         </style>
  12. </head>
  13. <body>

  15.         <div id="datagrid" style="width: 500px; height: 300px" class="mini-datagrid"
  16.                  virtualScroll="true"
  17.         >
  18.                 <div property="columns">
  19.                         <div field="user" header="姓名">
  20.                         </div>
  21.                         <div field="age" header="年龄">
  22.                         </div>
  23.                 </div>
  24.         </div>
  25.         <script type="text/javascript">

  27.                 mini.parse();
  28.                 var grid = mini.get("datagrid");

  30.                 function ChangeColor() {
  31.                         var rows = [];
  32.                         for (var i = 0; i < 1000; i++) {

  34.                                 var row={
  35.                                         user: '姓名' + i,
  36.                                         age: '20'
  37.                                 };
  38.                                 rows.push(row);
  39.                         }
  40.                         grid.setData(rows);
  41.                 }
  42.                 ChangeColor();

  44.                 grid.on("drawcell", function (e) {
  45.                         e.rowCls = "color";
  46.                 })
  47.        
  48.    
  49.         </script>
  50. </body>
  51. </html>
复制代码
作者: wendys1127    时间: 2015-11-11 09:26:38

本帖最后由 wendys1127 于 2015-11-11 09:30 编辑
dforce 发表于 2015-11-10 17:45
你这样的操作效率很差
数据量大需要虚拟滚动，虚拟滚动渲染样式不能通过addRowCls来实现
建议用drawcell ...

实际开发中，是加载Excel读取后放到datagrid，然后点击 保存 进行验证，不通过变色处理，，，还涉及行之间某些数据组合验证，，，ondrawcell好像仅仅在加载后重绘，以及行行直接的验证在重绘可以做到吗。。。，可以反复重绘吗？
作者: felt    时间: 2015-11-11 09:43:26

wendys1127 发表于 2015-11-11 09:26
实际开发中，是加载Excel读取后放到datagrid，然后点击 保存 进行验证，不通过变色处理，，，还涉及行之间 ...

drawcell数据改变都会触发
作者: wendys1127    时间: 2015-11-11 10:28:55

本帖最后由 wendys1127 于 2015-11-11 10:30 编辑
felt 发表于 2015-11-11 09:43
drawcell数据改变都会触发

那行与行之间还是得遍历，然后想上面贴的示例一样改变颜色，，，然后即使是虚拟滚动，当你拖动快的时候明显 datagrid显示跟不上速度，直接空白.......然后背景颜色还是清了成默认了
作者: wendys1127    时间: 2015-11-11 11:14:13

felt 发表于 2015-11-11 09:43
drawcell数据改变都会触发

在前端查看，动态生成的tr上有验证类，说明有颜色变化，当我拖动虚拟滚动条时，很明显，背景色的样式类消失了，也难怪没颜色了
作者: wendys1127    时间: 2015-11-11 11:45:00

felt 发表于 2015-11-11 09:43
drawcell数据改变都会触发

要不然，怎么实现再加上复选框，这样即使颜色没了，还勾上，
-----------------------
现在是 grid.deselectAll(true)  取消所有勾选。
然后验证的时候 ，假如 行验证不通过就 grid.addrowCls(row,"color") grid.setSelected(row)

好像还有点问题
作者: felt    时间: 2015-11-11 12:23:03

wendys1127 发表于 2015-11-11 11:45
要不然，怎么实现再加上复选框，这样即使颜色没了，还勾上，
-----------------------
现在是 grid.desel ...

那么多行，请不要使用addRowCls
作者: wendys1127    时间: 2015-11-11 13:36:27

felt 发表于 2015-11-11 12:23
那么多行，请不要使用addRowCls

不用的话没法行行验证啊
作者: wendys1127    时间: 2015-11-11 14:24:25

felt 发表于 2015-11-11 12:23
那么多行，请不要使用addRowCls

解决方案，虚拟滚动去掉，功能正常！！！虚拟滚动去掉，功能正常！！！虚拟滚动去掉，功能正常！！！

优化的花先看一段使用时间影响情况再说
作者: felt    时间: 2015-11-11 15:47:37

wendys1127 发表于 2015-11-11 14:24
解决方案，虚拟滚动去掉，功能正常！！！虚拟滚动去掉，功能正常！！！虚拟滚动去掉，功能正常！！！

优 ...

[attach]6790[/attach]
应该用这样的方式处理
另外我们内部处理了性能优化，下周会更新





欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2