jQuery MiniUI

标题: 根据mini-combobox的值显示或隐藏一列 [打印本页]

作者: xiaobo 时间: 2012-7-26 15:52:16 标题: 根据mini-combobox的值显示或隐藏一列

如何所示。如果选择是，那么我就把审核人，这列显示，如果不是，就隐藏。
页面代码如下： <div name="oooo" field="isCanTemp" width="120" headerAlign="center" allowSort="true" >是否需要审核
               <select  property="editor" class="mini-combobox" style="width:100%;">
                                 <option> 是</option>
                                 <option>否</option>
                           </select>

   </div>
数据库里，0表示是，1表示否。
  我不清楚，这个js事件在哪里写。在div里写，还是select中写，还有如何娶到。option中的value

作者: factory 时间: 2012-7-26 16:24:39

监听表格的oncellendedit事件,在编辑结束的时候判断单元格的值是否为0或1,再处理表格列的隐藏或者显示
大概的代码如下:
function oncellendedit(e){
         if(e.field == "isCanTemp"){
            var record = e.record
            var temp= record.gender;
            if(temp== "0"){
                  grid.hideColumn("XXXX");  //这个是column的name
            }else{
                  grid.showColumn("XXXX");
            }
         }
      }

作者: xiaobo 时间: 2012-7-26 16:44:35

oncellendedit(e)这个事件些在哪里？是表头这里的属性吗 <div id="datagrid1" class="mini-datagrid" style=" width:100%;height:400px;"
idField="id" showFooter="false" url="data/new.txt"
showSummaryRow="true" allowCellEdit="true" allowCellSelect="true" multiSelect="true">
gender这个属性是做什么的？像gender oncellendedit(e) 这样的属性，我该在哪里学习。以前没有找到过？

作者: xiaobo 时间: 2012-7-26 17:00:49

能不能给点mimiui的学习方法。。。像oncellendedit这种事件，我在grid api里http://www.miniui.com/docs/api/index.html#ui=datagrid也没有发现。如何学那，纠结

作者: factory 时间: 2012-7-26 17:05:55

xiaobo 发表于 2012-7-26 16:44
oncellendedit(e)这个事件些在哪里？是表头这里的属性吗
gender这个属性是做什么的？像gender oncelle ...

oncellendedit在表格上面<div id="datagrid1" class="mini-datagrid" oncellendedit="oncellendedit">
name是column上的,比如你的<div name="oooo" field="isCanTemp"> name是OOOO;
gender是我拷贝的我这里的代码时候写错了...换成你的话是record.isCanTemp

作者: xiaobo 时间: 2012-7-26 17:34:58

非常感谢。基本解决了。我是新手，希望能告诉我学习miniui的经验，这个更重要。api里有好多属性都找不到，如oncellendedit，在grid的api就没哟。。

作者: xiaobo 时间: 2012-7-26 19:09:32

oncellendedit="oncellendedit"在dreamweaver中调试可以进入js中，可是在jsp页面就进不去js。
selectionchanged="oncellendedit"到时可以alert东西出来；
<div id="datagrid1" class="mini-datagrid" style=" width:100%;height:400px;"
idField="id"  showFooter="false" url="data/new.txt" oncellendedit="oncellendedit"
showSummaryRow="true" allowCellEdit="true"  allowCellSelect="true" multiSelect="true">

作者: factory 时间: 2012-7-27 10:31:12

xiaobo 发表于 2012-7-26 19:09
oncellendedit="oncellendedit"在dreamweaver中调试可以进入js中，可是在jsp页面就进不去js。
selectionc ...

oncellendedit在API中是有的,写的是cellendedit,不过在运用的时候事件前面一律需要加上on.
你这个问题建议你最好写个最最简单的demo光测试下oncellendedit事件能否激发.应该是没有问题

作者: xiaobo 时间: 2012-7-28 17:17:56

是jsp使用的mini版本太低。所以加载不了函数。。
oncellendedit(e)这个事件，是编辑好数据后才能发生的事件。即我选择好是或否，点击外边的表格一下。才能出发oncellendedit事件。。
现在我需要直接选择好是，或否，就能出发这个js事件。。不知如何办？

作者: xiaobo 时间: 2012-7-29 12:31:25

xiaobo 发表于 2012-7-28 17:17
是jsp使用的mini版本太低。所以加载不了函数。。
oncellendedit(e)这个事件，是编辑好数据后才能发生的事 ...

我照到了个方法可以直接点击是或否就能出发，显示或隐藏列。但是有写问题，我不知道，是miniui本生的小bug，还是我自己的操作有误。。我把图片和文件传上，帮我找找问题。[attach]288[/attach][attach]288[/attach] 。具体来说如果使用type="comboboxcolumn"，那么onvaluechanged="onDeptChanged"久没有效果。不适用type="comboboxcolumn"，那么久会出现控制不了 class="mini-combobox"的宽度。还有编辑好页面显示的值，是id的值，而不是text的值。。。
还有我后台，存的是0代表是，1代表否。。在查询数据的时候，如何根据0或1的值，来动态的显示，combobox里的值。
如果有qq的话。联系更方便。。。

作者: niko 时间: 2012-7-29 16:18:01

你这个功能，可以这样：
1.选择combobox，正常赋值
2.审核人是否可编辑，由“是否需要审核”列值来决定。
这样就很简单实现了。

作者: xiaobo 时间: 2012-7-30 09:06:55

我这样做了，但是有些问题，我把附件上传了啊。
我代码是这样写的。有什么问题吗？
<div id="datagrid1" class="mini-datagrid" style="width:100%;height:280px;"
      url="data/new.txt"idField="id"
      allowResize="true" pageSize="20"  oncellcommitedit="oncellendedit"
      allowCellEdit="true" allowCellSelect="true" multiSelect="true"
   >
<div property="columns"  >
      
      <div type="comboboxcolumn"  field="gender" width="100" allowSort="true"  align="center" headerAlign="center">是否需要审核
         <input property="editor" class="mini-combobox"  data="Genders" onvaluechanged="onDeptChanged"/>
      </div>

      <div name="shenheren" field="ooo" width="120" headerAlign="center" allowSort="true" >审核人
      </div>
   </div>
</div>


</body>
<script  type="text/javascript">
      var Genders = [{ id: 0, text: '是' }, { id: 1, text: '否'}];

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

      function onDeptChanged(e) {

         alert("dddd");
         if(id=="0"){
   grid.hideColumn("shenheren");
   }else{
      grid.showColumn("shenheren");
   }

      }

</script>

作者: niko 时间: 2012-7-30 10:51:08

function onDeptChanged(e) {

         grid.commitEdit(); //加这一行就可以了。
         if(id=="0"){
                        grid.hideColumn("shenheren");
                        }else{
                  grid.showColumn("shenheren");
                        }

作者: xiaobo 时间: 2012-7-30 14:54:43

现在需求改了。
审核人这里也显示。。。如果是否审核这列选择是，那么审核人这列就可以编辑。。。如果选择否，，那么审核人这列就不可编辑。如何控制？？

作者: niko 时间: 2012-7-30 16:36:02

监听处理表格的cellbeginedit事件：
<div class="mini-datagrid" oncellbeginedit="onCellBeginEdit" ...

js:
      function onCellBeginEdit(e) {
         var record = e.record, field = e.field;
      if(field == "name"){ //判断列，或行属性
e.cancel = true; //阻止编辑
      }
      }

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