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增加数据,则无法添加数据,如下图所示
使用jquery-1.4.2.min.js版本,则配置了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无法添加数据行