checkbox的勾选控制grid某一列的只读

coolgox

在一个grid的一行数据,想实现一个列是checkbox, 选中状态的话，第二列的数据就可编辑，不勾选的话则为不可编辑；

liangyongfei

在data组件上添加一个计算列！boolean类型！在grid上添加这一列，然后放置一个checkbox  
第二列的那个字段！在相应的data组件，编辑规则中，找到相应字段，设置只读规则！ 绑定那个计算列的值即可！

coolgox

谢谢楼上的回复，效果已经做出来了，具体的实现逻辑如下:
        /**
                demo：在grid列表里实现控制一列的可编辑或不可编辑
                1.data中设置一个临时列'calcFlag'(type="Boolean", isCalculate="true"),
                2.设置被控制列'controlValue'的readonly属性(true/false)来源于列'calcFlag'的值(在data的规则中设置rule);
                3.用控制列controlFlag(checkBox)的change事件控制calcFlag的值实现被控制列'controlValue'可编辑或不可编辑
         */
setp3可能有点多余，原因是如果用'calcFlag'来 绑定checkBox的话，选中就会不可编辑，不选中则为可编辑，所以多加了个字段来控制

coolgox

说到用grid，还有个问题，就是显示多行的时候controlFlag是用checkBox展示，但checkBox的change事件只支持第一行
源码如下:
          <column width="100" name="controlFlag" editable="true" align="center" editor="component"
            xid="column1" disableEditorDisplay="false">
            <editor xid="editor2">
              <span bind-ref="ref('controlFlag')" class="x-checkbox" component="$UI/system/components/justep/button/checkbox"
                xid="ctrFlagCheckBox" checkedValue="Y" uncheckedValue="N" value="Y" onChange="ctrFlagCheckBoxChange"/>
            </editor>
          </column>  

要怎样设定才能每一行都能实现onChange事件呢，求思路.

liangyongfei

coolgox 发表于 2016-7-10 09:33
说到用grid，还有个问题，就是显示多行的时候controlFlag是用checkBox展示，但checkBox的change事件只支持 ...

在list 中放置 checkbox 组件吗？？
按理说点击每个 checkbox 的时候，都会触发对应 checkbox 的onChange 事件才对！本来就这样的！
不过！在js方法中，你需要通过event来获取组件对象！而不能通过this.comp来获取!

coolgox

实践证明对每个checkbox的onChange事件是不可行的，结果只能控制第一行, JS代码如下:
        /**
                实现逻辑：
                1.当ctrFlagCheckBox选中，设置calcFlag:false, controlVale的readonly属性为false(即可编辑)；
                2.当ctrFlagCheckBox不选中，设置calcFlag:true, controlVale的readonly属性为true(即不可可编辑)
         */
        Model.prototype.ctrFlagCheckBoxChange = function(event){
                var controlsData= this.comp("controlsData");
                controlsData.first();
                var checked = event.checked;
                if(checked) {
                        controlsData.setValue("calcFlag", false);
                } else {
                        controlsData.setValue("calcFlag", true);
                }
        };

jishuang

controlsData.first();设置了是第一行，把这个去掉看看