jQuery MiniUI

 找回密码
 立即注册
查看: 2367|回复: 3
打印 上一主题 下一主题

datagrid 中单选按钮点击后出现编辑框 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2017-11-2 15:53:59 |只看该作者 |倒序浏览
在一个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;
                               
                               
                }
               
        }

    }


如下的界面如下:


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


然后该单元格失去焦点后,才恢复成如下这样:


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

Rank: 2

沙发
发表于 2017-11-2 15:58:01 |只看该作者

刚刚360浏览器不兼容验证码,导致三张图片没有发送成功,三张图片分别如下:








附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

板凳
发表于 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;
    }
})

Rank: 2

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

解决了,非常感谢 超级版主

Archiver|普加软件

GMT+8, 2024-11-10 07:05 , Processed in 1.054090 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部