Easyui datagrid扩展子网格detailview增删改查详解
2024-08-31 15:08:48
话不多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:'数据验证不通过，不能保存！'
})
}
});
以上。
最新文章
- js动态生成选项之考试系统(一)
- processModel与ASP.NET进程模型
- Javascript中构造函数与new命令
- Linux之匹配符
- android pcm
- iOS下载使用系统字体
- coderforces719b
- 怒学三算法 POJ 2387 Til the Cows Come Home (Bellman_Ford || Dijkstra || SPFA)
- Java Concurrency - ThreadFactory, 使用工厂方法创建线程
- echarts入门，5分钟上手写ECharts的第一个图表
- Python 学习之urllib模块---用于发送网络请求，获取数据（3）
- PHP - __clone 对象克隆
- c中的可重入和不可重入函数
- 201521123105 第六周Java学习总结
- Ration Rose2003安装及破解
- HDU - 2614 dfs
- 0e开头的md5收集 --------PHP加密模块bug
- CSS3_盒子背景
- Django的安装和启动
- S型顺序遍历二叉树(c++实现)