zoukankan      html  css  js  c++  java
  • 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,
                                            220
                                         });
                                 }else if(arr.length != 1){ 
                                     $.messager.show({
                                        title:'提示信息!',
                                        msg:'每次只能选择一条数据进行修改!',
                                        height:180,
                                        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,
                                    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:'数据验证不通过,不能保存!'
                })
            }    
        });

    以上。

  • 相关阅读:
    ASP.NET Core搭建多层网站架构【6-注册跨域、网站核心配置】
    ASP.NET Core搭建多层网站架构【5-网站数据库实体设计及映射配置】
    ASP.NET Core搭建多层网站架构【4-工作单元和仓储设计】
    ASP.NET Core搭建多层网站架构【3-xUnit单元测试之简单方法测试】
    极限编程核心价值:勇气(Courage)
    极限编程核心价值:反馈(Feedback)
    极限编程核心价值:沟通(Communication)
    极限编程核心价值:简单(Simplicity)
    张高兴的 Windows 10 IoT 开发笔记:串口红外编解码模块 YS-IRTM
    使用 Babylon.js 在 HTML 页面加载 3D 对象
  • 原文地址:https://www.cnblogs.com/ElPsyCongroowx/p/11166491.html
Copyright © 2011-2022 走看看