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
你觉得你这些代码我能运行出效果吗?
请重新做一个简单页面来重现问题

<!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;">  
    <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 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 newRow = {};
            grid.addRow(newRow);
            grid.beginEditCell(newRow);
            grid.updateRow(newRow,{course:"123",courseField:"例子"});
    </script>
        </body>
</html>

版主看一下  代码运行后 course和courseField一直是一样的数据 麻烦了
作者: 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/) Powered by Discuz! X2