jQuery MiniUI

标题: 请问如何取到DataGrid中property="editor"的控件的值 [打印本页]

作者: zjl2468    时间: 2017-4-21 13:57:58     标题: 请问如何取到DataGrid中property="editor"的控件的值

  1. <div id="datagrid1" class="mini-datagrid" style="width:100%; height:600px" idField="id" allowResize="true" allowCellEdit="true" allowCellSelect="true" multiSelect="true" editNextOnEnterKey="true" editNextRowCell="true" showPager="false">
  2.         <div property="columns">
  3.             <div name="FinishTime" field="FinishTime" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd">计划结束时间</div>
  4.             <div name="ActualEnd" field="ActualEnd" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd">
  5.                 实际结束时间
  6.                 <input property="editor" class="mini-datepicker" style="width:100%;" onvaluechanged="changevalue()" />
  7.             </div>
  8.             <div name="SupplyStatus" field="SupplyStatus" headerAlign="center" allowSort="true">供应状态</div>
  9.         </div>
  10.     </div>
复制代码

需求如下:

FinishTime、ActualEnd、SupplyStatus,这三个的值都是读取数据库的,其中ActualEnd可以编辑

当编辑框的值发生改变以后,把新的值和FinishTime的值作比较,如果

FinishTime > ActualEnd,则把SupplyStatus的值设置为“提前”

FinishTime = ActualEnd,则把SupplyStatus的值设置为“正常”

FinishTime < ActualEnd,则把SupplyStatus的值设置为“滞后”

我通过在editor里面加上onvaluechanged方法来实现以上功能,但是只能取到编辑前的值,取不到编辑后的值

  1. function changevalue() {

  2.         var row = grid.getSelected();

  3.         var startTime = mini.parseDate(row["FinishTime"]);
  4.         var start = mini.formatDate(startTime, "yyyy-MM-dd");
  5.        
  6.         var endTime = mini.parseDate(row["ActualEnd"]);
  7.         var end = mini.formatDate(endTime, "yyyy-MM-dd");

  8.         
  9.         if (start > end) {
  10.             row["SupplyStatus"] = "提前";
  11.         }

  12.         if (start == end) {
  13.             row["SupplyStatus"] = "正常";
  14.         }

  15.         if (start < end) {
  16.             row["SupplyStatus"] = "滞后";
  17.         }
  18.     }
复制代码

请教大家,上述代码是否正确,我应该如何实现想要的功能呢?



此外,还有一个问题

怎样设置DataGrid里面的列的高度,我加了height属性,但是不起作用


  1. <div name="ActualEnd" field="ActualEnd" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd"></div>

  2. <input property="editor" class="mini-datepicker" style="width:100%; margin-top: 12px;" />
复制代码

目前上面这两个控件的高度不一致,编辑状态时,编辑框没有把单元格撑满(宽度够了,高度不够),请问如何使这两个控件的高度一致?



作者: dforce    时间: 2017-4-25 11:07:32

1 可以监听oncellcommitedit事件
grid.on("cellcommitedit",function(e){
   if(e.field=="ActualEnd){
       var record=e.record;
      var finishiTime=record.FinishTime;
      var ActuralEnd=e.value;
      var text="";
     if(...)    //判断不同比较结构
     setTimeout(function(){
            grid.updateRow(record,{supplyStatus:text});
     },100)
   }
})

2 表格行高修改只能通过修改样式
.mini-grid-cell-inner{
   line-height:40px;
}




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