话不多gang,先上代码,将以下三个属性插入主网格的初始化参数中:

        view : detailview,    //1
detailFormatter : function(index, row) { //2
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow : function(index, row) { //3
//首先创建子网格你得有容器
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
//这步是将此容器属性赋给一个外部变量
myddv=ddv;
//设置当打开另一个子网格时,折叠上一个
var rows = $('#singlechoice_datagrid').datagrid('getRows');
$.each(rows,function(i,k){
//获取当前所有展开的子网格
var expander = $('#singlechoice_datagrid').datagrid('getExpander',i);
if(expander.length && expander.hasClass('datagrid-row-collapse')){
if(k.id != row.id){
//折叠上一次展开的子网格
$('#singlechoice_datagrid').datagrid('collapseRow',i);
}
}
});
//子网格初始化参数
ddv.datagrid({
url : 'checkAnswer?id='
+ row.id,
fitColumns : true,
singleSelect : true,
checkbox : true,
height : 'auto',
columns : [ [{
field : 'options',
title : '选项内容',
align : 'center',
width : 200
},{
field : 'answer',
title : '选项对错',
align : 'center',
width : 200,
formatter : function(
value,
row,
index) {
if (value == 1) {
return "正确";
} else {
return "错误";
}
}
} ] ],
toolbar:[
{
text:'新增选项',
iconCls:'icon-add', //小图标
handler:function(){
$('#myform').form('clear'); //重置表单数据
flag="add";
$('#answer').combobox('select',0);
$('#itemId').val(row.id); //传递存储答案需要的相关数据
$('#kcid').val(row.konw.course.id);
$('#knowid').val(row.konw.id);
$('#mydialog').dialog({ //动态生成表头
title:'新增选项',
});
$('#mydialog').dialog('open');
}
},{
text:'修改选项',
iconCls:'icon-edit',
handler:function(){
flag="edit";
var arr = ddv.datagrid('getSelections'); //返回选中记录
//判断是否选择一条记录或多条或未选
if(arr.length == 0){
$.messager.show({
title:'提示信息!',
msg:'您还未选择要修改的数据!每次只能修改一条数据哟!',
height:180,
width:220
});
}else if(arr.length != 1){
$.messager.show({
title:'提示信息!',
msg:'每次只能选择一条数据进行修改!',
height:180,
width:220
});
}else{
$('#myform').form('clear');
$('#mydialog').dialog({ //动态生成表头
title:'修改选项',
});
$('#mydialog').dialog('open'); //打开窗口
//重写数据
$('#myform').form('load',{
itemId:arr[0].item.id,
answerid:arr[0].id,
options:arr[0].options,
answer:arr[0].answer,
course:arr[0].know.course.id,
know:arr[0].know.id,
iden:arr[0].item.iden
});
}
}
},{
text:'删除选项',
iconCls:'icon-remove',
handler:function(){
var arr = ddv.datagrid('getSelections');
if(arr.length <= 0){
$.messager.show({
title:'提示信息!',
msg:'至少选择一条数据进行删除',
height:180,
width:220
});
}else{
$.messager.confirm('提示信息','确认删除?',function(r){
if(r){
//批量删除
var ids = '';
for(var i = 0;i < arr.length;i++){
ids += arr[i].id+',';
}
ids = ids.substring(0 , ids.length - 1);
$.post('delete',{ids:ids},function(result){
//1.刷新数据表格
ddv.datagrid('reload');
//2.清空idField
ddv.datagrid('unselectAll');
});
}else{
return;
}
});
}
}
}
],
onResize : function() {
$('#singlechoice_datagrid').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess : function() {
setTimeout(function() {
$('#singlechoice_datagrid').datagrid('fixDetailRowHeight',index);
}, 0);
}
});
$('#singlechoice_datagrid').datagrid('fixDetailRowHeight', index);
}

问题来了,依照上面的操作,当我打开一个外部编辑dialog,填写完数据并提交后,如何刷新子网格呢?这时候我们只需要在外部定义一个变量,在每次打开窗口前都把此次的子网格容器赋给它,即可达到我们刷新的目的:

    var myddv; //用于储存子网格容器

编辑弹窗代码:

    $('#btn1').click(function(){
if($('#myform').form('validate')){
$.ajax({
type:'post', //提交方式
url:'optionssave', //请求地址
cache:false, //清除缓存
data:$('#myform').serialize(), //序列化表单
//dataType:'json', //返回数据格式
success:function(result){
if(result=='no'){
$.messager.alert('提示','单选题只能有一个正确答案!');
return;
}
//1.关闭窗口
$('#mydialog').dialog('close');
myddv.datagrid('reload');
}
});
}else{
$.messager.show({
title:'提示信息!',
msg:'数据验证不通过,不能保存!'
})
}
});

以上。

Easyui datagrid扩展子网格detailview增删改查详解的更多相关文章

  1. 【ASP.NET MVC】jqGrid 增删改查详解

    1   概述 本篇文章主要是关于JqGrid的,主要功能包括使用JqGrid增删查改,导入导出,废话不多说,直接进入正题. 2   Demo相关 2.1   Demo展示 第一部分 第二部分 2.2 ...

  2. iOS CoreData 增删改查详解

    最近在学习CoreData, 因为项目开发中需要,特意学习和整理了一下,整理出来方便以后使用和同行借鉴.目前开发使用的Swift语言开发的项目.所以整理出来的是Swift版本,OC我就放弃了. 虽然S ...

  3. C# 数据操作系列 - 15 SqlSugar 增删改查详解

    0. 前言 继上一篇,以及上上篇,我们对SqlSugar有了一个大概的认识,但是这并不完美,因为那些都是理论知识,无法描述我们工程开发中实际情况.而这一篇,将带领小伙伴们一起试着写一个能在工程中使用的 ...

  4. sed 增删改查详解以及 sed -i原理

    我为什么要详细记录sed命令:     sed 擅长取行.工作中三剑客使用频率最高,本篇文章将对sed命令常用的 增,删,改,查 进行详细讲解,以备以后工作中遗忘了查询,sed命令是作为运维人员来说, ...

  5. Yii2.0数据库操作增删改查详解

    1.简单查询: one(): 根据查询结果返回查询的第一条记录. all(): 根据查询结果返回所有记录. count(): 返回记录的数量. sum(): 返回指定列的总数. average():  ...

  6. java基础: ArrayList集合应用, ArrayList增删改查详解,综合java基础实现学生管理系统,

    1.ArrayList 集合和数组的区别 : 共同点:都是存储数据的容器 不同点:数组的容量是固定的,集合的容量是可变的 1.1 -ArrayList的构造方法和添加方法 public ArrayLi ...

  7. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  8. 【MVC+EasyUI实例】对数据网格的增删改查(下)

    前言 继上文对网格加载数据,本文主要阐述对数据增删改的实现. 一.js代码 function Add() { $("#dlg").dialog('open'); $("# ...

  9. 【MVC+EasyUI实例】对数据网格的增删改查(上)

    前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...

随机推荐

  1. MySQL(6)---变量

    MySQL(6)-变量 这里学习变量主要是为后面学习存储过程和函数做铺垫. 变量的分类 系统变量: 全局变量 会话变量 自定义变量: 用户变量 局部变量 一.系统变量 1.概述 说明:变量由系统定义, ...

  2. Modbus RTU通信协议详解以及与Modbus TCP通信协议之间的区别和联系

    Modbus通信协议由Modicon公司(现已经为施耐德公司并购,成为其旗下的子品牌)于1979年发明的,是全球最早用于工业现场的总线规约.由于其免费公开发行,使用该协议的厂家无需缴纳任何费用,Mod ...

  3. 为什么 WPF 的 Main 方法需要标记 STAThread 。

    在编写 WPF 程序时,会发现 Main 方法上方会标记 [STAThread] . 作用:STAThread 标记主线程,也就是 UI 线程是 STA 线程模型. 1 什么是 STA ? 与 STA ...

  4. 百度Sitemap生成器

    今天用了两个小时, 为无限影视(https://www.88tv.org)开发了一个小工具, 用来生成baidu的sitemap.  方便用. 因为该电影站的视频内容详情网页的ID是自增长的,所以可以 ...

  5. Python超详细的字符串用法大全

    字符串拼接 实际场景:把列表中的数据拼接成一个字符串 解决方案:使用 str.join() 方法 >>> li = ['cxk', 'cxk', 'kk', 'caibi'] > ...

  6. MySQL学习——操作视图

    MySQL学习——操作视图 摘要:本文主要学习了使用DDL语句操作视图的方法. 了解视图 是什么 视图是从一个.多个表或者视图中导出的表,包含一系列带有名称的数据列和若干条数据行. 特点 视图不是数据 ...

  7. git安装和项目上传到GitHub

    重装系统后,Git安装也要来重来 下载 国内下载地址:https://npm.taobao.org/mirrors/git-for-windows 安装忽略 生成密钥 输入然后都是下一步,生成密钥,生 ...

  8. JS基础语法---冒泡顺序

    冒泡排序: 把所有的数据按照一定的顺序进行排列(从小到大,从大到小) 1. 画图帮助理解如下: 2. 从小到大排序: var arr = [10, 0, 100, 20, 60, 30]; //循环1 ...

  9. 962. Maximum Width Ramp

    本题题意: 在数组中,找到最大的j-i,使得i<j and A[i] <= A[j] 思路: 维持一个递减的栈,遇到比栈顶小的元素,进栈: 比大于等于栈顶的元素-> 找到栈中第一个小 ...

  10. ListView详细介绍与使用

    前言介绍: 关于 ListView 我们大家都应该是非常的熟悉了,在 Android 开发中是经常用到的,今天就再来回顾一下,ListView 的使用方法,和一些需要优化注意的地方,还有日常开发过程中 ...