jQuery MiniUI

标题: 行编辑器中的buttonedit问题 [打印本页]

作者: 覆霜雪 时间: 2014-11-7 16:45:18 标题: 行编辑器中的buttonedit问题

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

作者: dforce 时间: 2014-11-7 17:04:13

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

作者: 覆霜雪 时间: 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 时间: 2014-11-10 11:58:53

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

监听oncellendedit去处理

作者: 覆霜雪 时间: 2014-11-20 14:57:01

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

[attach]5510[/attach]
这是页面文件

作者: 覆霜雪 时间: 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 时间: 2014-11-20 15:24:57

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

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

作者: 覆霜雪 时间: 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>

作者: felt 时间: 2014-11-20 15:44:46

覆霜雪发表于 2014-11-20 15:36
记账

你觉得你这些代码我能运行出效果吗？
请重新做一个简单页面来重现问题

作者: 覆霜雪 时间: 2014-11-20 15:46:11

覆霜雪发表于 2014-11-20 15:36
记账

问题就在 grid.updateRow(row,{course:text.course,courseField:text.code});
course和courseField总是设置成一致的数据。

作者: 覆霜雪 时间: 2014-11-20 16:04:31

felt 发表于 2014-11-20 15:44
你觉得你这些代码我能运行出效果吗？
请重新做一个简单页面来重现问题

作者: felt 时间: 2014-11-20 16:15:25

覆霜雪发表于 2014-11-20 16:04
记账

[attach]5513[/attach]
如图，不一样啊

作者: 覆霜雪 时间: 2014-11-20 16:21:26

felt 发表于 2014-11-20 16:15
如图，不一样啊

页面展示和点击buttonedit的输入框后，为什么值是一样的点击前页面
[attach]5514[/attach]

作者: 覆霜雪 时间: 2014-11-20 16:22:01

覆霜雪发表于 2014-11-20 16:21
页面展示和点击buttonedit的输入框后，为什么值是一样的点击前页面

点击后页面[attach]5517[/attach]

作者: felt 时间: 2014-11-20 16:24:08

覆霜雪发表于 2014-11-20 16:22
点击后页面

本来就显示的就是文本字段
field="course" displayField="courseField"
对应buttonedit
value：course,text:courseField

作者: 覆霜雪 时间: 2014-11-20 16:30:31

felt 发表于 2014-11-20 16:24
本来就显示的就是文本字段
field="course" displayField="courseField"
对应buttonedit

请问怎样实现，未点击时展示文本（courseField），点击后展示id字段(course) 纠结这里好久了。。

作者: felt 时间: 2014-11-20 16:51:17

覆霜雪发表于 2014-11-20 16:30
请问怎样实现，未点击时展示文本（courseField），点击后展示id字段(course) 纠结这里好久了。。 ...

只能表格显示的一样

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