施用easyUI展开行详细编辑form创建CRUD应用

使用easyUI展开行详细编辑form创建CRUD应用

@author YHC

当切换datagrid的view 到 'detailview',用户可以展开一行显示一些行的详细在行下面,这个功能允许你提供一些合适的layout 到里面,编辑form将放置到详细行panel中,在这个教程中,我们使用datagrid 组件通过编辑form减小占据空间.

查看 Demo

步骤1:使用HTML标记创建 DataGrid

function cancelItem(index){      var row = $('#dg').datagrid('getRows')[index];      if (row.isNewRecord){          $('#dg').datagrid('deleteRow',index);      } else {          $('#dg').datagrid('collapseRow',index);      }  } 

当取消编辑动作,如果是新行而且还没有保存,直接删除行,其他折叠行.

下载EasyUI示例:easyui-crud-demo.zip