jQuery MiniUI

标题: 关于ondrawcell的小建议 [打印本页]

作者: liunian 时间: 2013-9-17 15:22:40 标题: 关于ondrawcell的小建议

今天偶然发现，ondrawcell所生成的数据在getSelected()取不到，不知道是属于bug还是没做这个功能，反正最后是无奈的改了sql

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>单元格自动计算 </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />

<script src="../../scripts/boot.js" type="text/javascript"></script>

</head>
<body>
<h1>单元格自动计算</h1>

<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
      idField="id" allowCellEdit="true" allowCellSelect="true"  showFooter="false"
      url="../data/grid2.txt"

      showSummaryRow="true"
>
      <div property="columns">
         <div field="price" width="120" headerAlign="center" allowSort="true">单价
            <input property="editor" class="mini-textbox" style="width:100%;" vtype="float"/>
         </div>
         <div field="quantity" width="120" headerAlign="center" allowSort="true">数量
            <input property="editor" class="mini-textbox" style="width:100%;" vtype="int"/>
         </div>
         <div field="total" width="120" headerAlign="center" allowSort="true">总计</div>
      </div>
</div>
  <input type="button">
<script type="text/javascript">
      mini.parse();

      var grid = mini.get("datagrid1");
      grid.load();

      //////////////////////////////////////////
      //提交单元格编辑数据前激发
      function onCellCommitEdit(e) {
         var editor = e.editor;

         editor.validate();
         if (editor.isValid() == false) {
            alert(editor.getErrorText());
            e.cancel = true;
         }
      }

      function onDrawCell(e) {
         var record = e.record;

         if (e.field == "total") {
            var price = record.price;
            var quantity = record.quantity;
            e.cellHtml = price * quantity;
         }

      }

      function onDrawSummaryCell(e) {
         var result = e.result;
         var grid = e.sender;
         var rows = e.data;

         if (e.field == "total") {
            var total = 0;
            for (var i = 0, l = rows.length; i < l; i++) {
                  var row = rows[i];
                  var t = row.price * row.quantity;
                  if (isNaN(t)) continue;
                  total += t;
            }

            e.cellHtml = "总计: " + total;
         }
      }
   function getSel(){
      alert(grid.getSelected().total);
   }

</script>

<div class="description">
      <h3>Description</h3>
      <p>“总计”列的值由“单价”和“数量”相乘而来。</p>
</div>
</body>
</html>

这是我根据贵公司的demo直接改写的，我个人的建议是，这个ondrawcell 所生成的数据应该能用getseld取到，至于用不用这个再说，不然，我们要用到这个虚拟数据还要自己做后台处理，那么这个ui功能就成了可有可无的鸡肋，希望采纳！

作者: factory 时间: 2013-9-17 15:57:52

本帖最后由 factory 于 2013-9-17 15:58 编辑

e.cellHtml = "总计: " + total;
之后,再设置下 e.value = total
这样你获取出来的数据也就被改变了

e.cellHtml 负责的是单元格的显示文本内容
e.value 才是该单元格对应的该字段的数据

还有一种改变单元格内容,并且改变值的方法
就是grid.updateRow(row,{field:"xxxx"})

不过你既然用ondrawcell,就直接e.value = 就可以了

作者: liunian 时间: 2013-10-14 10:40:35

factory 发表于 2013-9-17 15:57
e.cellHtml = "总计: " + total;
之后,再设置下 e.value = total
这样你获取出来的数据也就被改变了

http://miniui.com/demo/#src=datagrid/drawcell2.html

代码做如下更改
      function onDrawCell(e) {
         var record = e.record;

         if (e.field == "total") {
            var price = record.price;
            var quantity = record.quantity;
            e.cellHtml = price * quantity;
            e.value= e.cellHtml;
         }

      }
   function getdata(){
      alert(mini.encode(grid.getData()))
   }

结果
[{"price":"100","quantity":"20","_id":1,"_uid":1},{"price":"200","quantity":"30","_id":2,"_uid":2},{"price":"300","quantity":"40","_id":3,"_uid":3},{"price":"400","quantity":"50","_id":4,"_uid":4},{"price":"500","quantity":"60","_id":5,"_uid":5},{"price":"600","quantity":"70","_id":6,"_uid":6}]

结论 e.value 不能赋值

作者: liunian 时间: 2013-10-14 10:44:21

factory 发表于 2013-9-17 15:57
e.cellHtml = "总计: " + total;
之后,再设置下 e.value = total
这样你获取出来的数据也就被改变了

另外，如果在里面加上grid.updateRow

function onDrawCell(e) {
         var record = e.record;

         if (e.field == "total") {
            var price = record.price;
            var quantity = record.quantity;
            e.cellHtml = price * quantity;
            grid.updateRow(grid.getSelected(),{total:e.cellHtml});
         }

      }

火狐脚本调试如下所示

本页面不包含 Javascript

如果 <script> 标签有 'type' 属性, 其值应为 'text/javascript' 或者 'application/javascript'. 另外脚本必须可解析(语法上正确)。

得不偿失

作者: factory 时间: 2013-10-14 11:07:41

liunian 发表于 2013-10-14 10:44
另外，如果在里面加上grid.updateRow

function onDrawCell(e) {

var record = e.record;
e.cellHtml = price * quantity;
record = e.cellHtml;

如果需要涉及到表格数据的话,你还是需要修改他的行数据record的,e.value和e.cellHtml只是针对于表格单元格层面的
对于单元格,我们内部是这样的
一开始e.cellHtml是"";
e.value = 表格行数据reocrd[field]

在绘制的时候,我们会判断e.cellHtml 是否为""
如果是的话e.cellHtml = e.value;

所以当你需要获取行数据的时候,还是需要修改recrod[fueld]的值来修改

作者: liunian 时间: 2013-10-14 11:18:38

factory 发表于 2013-10-14 11:07
var record = e.record;
e.cellHtml = price * quantity;
record = e.cellHtml;

问题解决，非常感谢

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)