Easyui datagrid扩展子网格detailview增删改查详解
话不多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增删改查详解的更多相关文章
- 【ASP.NET MVC】jqGrid 增删改查详解
1 概述 本篇文章主要是关于JqGrid的,主要功能包括使用JqGrid增删查改,导入导出,废话不多说,直接进入正题. 2 Demo相关 2.1 Demo展示 第一部分 第二部分 2.2 ...
- iOS CoreData 增删改查详解
最近在学习CoreData, 因为项目开发中需要,特意学习和整理了一下,整理出来方便以后使用和同行借鉴.目前开发使用的Swift语言开发的项目.所以整理出来的是Swift版本,OC我就放弃了. 虽然S ...
- C# 数据操作系列 - 15 SqlSugar 增删改查详解
0. 前言 继上一篇,以及上上篇,我们对SqlSugar有了一个大概的认识,但是这并不完美,因为那些都是理论知识,无法描述我们工程开发中实际情况.而这一篇,将带领小伙伴们一起试着写一个能在工程中使用的 ...
- sed 增删改查详解以及 sed -i原理
我为什么要详细记录sed命令: sed 擅长取行.工作中三剑客使用频率最高,本篇文章将对sed命令常用的 增,删,改,查 进行详细讲解,以备以后工作中遗忘了查询,sed命令是作为运维人员来说, ...
- Yii2.0数据库操作增删改查详解
1.简单查询: one(): 根据查询结果返回查询的第一条记录. all(): 根据查询结果返回所有记录. count(): 返回记录的数量. sum(): 返回指定列的总数. average(): ...
- java基础: ArrayList集合应用, ArrayList增删改查详解,综合java基础实现学生管理系统,
1.ArrayList 集合和数组的区别 : 共同点:都是存储数据的容器 不同点:数组的容量是固定的,集合的容量是可变的 1.1 -ArrayList的构造方法和添加方法 public ArrayLi ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- 【MVC+EasyUI实例】对数据网格的增删改查(下)
前言 继上文对网格加载数据,本文主要阐述对数据增删改的实现. 一.js代码 function Add() { $("#dlg").dialog('open'); $("# ...
- 【MVC+EasyUI实例】对数据网格的增删改查(上)
前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...
随机推荐
- 常用regex正则表达式
[单个]字符匹配 任意字符:表示由任意字符组成 \\:匹配一个'\' \n:匹配换行 \t:匹配制表符 [单个]字符集(可以从里面任选一个字符) [abc]:可以是字母abc中任意一个 [^abc]: ...
- 转Ubuntu 16.04 创建无线热点
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ac_dao_di/article/deta ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 如何让Python爬虫一天抓取100万张网页
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王平 源自:猿人学Python PS:如有需要Python学习资料的 ...
- Typescript基础(4)——接口
前言 今天继续typescript的学习,开始ts接口部分的学习. 接口 接口的理解 首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...
- IDEA构建spring项目
这两天使用IDEA从零构建一个spring项目,之所以说从零,是因为,我这个小白呢,之前IDEA没有碰过,spring也只是知道个名字. 因为没有文档,遇到了好些坑,把这些记录一下吧. 构建的第一步, ...
- [20191013]oracle number类型存储转化脚本.txt
[20191013]oracle number类型存储转化脚本.txt --//测试看看是否可以利用bc obase=100的输出解决问题.另外以前脚本忘记考虑尾数的四舍五入问题.--//也许编程就是 ...
- 使用Urllib下载图片
urllib下载图片 urllib3下载图片 Urllib下载图片 from urllib import request import re import os # 妹子图首页 下载首页的几张 url ...
- IDEA maven项目添加自己的jar包依赖
在pom中添加<dependency> <groupId>com.sim</groupId> <artifactId>SM-1.60</artif ...
- 【BZOJ1443】[JSOI2009]游戏Game(二分图+博弈)
BZOJ 题意: 给出一个\(n*m\)的网格,其中有一些障碍点. 现在两个人玩游戏,首先先手选定一个点,然后从后手开始轮流移动,不能移动者即输掉这次游戏. 规定不能移动到那些之前已经到过的格子上. ...