查看: 5342|回复: 16

行编辑器中的buttonedit问题 [复制链接]

覆霜雪

中级会员

Rank: 3 Rank: 3

电梯直达

楼主

发表于 2014-11-7 16:45:18 |只看该作者 |倒序浏览

一个页面在datagrid中有一列是可编辑的，列中是buttonedit控件。我现在的需求是，在buttonedit的文本框中手动输入数据后，同时修改buttonedit显示在列中的值有这种需求的例子吗

收藏0

dforce

超级版主

Rank: 8 Rank: 8

沙发

发表于 2014-11-7 17:04:13 |只看该作者

http://www.miniui.com/demo/#src=datagrid/rowedit_openpage.html
参考示例

覆霜雪

中级会员

Rank: 3 Rank: 3

板凳

发表于 2014-11-10 10:34:44 |只看该作者

dforce 发表于 2014-11-7 17:04
http://www.miniui.com/demo/#src=datagrid/rowedit_openpage.html
参考示例

我的需求是，功能除了满足这个例子的需求外，还要求在buttonedit的文本输入框手动输入内容后，通过ajax将数据返回后台进行处理，返回新的数据，请问这个需求，我该怎么实现呢，是要在renderer中写还是怎样

dforce

超级版主

Rank: 8 Rank: 8

地板

发表于 2014-11-10 11:58:53 |只看该作者

覆霜雪发表于 2014-11-10 10:34
我的需求是，功能除了满足这个例子的需求外，还要求在buttonedit的文本输入框手动输入内容后，通过ajax将 ...

监听oncellendedit去处理

覆霜雪

中级会员

Rank: 3 Rank: 3

5^#

发表于 2014-11-20 14:57:01 |只看该作者

dforce 发表于 2014-11-10 11:58
监听oncellendedit去处理

这是页面文件

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

覆霜雪

中级会员

Rank: 3 Rank: 3

6^#

发表于 2014-11-20 14:58:42 |只看该作者

本帖最后由覆霜雪于 2014-11-20 14:59 编辑

覆霜雪发表于 2014-11-20 14:57
这是页面文件

我用事件实现了大部分功能，但是在datajson=3时候，
grid.updateRow(row,{course:text.course,courseField:text.code});
这行代码没有效果，总是course和courseField显示的内容一致，请问这是怎么回事我确定text.course和text.code都有值且一个是数字一个是中文

felt

超级版主

Rank: 8 Rank: 8

7^#

发表于 2014-11-20 15:24:57 |只看该作者

覆霜雪发表于 2014-11-20 14:58
我用事件实现了大部分功能，但是在datajson=3时候，
grid.updateRow(row,{course:text.course,courseField ...

请提供能重现问题的简单页面和数据

覆霜雪

中级会员

Rank: 3 Rank: 3

8^#

发表于 2014-11-20 15:36:40 |只看该作者

felt 发表于 2014-11-20 15:24
请提供能重现问题的简单页面和数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>记账</title>

<script src="${ctx}/js/validation/validation.js"
type="text/javascript"></script>
</head>
<body style="height:98%; width:99%;background:white;">
<div align="center">
<div style="width:800px;"  >
      <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
         <table style="width:100%;">
            <tr>
                  <td style="width:100%;text-align:left">
                    <input id="memberCode" type="hidden" value="${usession.memberCode }" />
                     <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
                     <span class="separator"></span>
                  </td>
            </tr>
         </table>
      </div>
</div>
<form id="form1">
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:200px;" idField="id"
url="${ctx}/login/loanaccounts!query.action"
      allowResize="true" pageSize="20" showFooter="false"
      allowCellEdit="true" allowCellSelect="true" multiSelect="true" oncellendedit="checkCourse"
      editNextOnEnterKey="true"  editNextRowCell="true">
      <div property="columns">
         <div type="indexcolumn"></div>
         <div type="checkcolumn"></div>
         <div type="comboboxcolumn" autoShowPopup="true" name="courseType" field="courseType" width="100" align="center" headerAlign="center">
           类型
            <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />
         </div>
         <div name="course"  field="course" displayField="courseField" headerAlign="center"  width="150" >
            科目
            <input id="courseId" name="courseId" property="editor" class="mini-buttonedit" width="300px" onbuttonclick="onButtonEdit" />
         </div>
      </div>
</div>
</form>
</div>
      <script type="text/javascript">
         mini.parse();

         var grid = mini.get("datagrid1");
         var form1 = new mini.Form("#form1");
         var saveButton = mini.get("saveButton");
         var resetButton = mini.get("resetButton");
         var key = mini.get("key");
         var code = mini.get("code");
var courseOne = mini.get("courseOne");
var courseTwo = mini.get("courseTwo");
         var Genders = [{ id: 1, text: '借方' }, { id: 2, text: '贷方'}];
//监听单元格编辑事件
      function checkCourse(e){
        if(e.field=="course"){
        onCourseRenderer(e);
        }
      }
        //列表科目显示
         function onCourseRenderer(e) {
            var values;
            var row = grid.getSelected();

            //var renderer = this;
            var grid1 = e.sender;
            var record = e.record;
               var courseField = record.courseField;
            // var course = record.course;
            if(courseField==null||courseField==""){
               return;
            }
               if(checkloan(courseField)==false) {
               grid.updateRow(row,{courseField:""});
               return;
               }
                  $.ajax({
                     url: "${ctx}/login/loancourse!getCourseByCode.action",
                     data: { oneCourse: courseField},
                     type: "post",
                     success: function (text) {
                        var datajson = text.datajson;
                        alert(datajson);
                        if(datajson == '0'){
                        alert("该凭证不存在");
                        grid.updateRow(row,{courseField:""});
                        return;
                        }else if(datajson == '1'){
                        alert("总科目不可用");
                        grid.updateRow(row,{courseField:""});
                        return;
                        }else if(datajson == '2'){
                        alert("本科目下存在多条数据,只能选择一条");
                        grid.updateRow(row,{courseField:""});
                        return;
                        }

                        else if(datajson == '3'){
                        grid.cancelEdit();
                        grid.updateRow(row,{course:text.course,courseField:text.code});
                        }

                     },
                     error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText);
                     }
                  });
         }


      //弹出文本框  弹出科目树页面
         function onButtonEdit(e) {
            var btnEdit = this;
            mini.open({
                  url: "${ctx}/login/loanaccounts!toloancoursetree.action",
                  title: "多选树",
                  width: 350,
                  height: 350,
            onload: function () {
                     var ifr = this.getIFrameEl();
                     var data = { action: "tree"};
                     ifr.contentWindow.SetData(data);
            },
                  ondestroy: function (action) {
                     if (action == "ok") {
                        var iframe = this.getIFrameEl();
                        var data = iframe.contentWindow.GetData();
                        data = mini.clone(data);
                        btnEdit.setValue(data.text);
                        btnEdit.setText(data.id);
                     }
                  }
            });

         }

      function addRow() {
        //获得行数
var count = grid.getData().length;
if(count>5){
alert("最多添加6行数据");
return;
}
         var newRow = {};
         grid.addRow(newRow);
         grid.beginEditCell(newRow);
         grid.updateRow(newRow,{course:"",courseField:""});
      }
</script>

</body>
</html>