一个easyui的datagrid的Editer的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个easyui的datagrid的Editer的问题相关的知识,希望对你有一定的参考价值。

我想在easyui的datagrid中使用datetimebox,发现需要自定义一下,至于自定义的方法网上很容易就找到了,而且确实能能出来,但是网上的方法出来是没问题,但是关不掉,也就是说,我选中一行,那么这行会变为编辑状态,datetimebox出现,当我再点选其他行时,应该是之前那行退出编辑状态,但是问题就是我加上datetimebox后就不能退出编辑状态了,而不加datatimebox只用datagrid默认有的编辑控件就没问题,我在网上查了半天,都没人提出过这个问题,都是关于怎么自定义的,我最后逐行排查,发现问题出在
$('#tt').datagrid('endEdit', editIndex);
这句上,也就是关闭编辑状态这句,只要某一行加了datetimebox,这句就不执行了,程序就卡在这句话上了,后续语句也都不执行了,如果不用datetimebox则一切正常
所以,请问使用datetimebox,如何才能正常退出编辑状态?

参考技术A 可以的,我也用过,你是不是监听grid的onclick方法结束编辑的??追问

对,是onclick结束的,这样会出现什么问题?

追答

这样,会有什么问题我就不知道了,但我也是这样实现的,嘿嘿,差不多。。。

参考技术B 我也碰到了,和你一抹一样的问题,不得其解?不知道你如何解决的

EasyUI——可编辑的DataGrid

    利用EasyUI做的可编辑的DataGrid大致分为两种类型。一种是启动行编辑的,一种是启动单元格编辑。且不说启动编辑的效果怎样。单启动编辑这一块它就封装的非常厉害。好些功能没有办法去更改。如今项目的一个需求就是在页面上使得DataGrid能够实现这种效果,单击选中行,双击可编辑单元格,失去焦点则保存数据。在研究了整整两天之后,大致能实现。可是差失去焦点保存数据。这篇文章就简单理解一下。可启动单元格编辑的DataGrid是怎样实现的。


首先得加入EasyUI的引用:

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <link href="../../Content/EasyUI/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/EasyUI/icon.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/EasyUI/demo.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/EasyUI/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Content/EasyUI/jquery.easyui.min.js" type="text/javascript"></script></span>


其次是表格的代码:

<span style="font-family:KaiTi_GB2312;font-size:18px;">        <table id="dg" title="管理员管理查询结果" style="width: auto; height: auto"; data-options="onDblClickCell:onClickCell">  @*onDblClickCell指的是双击单元格进行编辑,假设须要单击进行编辑。就改为onClickCell*@
            <thead>
                <tr>
                    <th data-options="field:'AdminID',width:100">管理员工号</th>
                    <th data-options="field:'AdminName',width:100,editor:'text'">姓名</th>
                    <th data-options="field:'AdminPWD',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">password</th>
                    <th data-options="field:'AdminLevel',width:80,align:'right',editor:'text'">权限</th>
                    <th data-options="field:'IsUsed',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">是否可用</th>
                </tr>
            </thead>
        </table></span>


最后是JS代码:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript" src="/easyui/datagrid-cellediting.js"></script></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <script type="text/javascript">
        function initTable() {
            $("#dg").datagrid({
                url: "Series/QueryBy",  //调用的SeriesController中的QueryBy方法
                width: "100%",  //宽度适应浏览器大小
                fitColumns: true,  //列宽自适应
                idField: 'ID',
                loadMsg: '正在载入用户信息...',
                pagination: true,  //是否分页显示
                singleSelect: false,  //仅仅能选中一条数据
                striped: true,   //行背景交换
                pageSize: 10,    //每一页的大小
                pageNumber: 1,   //当前页数
                pageList: [10, 20, 30],  //每一页显示的条数
                queryParams: {
                    searchName: $("searchName").val()  
                },
                columns: [[     //这段代码是给DataGrid列赋值。field就是每一列相应的字段名,title是每一列显示的列首
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'ID', title: '主键', width: 50, hidden: true },
                    { field: 'AdminID', title: '管理员工号', width: 50 },
                    { field: 'AdminPassword', title: 'password', width: 50, hidden: true, editor: 'text' },
                    { field: 'AdminName', title: '姓名', width: 50, editor: 'text' },
                    { field: 'AdminLevel', title: '权限', width: 50, editor: 'text' },
                    { field: 'IsUsed', title: '是否使用', width: 55, editor: 'text' }
                ]]
            });
        }

        $(function () {
            initTable();
        });
    </script></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">    <script type="text/javascript">
        $.extend($.fn.datagrid.methods, {
            editCell: function (jq, param) {
                return jq.each(function () {
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field) {
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }

                });
            }
        });

        var editIndex = undefined;
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#dg').datagrid('validateRow', editIndex)) {
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        function onClickCell(index, field) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index)    //有这句话则编辑是该行为选中状态,没有这句话则编辑是该行不是选中状态
                $('#dg').datagrid('editCell', { index: index, field: field });
                editIndex = index;
                $('#datagrid-cell').blur( 'editCell',alert("adafsdf")); 
            }
        }
    </script></span>



总结

    EasyUI有非常多方法都是内部封装的,比方editCell、selectRow等。根本看不出来它详细是怎样实现的。在牛腩、Jquery中。实现可编辑的表格都是自己手写一个表格。然后对表格进行操作,即编辑单元格时,插入一个文本框,编辑结束则文本框隐藏。同一时候也能使用获取焦点和失去焦点的事件。而在这里,当单击或双击单元格进行编辑时。单击或双击完了,单元格就已经失去状态了。并且单元格失去焦点的事件非常难把控。希望大神能够指导一二。


以上是关于一个easyui的datagrid的Editer的问题的主要内容,如果未能解决你的问题,请参考以下文章

jQuery easyUI easyui-datagrid 选中指定内容的行

关于easyui加载datagrid数据的问题

求教一个easyui的问题 datagrid中怎么加复选框

easyui datagrid 怎么重载数据

mvc easyui datagrid 查询怎么做啊,

EasyUI datagrid 列表内如何设定日期选择