一，效果图。

二，源代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Build CRUD Application with edit form in expanded row details - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
</head>
<body>
<h2>Edit form in expanded row details</h2>
<p>Click the expand button to expand a detail form.</p>

<table id="dg" title="My Users" style="width:700px;height:250px"
url="http://www.jeasyui.com/demo/main/get_users.php"
toolbar="#toolbar" pagination="true"
fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destroy</a>
</div>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'http://www.jeasyui.com/demo/main/show_form.php?index='+index,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
function saveItem(index){
var row = $('#dg').datagrid('getRows')[index];
var url = row.isNewRecord ? 'http://www.jeasyui.com/demo/main/save_user.php' : 'http://www.jeasyui.com/demo/main/update_user.php?id='+row.id;
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
data = eval('('+data+')');
data.isNewRecord = false;
$('#dg').datagrid('collapseRow',index);
$('#dg').datagrid('updateRow',{
index: index,
row: data
});
}
});
}
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}
function destroyItem(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
var index = $('#dg').datagrid('getRowIndex',row);
$.post('http://www.jeasyui.com/demo/main/destroy_user.php',{id:row.id},function(){
$('#dg').datagrid('deleteRow',index);
});
}
});
}
}
function newItem(){
$('#dg').datagrid('appendRow',{isNewRecord:true});
var index = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('expandRow', index);
$('#dg').datagrid('selectRow', index);
}
</script>
<style type="text/css">
form{
margin:0;
padding:0;
}
.dv-table td{
border:0;
}
.dv-table input{
border:1px solid #ccc;
}
</style>

</body>
</html>

application（expand）--easyui的更多相关文章

  1. Application（basic）----Easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  3. NLayerAppV3-Infrastructure（基础结构层）的Data部分和Application（应用层）

    回顾:NLayerAppV3是一个使用.net 2.1实现的经典DDD的分层架构的项目. NLayerAppV3是在NLayerAppV2的基础上,使用.net core2.1进行重新构建的:它包含了 ...

  4. （一）EasyUI 使用——基本概念

    1. EasyUI是什么 EasyUI是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的WEB[后台前端]JavaScript现成的组件库. 2.  JavaScript,AJAX, ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

    系列目录 前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...

  6. （转）easyui datagrid 部分参数说明

    easyui datagrid 部分参数 数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数 ...

  7. 表单（下）-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  8. 表单（中）-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

  9. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

随机推荐

  1. java 写文件解析

    import java.io.File; import java.io.FileOutputStream; import java.io.*; public class FileTest { publ ...

  2. chroot命令

    CHROOT就是Change Root,也就是改变程序执行时所参考的根目录位置.通过chroot机制来更改某个进程所能看到的根目录,即将某进程限制在指定目录中,保证该进程只能对该目录及其子目录的文件有 ...

  3. wireshark 包分析命令

    1.查看原地址过滤包命令: ip.src ==192.168.1.1 2.查看目的地址过滤包:ip.dst == 192.168.1.1 3.关键字 eq 等于 "==" ,and ...

  4. IOS 特定于设备的开发：UIDevice

    UIDevice类展示了一些关键的特定于设备的属性,包括使用的iPhone ,Ipad或iPod Touch型号.设备名称.以及OS名称和版本. 他是一种一站式解决方案,用于提取出某些系统详细信息.每 ...

  5. Push segues can only be used when the.....

    刚刚遇到的两个错误,. 1, Terminating app due to uncaught exception'NSGenericException', reason: 'Push segues c ...

  6. 贫血模型or领域模型

    参考: http://lifethinker.iteye.com/blog/283668 http://www.uml.org.cn/mxdx/200907132.asp http://www.itu ...

  7. HDU 1290 献给杭电五十周年校庆的礼物

    题解:http://www.cnblogs.com/forever97/p/3522238.html #include <cstdio> int main() { int n; while ...

  8. makefile 里面 := 和 = 的区别

    此文版权属于作者所有,任何人.媒体或者网站转载.借用都必须征得作者本人同意! 参考:What is the colon equals sign ( := ) in makefiles? Makefil ...

  9. 框架技术--Spring自动加载配置

    今天项目中遇到一个问题,一个方法在服务启动后会自动被执行,查看了下配置未发现有定时的配置.但是后来发现是spring配置了启动时默认加载了方法. 代码: <?xml version=" ...

  10. SQL Server 中 RAISERROR 的用法(转)

    在存储过程中进程会处理一些逻辑性的错误,如:将RMB转换为USD时,没有查询到想要的汇率 这个时候最好在存储过程中抛个异常,方便自己查找错误信息... 其语法如下: RAISERROR ( { msg ...