一，效果图。

二，源代码。

<!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. codeforces 557D. Vitaly and Cycle 二分图染色

    题目链接 n个点, m条边, 问最少加几条边可以出现一个奇环, 在这种情况下, 有多少种加边的方式. 具体看代码解释 #include<bits/stdc++.h> using names ...

  2. C# Convert an enum to other type of enum

    Sometimes, if we want to do convert between two enums, firstly, we may think about one way: var myGe ...

  3. MyEclipse 8.5整合Git，并在Github上发布项目(转)

    下载Eclipse的git插件——EGit.下载网址http://download.eclipse.org/egit/updates-1.3/org.eclipse.egit-updatesite-1 ...

  4. Dijkstra算法详解

    1.dijkstra算法简介 Dijkstra算法是由E.W.Dijkstra于1959年提出,又叫迪杰斯特拉算法,它应用了贪心算法模式,是目前公认的最好的求解最短路径的方法.算法解决的是有向图中单个 ...

  5. SQVI和SAP查询QUERY的区别和使用注意事项

    SQVI.SAP查询QUERY都适用于简单的表连接数据查询,但都不能打包传输到PRD,不同环境需要重复创建.可以生成报表程序供T-CODE调用,用se93指定事务码和程序名称. 区别1-权限: SQV ...

  6. C++模板：ST算法

    //初始化 void init_rmq(int n){ for(int i=0;i<n;i++)d[i][0]=a[i]; for(int j=1;(1<<j)<=n;j++) ...

  7. 权限控制框架Spring Security 和Shiro 的总结

    关于权限控制,一开始感觉比较难,后来先是接触了Spring Security 学起来也比较吃力,再是学习了Shiro,感觉简单很多. 总体来说这些框架,主要做了两个事情 Authentication: ...

  8. js动态加载控件jsp页面

    例子1:(具体参照drp中的flow_card_add.jsp)<script>    var rowIndex = 0;     function addOneLineOnClick() ...

  9. Warning: Unable to send packet: Error with PF_PACKET send() [11]: Message too long (errno = 90)

    今天在使用tcpreplay重放流量时,发现有的数据包没有发送成功: Warning: Unable to send packet: Error with PF_PACKET send() [215] ...

  10. How many prime numbers（求素数个数）

    How many prime numbers Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...