一，效果图。

二，源代码。

<!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. android中像素单位dp、px、pt、sp的比较

    dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖 ...

  2. VS2008一个小bug

    vc工程的项目属性里MFC的使用有三项:默认“使用标准windows库”,修改为“在静态库中使用MFC”,然后再改回默认,项目变化如下: 今天的工程在改过后编译不能通过,手工把0改回2(1改回3)后O ...

  3. android 同时发送几条通知

     android 同时发送几条通知 ======= 下面是转载的文章.  同时发送几条通知把ID添加,接收的时候找到这个id就可以出来多条了. 还是不太明白或者编码实现不了的可以加我QQ. 博客很少上 ...

  4. BZOJ 1089 严格n元树 (递推+高精度）

    题解:用a[i]表<=i时有几种树满足度数要求,那么这样就可以递归了,a[i]=a[i-1]^n+1.n个节点每个有a[i-1]种情况,那么将其相乘,最后加上1,因为深度为0也算一种.那么答案就 ...

  5. HDU 2136 Largest prime factor

    题目大意:求出比给出数小的互质的质数个数. 题解:直接用筛法求素数,稍微改编一下,将原先的布尔数组变为数组用来记录信息就可以了. 注意点:大的数组定义要放在程序的开头,不要放在main里面,不然会栈溢 ...

  6. Flex LinkButton鼠标划过出现下划线

    在LinkButton中 textDecoration属性设置label的是否有下划线装饰,属性值分为"none","underline" 代码如下------ ...

  7. Windows Server 2012 安装dll到GAC

    使用Windows管理员打开PowerShell: 运行以下命令: Set-location "c:\tools\gac" [System.Reflection.Assembly] ...

  8. 2.4.5 用NPOI操作EXCEL－－插入图片

    我们知道,在Excel中是可以插入图片的.操作菜单是“插入->图片”,然后选择要插入图片,可以很容易地在Excel插入图片.同样,在NPOI中,利用代码也可以实现同样的效果.在NPOI中插入图片 ...

  9. 工具篇-MAT（Memory Analyzer Tool）

    --- layout: post title: 工具篇-MAT(Memory Analyzer Tool) description: 让内存泄漏无所遁形 2015-10-08 category: bl ...

  10. SqlBulkCopy的使用

    1.问题:导入大数据量到数据库,用我们普通的SqlHelper来做是每插入一条都是打开连接关闭连接,这样太慢,因此我们会想到让SqlConnection一直打开直到所有数据都插入完成再关闭连接.但是根 ...