jQuery MiniUI

标题: datagrid 中单选按钮点击后出现编辑框 [打印本页]

作者: 十三圆桌骑士 时间: 2017-11-2 15:53:59 标题: datagrid 中单选按钮点击后出现编辑框

在一个datagrid中，由文本框、单选按钮、lable组件组成，在最后一行中是一个单选按钮组，这个单选按钮组，是原生的代码，这个单元格是合并后组成的。但是点击这一组单选按钮任意一个后，会出现编辑框的现象。代码如下，问题更改了几天了，请各位大侠指教下，怎么更改?
<div class="mbox-body" style="height:100%;padding:0px;">
<div id="CheckContextPersonnel" class="mini-datagrid"
onCellcommitedit="orgGridCommitPerson"
onupdate="onUpdate"
oncellclick="cellClick"
style="width:100%;height:500px;" allowCellEdit="true"
allowCellSelect="true" showPager="false"  allowCellWrap="true"  >
<div property="columns">
<div field="idx" type="indexcolumn" header="序号"  headerAlign="center"  width="110"  allowSort="true"></div>
      <div field="evaluationProject"  header="评价项目" headerAlign="center"  width="110" allowInput="false" allowSort="true">
                    <input  class="mini-textbox" name="evaluationProject" allowInput="false"/>
      </div>
<div field="weight" header="权重" headerAlign="center"  align="left"  allowInput="true" width="30">
<input property="editor" class="mini-textbox" name="weight" allowInput="true"/>
</div>
<div field="scoringStandard" header="评分标准" headerAlign="center" allowInput="false"  width="150" >
<input class="mini-textbox" name="scoringStandard" allowInput="false"/>
</div>
<div header="评分等级" headerAlign="center" type="" >

   <div property="columns">
                     <div field="poor" width="100" headerAlign="center" dataType="float" decimalPlaces="0" allowSort="true" header="很差" >
                        <input name="poor" />
                     </div>
                     <div field="cha"  autoEscape="false" width="100" headerAlign="center" dataType="float" decimalPlaces="0"  allowSort="true" header="差" >
                        <input name="cha" />
                     </div>

                     <div field="hg" width="100" headerAlign="center" dataType="float" decimalPlaces="0"  allowSort="true" header="合格" >
                        <input name="hg" />
                     </div>
                     <div field="lh" width="100" headerAlign="center" dataType="float" decimalPlaces="0"  allowSort="true" header="良好" >
                        <input name="lh" />
                     </div>
                     <div field="yx" width="100" headerAlign="center" dataType="float" decimalPlaces="0"  allowSort="true" header="优秀" >
                        <input name="yx" />
                     </div>
                  </div>


</div>
<div field="df" header="得分" headerAlign="center"  width="110" >
<input  class="mini-textbox" name="df" allowInput="false"/>
</div>
</div>

</div>

</div>

