jquery-easyui-1.3.1向配置了detailview的datagrid无法添加数据行

  最新版本的jquery-easyui-1.3.1新增了grid插件的subGrid【detailview】功能,可以预览数据行的详细信息。但是使用从他们官网下载的源代码压缩包中使用高版本的jquery,如jquery-1.8.0.min.js时,发现向配置了detailview的grid添加数据行时,如果这个grid没有数据,在添加多行数据时,只能添加在最前面的一行,其他数据无法添加进去。如果grid中存在数据时,那么无法增加新行。

  使用jquery-1.8.0.min.js,配置了detailview的datagrid,默认无数据源,在数据源datagird中选择了4行数据,但是添加到detailview的datagrid中时只添加了一行,如果取消注释掉示例中的url,给detailview的datagrid增加数据,则无法添加数据,如下图所示

给detailview的datagrid增加数据,则无法添加数据

  使用jquery-1.4.2.min.js版本,则配置了detailview的datagrid没有出现这种问题

jquery-easyui-1.3.1向配置了detailview的datagrid无法添加数据行

最后附上源代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>subgrid detailview DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
<!--注意不要使用高版本jquery,要不无法添加行-->
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../plugins/datagrid-detailview.js"></script>
    <script>
        $(function () {
            $('#test2').datagrid({
               width:400
               ,height:250
               ,title:'DataGrid with subGrid',fitColumns:true,singleSelect:true,
                toolbar: [{
                    id: 'btnadd',
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('add')
                    }
                }],
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { title: 'Code', field: 'code', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'name', title: 'Name', width: 120 },
                    { field: 'addr', title: 'Address', width: 220, rowspan: 2, sortable: true,
                        sorter: function (a, b) {
                            return (a > b ? 1 : -1);
                        }
                    },
                    { field: 'col4', title: 'Col41', width: 150, rowspan: 2 }
                ]],
                    view: detailview,
                    detailFormatter: function (index, row) {
                    return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
                    },
                onExpandRow: function (index, row) {
                    $('#ddv-' + index).datagrid({
                        url: 'subdatagrid_data.json',
                        idField: 'code',
                        frozenColumns: [[
                            { field: 'ck', checkbox: true },
                            { title: 'Code', field: 'code', width: 80, sortable: true }
                        ]],
                        columns: [[
                            { title: 'Base Information', colspan: 3 },
                            { field: 'opt', title: 'Operation', width: 100, align: 'center', rowspan: 2,
                                formatter: function (value, rec) {
                                    return '<span style="color:red">Edit Delete</span>';
                                }
                            }
                        ], [
                            { field: 'name', title: 'Name', width: 120 },
                            { field: 'addr', title: 'Address', width: 220, rowspan: 2, sortable: true,
                                sorter: function (a, b) {
                                    return (a > b ? 1 : -1);
                                }
                            },
                            { field: 'col4', title: 'Col41', width: 150, rowspan: 2 }
                        ]],
                        onResize: function () {
                            $('#test').datagrid('fixDetailRowHeight', index);
                        },
                        onLoadSuccess: function () {
                            setTimeout(function () {
                                $('#test').datagrid('fixDetailRowHeight', index);
                            }, 0);
                        }
                    });
                    $('#test').datagrid('fixDetailRowHeight', index);
                }
                ,width: 700
            });
           $('#test').datagrid({
                title: 'DataGrid Source',
                iconCls: 'icon-save',
                width: 700,
                height: 250,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                collapsible: true,
                url: 'datagrid_data.json',
                sortName: 'code',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'code',
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { title: 'Code', field: 'code', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'name', title: 'Name', width: 120 },
                    { field: 'addr', title: 'Address', width: 220, rowspan: 2, sortable: true,
                        sorter: function (a, b) {
                            return (a > b ? 1 : -1);
                        }
                    },
                    { field: 'col4', title: 'Col41', width: 150, rowspan: 2 }
                ]],
                pagination: true,
                rownumbers: true,
                toolbar: [{
                    id: 'btnsave',
                    text: 'Save',
                    iconCls: 'icon-save',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        var rows = $('#test').datagrid('getSelections');
                        for (var i = 0; i < rows.length; i++) {
                           $('#test2').datagrid('appendRow', rows[i]); 
                        }
                    }
                }]
            });
        });
         
    </script>
</head>
<body>
    <table id="test"></table>
    <table id="test2"> </table>
</body>
</html>

相关文件下载

最新jquery-easyui-1.3.1下载
jquery-easyui-1.3.1 chm API下载

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery-easyui-1.3.1向配置了detailview的datagrid无法添加数据行

评论(1)Web开发网
阅读(954)喜欢(0)easyui开发技巧