js代码：
  $(function(){
mini.parse();
if("${comObj==null}" == "true"){

var arr=[{"uuid":"1","_id":1,"_uid":1,"_state":"added","evaluationProject":"培训内容（75%）","weight":"15","scoringStandard":"培训内容有准备、有培训大纲","poor":"3","cha":"6","hg":"9","lh":"12","yx":"15","df":""},
   {"uuid":"2","_id":2,"_uid":2,"_state":"added","evaluationProject":"","weight":"15","scoringStandard":"培训内容紧密结合员工培训需求，实用有效","poor":"3","cha":"6","hg":"9","lh":"12","yx":"15","df":""},
   {"uuid":"3","_id":3,"_uid":3,"_state":"added","evaluationProject":"","weight":"15","scoringStandard":"对培训重点、范围及深度具有良好的组织计划性","poor":"3","cha":"6","hg":"9","lh":"12","yx":"15","df":""},
   {"uuid":"4","_id":4,"_uid":4,"_state":"added","evaluationProject":"","weight":"15","scoringStandard":"讲授内容能紧密结合课题目标，不偏离主题","poor":"3","cha":"6","hg":"9","lh":"12","yx":"15","df":""},
   {"uuid":"5","_id":5,"_uid":5,"_state":"added","evaluationProject":"","weight":"15","scoringStandard":"内容详实、能理论联系公司实际","poor":"3","cha":"6","hg":"9","lh":"12","yx":"15","df":""},
   {"uuid":"7","_id":6,"_uid":6,"_state":"added","evaluationProject":"课堂展示效果（25%）","weight":"5","scoringStandard":"衣着整洁大方得体，精神面貌佳","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"7","_id":7,"_uid":7,"_state":"added","evaluationProject":"","weight":"5","scoringStandard":"心理素质强，举止大方自然","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"8","_id":8,"_uid":8,"_state":"added","evaluationProject":"","weight":"5","scoringStandard":"目光始终关注学员","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"9","_id":9,"_uid":9,"_state":"added","evaluationProject":"","weight":"5","scoringStandard":"吐字清晰，抑扬顿挫，表达到位","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"10","_id":10,"_uid":10,"_state":"added","evaluationProject":"","weight":"5","scoringStandard":"具备足够的主题专业知识、讲解清晰易懂","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"11","_id":11,"_uid":11,"_state":"added","evaluationProject":"合计","weight":"","scoringStandard":"","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"12","_id":12,"_uid":12,"_state":"added","evaluationProject":"您的综合评价和建议","weight":"","scoringStandard":"","poor":"1","cha":"2","hg":"3","lh":"4","yx":"5","df":""},
   {"uuid":"13","_id":13,"_uid":13,"_state":"added","evaluationProject":"总体评价","weight":"","scoringStandard":"","poor":"","cha":"","hg":"","lh":"","yx":"","df":""}

   ];

mini.get("CheckContextPersonnel").setData(arr);

   var grid=mini.get("CheckContextPersonnel"),
   rows=grid.getData(),
              record=mini.get("CheckContextPersonnel").showRowDetail(rows[12]);

}

var cells = [
               { rowIndex: 0, columnIndex: 1, rowSpan:5, colSpan: 1 },
               { rowIndex: 5, columnIndex: 1, rowSpan: 5, colSpan: 1 },
               { rowIndex: 10, columnIndex: 2, rowSpan: 1, colSpan: 9 },
               { rowIndex: 11, columnIndex: 2, rowSpan: 1, colSpan: 9 },
               { rowIndex: 12, columnIndex: 3, rowSpan: 1, colSpan: 8 } //总体评价
         ];
          mini.get("CheckContextPersonnel").mergeCells(cells);

});

绘制第13行单选按钮组代码：
<%--绘制单元格事件 --%>
function onDrawCell(e) {

var grid = e.sender;
      var record = e.record;
if(e.field == "weigth"){

        if(e.rowIndex==12){
        var rows = mini.decode($("[name=trainEvaluationList").val());
        len=rows.length,
            selectVal="";
        if(len>0){
            selectVal=rows[12].weight;
        }


        //当前复选框选中值
var currentSelectVa=$("input[name='ztpjrad']:checked").val();
        if(currentSelectVa!=''&&currentSelectVa!=undefined){
        selectVal=currentSelectVa;
        }

        var rowHtml="<table width='100%' ><tr align='center' >";
        rowHtml+="<td><input type=\"radio\" value=\"优秀\" name=\"ztpjrad\" />优秀</td>";
        rowHtml+="<td><input type=\"radio\" value=\"良好\" name=\"ztpjrad\" />良好</td>";
        rowHtml+="<td><input type=\"radio\" value=\"较好\" name=\"ztpjrad\" />较好</td>";
        rowHtml+="<td><input type=\"radio\" value=\"一般\" name=\"ztpjrad\" />一般</td>";
        rowHtml+="<td><input type=\"radio\" value=\"较差\" name=\"ztpjrad\" />较差</td>";
        rowHtml+="</tr></table>";
        var rowData=rows[rows.length-1];

        rowHtml=rowHtml.replace("/>"+selectVal,"checked=\"true\"/>"+selectVal);
        e.cellHtml=rowHtml;


        }

      }

}

如下的界面如下：
[attach]10092[/attach]

点击其中的按钮后，比如我点击了较好，会出现如下的现象

[attach]10093[/attach]
然后该单元格失去焦点后，才恢复成如下这样：
[attach]10094[/attach]

各位大侠前辈，我需要怎样更改，才能不出现编辑空白处？

作者: 十三圆桌骑士 时间: 2017-11-2 15:58:01

刚刚360浏览器不兼容验证码，导致三张图片没有发送成功，三张图片分别如下：
[attach]10095[/attach]

[attach]10096[/attach]

[attach]10097[/attach]

作者: felt 时间: 2017-11-2 16:39:06

十三圆桌骑士发表于 2017-11-2 15:58
刚刚360浏览器不兼容验证码，导致三张图片没有发送成功，三张图片分别如下：

这里应该禁止掉默认的编辑
grid.on("cellbeginedit",function(e){
var record=e.record;
if(grid.indexOf(record)==12&&e.field=="poor"){
e.cancel=true;
}
})

作者: 十三圆桌骑士 时间: 2017-11-2 16:50:02

felt 发表于 2017-11-2 16:39
这里应该禁止掉默认的编辑
grid.on("cellbeginedit",function(e){
var record=e.record;

解决了，非常感谢

超级版主

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