2019-11-25 easyUI datagrid嵌套, 包含可编辑控件

<div id="toolbar">
    <div style="float:right">
        <a id="btnTest" href="javascrpt:void(0)" onclick="javascript: void (0);"></a>
        <a id="btnEdit" href="javascript:void(0)" class="easyui-linkbutton c1" plain="true" data-options="iconCls:‘fa fa-pencil‘,@ViewBag.Actions["Edit"]">下发</a>
        <a id="btnAll" href="javascript:void(0)" class="easyui-linkbutton c2" plain="true" data-options="iconCls:‘fa fa-bars‘,@ViewBag.Actions["All"]">批量下发</a>
    </div>
</div>
<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="dglist" title="待下发列表"></table>
</div>
<script src="~/Areas/Sys/Scripts/flow/list.js"></script>
<script src="~/Areas/Sys/Scripts/flow/datagrid-detailview.js"></script>
<script src="~/Areas/Sys/Scripts/flow/search.js"></script>
<script src="~/Scripts/dialog.js"></script>
<script src="~/Areas/Mms/Scripts/utils.js"></script>
<script type="text/javascript">

    var currentChildRow = undefined;
    //var gradeDict = [
    //    { "value": "1", "text": "优秀" },
    //    { "value": "2", "text": "良好" },
    //    { "value": "3", "text": "及格" },
    //    { "value": "1", "text": "不合格" }];

    $.extend($.fn.datagrid.methods, {
        editCell: function (jq, param) {
            return jq.each(function () {
                var opts = $(this).datagrid(‘options‘);
                var fields = $(this).datagrid(‘getColumnFields‘, true).concat($(this).datagrid(‘getColumnFields‘));
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }
                $(this).datagrid(‘beginEdit‘, param.index);
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });

    var editIndex = undefined;
    function endEditing() {

        if (editIndex == undefined) { return true }
        var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
        if (ddv.datagrid(‘validateRow‘, editIndex)) {
            ddv.datagrid(‘endEdit‘, editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field) {
        if (endEditing()) {
            var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
            ddv.datagrid(‘selectRow‘, index)
                .datagrid(‘editCell‘, { index: index, field: field });
            editIndex = index;
        }
    }

    function onAfterEdit() {
        $(‘.zch-linkbutton-submit‘).linkbutton({
            text: ‘审核‘,
            iconCls: ‘fa fa-pencil‘
        });
        $(‘.zch-linkbutton-goback‘).linkbutton({
            text: ‘回退‘,
            iconCls: ‘fa fa-pencil‘
        });
    }

    $(function () {
        $("#dglist").datagrid({
            view: detailview,
            url: ‘/Mms/WorknodeAuditQuota/GetAuditQuotaGroupAsync?workflowid=@ViewBag.WorkflowId‘,
            //queryParams: queryParams,
            idField: ‘Id‘,
            iconCls: ‘fa fa-list‘,
            singleSelect: false,
            rownumbers: true,
            pagination: true,
            autoRowHeight: true,
            border: true,
            toolbar: ‘#toolbar‘,
            pageSize: 30,
            pageList: [30, 60, 90],
            animate: true,
            fitColumns: false,
            fit: true,
            columns: [[
                { title: ‘Id‘, field: ‘Id‘, width: 280, hidden: ‘true‘ },
                { title: ‘指标名称‘, field: ‘QuotaName4‘, width: 1280, search: { type: ‘text‘ } },
                { title: ‘审核部门‘, field: ‘AssignDept‘, width: 280, search: { type: ‘text‘ }, hidden: ‘true‘ },
                { title: ‘下发部门‘, field: ‘DeliveryDept‘, width: 280, search: { type: ‘text‘ }, hidden:‘true‘ },
                { title: ‘指标分值‘, field: ‘Score‘, width: 100, hidden: ‘true‘},
                { title: ‘权重‘, field: ‘Weight‘, width: 100, hidden: ‘true‘},
                { title: ‘评分‘, field: ‘Grade‘, width: 100, hidden: ‘true‘},
                { title: ‘进度‘, field: ‘Progress‘, width: 100, hidden: ‘true‘ },
                { title: ‘附件‘, field: ‘Appendix‘, width: 280, hidden: ‘true‘ },
                { title: ‘截止日期‘, field: ‘Deadline‘, width: 200, search: { type: ‘datetime‘, mode: ‘range‘ }, hidden: ‘true‘},
                { title: ‘备注‘, field: ‘Comments‘, width: 100, search: { type: ‘text‘ }, hidden: ‘true‘},
            ]],
            onLoadError: function (e) { //当用户登录超时，绑定数据发生
                messager.httpError(e.responseText);
            },
            rowStyler: function (index, row) {
                if (row.IsBack && row.IsBack == ‘1‘) {
                    return ‘color:#551A8B;‘;
                }
            },
            detailFormatter: function (index, row) {
                return ‘<div style="padding:2px;position:relative;"><table class="ddv"></table></div>‘;
            },
            onExpandRow: function (index, row) {

                currentChildRow = index;
                var ddv = $(this).datagrid(‘getRowDetail‘, index).find(‘table.ddv‘);
                ddv.datagrid({
                    url: ‘/Mms/WorknodeAuditQuota/GetAuditQuotaGroupContentAsync?workflowid=@ViewBag.WorkflowId&mainid=‘+row["MainId"],
                    idField: ‘Id‘,
                    fitColumns: true,
                    singleSelect: true,
                    rownumbers: true,
                    loadMsg: ‘‘,
                    height: ‘auto‘,
                    pagination: true,
                    pageSize: 10,
                    pageList: [10],
                    onClickCell: onClickCell,
                    onAfterEdit: onAfterEdit,
                    columns: [[
                        { field: ‘ck‘, checkbox: true },
                        { title: ‘Id‘, field: ‘Id‘, width: 280, hidden: ‘true‘ },
                        { title: ‘指标名称‘, field: ‘QuotaName4‘, width: 280, search: { type: ‘text‘ }, hidden: ‘true‘ },
                        { title: ‘审核部门‘, field: ‘AssignDept‘, width: 280, search: { type: ‘text‘ }, hidden: ‘true‘ },
                        { title: ‘下发部门‘, field: ‘DeliveryDept‘, width: 180, search: { type: ‘text‘ } },
                        { title: ‘指标分值‘, field: ‘Score‘, width: 100, hidden: ‘true‘  },
                        { title: ‘权重‘, field: ‘Weight‘, width: 50, hidden: ‘true‘  },
                        { title: ‘进度‘, field: ‘Progress‘, width: 100, hidden: ‘true‘ },
                        {
                            title: ‘附件‘, field: ‘Appendix‘, width: 280,
                            formatter: function formatAppendix(val, row, index) {
                                var str = "";

                                var urls = row["Appendix"];
                                var list = urls.split(",");
                                for (var i = 0; i < list.length-1; i++){
                                    var url = list[i];
                                    url = url.substring(1, url.length - 1);

                                    let num = url.lastIndexOf(‘/‘) + 1
                                    var name = url.substring(num);

                                    var link = ‘<a style = "text-decoration: underline ; color :blue;" href=‘ + url + ‘>‘ + (i+1) + ‘. ‘ + name + ‘</a><br>‘;
                                    str += link;
                                }

                                return str;
                            }
                        },
                        { title: ‘截止日期‘, field: ‘Deadline‘, width: 100, hidden: ‘true‘ },
                        { title: ‘情况说明‘, field: ‘Illustration‘, width: 180 },
                        //{
                        //    title: ‘评分‘, field: ‘Grade‘, width: 80,
                        //    editor: {
                        //        type: ‘numberspinner‘,
                        //        options: {
                        //            required: true,
                        //            min: 0,
                        //            max:row["Score"],
                        //            precision: 1,
                        //            increment: 0.1,
                        //        }
                        //    }
                        //},
                        //{
                        //    title: ‘评分‘, field: ‘Grade‘, width: 80,
                        //    editor: {
                        //        type: ‘combobox‘,
                        //        options: {
                        //            data: [{ "value": "1", "text": 1 },
                        //                { "value": "2", "text": 2 },
                        //                { "value": "3", "text": 3 },
                        //                { "value": "1", "text": "不合格" }],
                        //            valueField: "value",
                        //            textField: "text",
                        //            panelHeight: ‘auto‘
                        //        }
                        //    }
                        //},
                        {
                            title: ‘评分‘, field: ‘GradeLevel‘, width: 80,
                            editor: {
                                type: ‘combobox‘,
                                options: {
                                    data: [{ "value": "优秀", "text": "优秀" },
                                    { "value": "良好", "text": "良好" },
                                    { "value": "合格", "text": "合格" },
                                    { "value": "不合格", "text": "不合格" }],
                                    valueField: "value",
                                    textField: "text",
                                    panelHeight: ‘auto‘
                                },                                
                            },
                            //formatter: function (value, row) {
                            //    return row.text;
                            //}
                        },
                        { title: ‘扣分原因‘, field: ‘DeductReason‘, width: 300, editor: ‘text‘ },
                        { title: ‘操作‘, field: ‘Action‘, width: 150, formatter:formatAction },
                    ]],
                    onResize: function () {
                        $(‘#dglist‘).datagrid(‘fixDetailRowHeight‘, index);
                    },
                    onLoadSuccess: function () {
                        setTimeout(function () {
                            $(‘#dglist‘).datagrid(‘fixDetailRowHeight‘, index);
                            //$(‘.zch-numberspinner‘).numberspinner({
                            //    editable: true,
                            //    width:80,
                            //});
                            $(‘.zch-linkbutton-submit‘).linkbutton({
                                text: ‘审核‘,
                                iconCls: ‘fa fa-pencil‘
                            });
                            $(‘.zch-linkbutton-goback‘).linkbutton({
                                text: ‘回退‘,
                                iconCls: ‘fa fa-pencil‘
                            });
                        }, 0);
                    },
                    onDblClickRow: function (index, row) {

                        //var id = eval(‘row.‘ + ‘Id‘);
                        //var requestid = eval(‘row.RequestId‘);
                        //var catalogid = $.request("catalogId");

                        //$.getScript(‘/Areas/Sys/Scripts/flow/info.js‘, function () {
                        //    $show = new flowShow();
                        //    $show.show(id, {
                        //        catalogId: catalogid,
                        //        frameUrl: null,
                        //        formUrl: null,
                        //        //params: params,
                        //        requestid: requestid,
                        //        callback: function () { $("#dglist").datagrid("reload"); }
                        //    });
                        //});
                    },
                });

                $(‘#dglist‘).datagrid(‘fixDetailRowHeight‘, index);
            }
        });
    });

    //$("#toolbar").searchBind({ typeWidth: 110 });


    $("#btnEdit").click(function () {
        debugger;
        var row = $(‘#dglist‘).datagrid(‘getSelected‘);
        var requestid = eval(‘row.RequestId‘);
        //$list.options.requestid = requestid;
        //$list.open();
    });

    $("#btnAll").click(function () {
        //$list.op({
        //    url: ‘/Mms/WorknodeAuditQuota/SubmitAll‘,
        //    params: { xfjg: ‘办结‘ },
        //    callback: function (data) {

        //        $("#dglist").datagrid(‘clearChecked‘);
        //        if (data.result == "ok") {
        //            $(‘#dglist‘).datagrid(‘reload‘);
        //            $.messager.alert(‘提示‘, ‘操作成功！‘, ‘info‘);
        //        }
        //        else {
        //            messager.httpError(data);
        //        }
        //    }
        //});
    });

    function formatAction(value,row,index) { 
        var s = ‘<a class="zch-linkbutton-submit easyui-linkbutton c1" href="javascript:void(0)" onclick="OnSubmit(this)" style="margin:0px 5px 0px 5px;">‘;
        var g = ‘<a class="zch-linkbutton-goback easyui-linkbutton c5" href="javascript:void(0)" onclick="OnGoBack(this)" style="margin:0px 5px 0px 5px;">‘; 
        return s + ‘&nbsp&nbsp&nbsp&nbsp‘ + g;
    }

    function getRowIndex(target) {
        var tr = $(target).closest(‘tr.datagrid-row‘);
        return parseInt(tr.attr(‘datagrid-row-index‘));
    }

    function OnSubmit(target) {

        var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
        ddv.datagrid(‘endEdit‘, getRowIndex(target));

        var rows = ddv.datagrid(‘getRows‘);
        var index = getRowIndex(target);
        var row = rows[index];

        debugger;        

        $.ajax({
            url: "/Mms/WorknodeAuditQuota/SubmitAudit",
            data: {
                //QuotaName3: row.QuotaName3,
                //QuotaName4: row.QuotaName4,
                //Criteria4: row.Criteria4,
                RequestId: row.RequestId,
                Id: row.Id,
                MainId: row.MainId,
                AssignDept: row.AssignDept,
                Progress: row.Progress,
                Score: row.Score,
                //Appendix: row.Appendix,
                Deadline: row.Deadline,
                Comments: row.Comments,
                DeliveryDept: row.DeliveryDept,
                Grade: row.Grade,
                Weight: row.Weight,
                ExecuteDept: row.ExecuteDept,
                Illustration: row.Illustration,
                DeductReason:row.DeductReason,
                WorkflowId: ‘@ViewBag.WorkflowId‘,
            },
            success: function (data) {
                
                var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
                ddv.datagrid(‘reload‘);
            },
            //error: function () {
            //    messager.httpError(e.responseText);
            //}
        })
    }

    function OnGoBack(target) {

        var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
        ddv.datagrid(‘endEdit‘, getRowIndex(target));

        var rows = ddv.datagrid(‘getRows‘);
        var index = getRowIndex(target);
        var row = rows[index];

        $.ajax({
            url: "/Mms/WorknodeAuditQuota/GoBackAudit",
            data: {
                QuotaName3: row.QuotaName3,
                QuotaName4: row.QuotaName4,
                Criteria4: row.Criteria4,
                RequestId: row.RequestId,
                Id: row.Id,
                MainId: row.MainId,
                AssignDept: row.AssignDept,
                Progress: row.Progress,
                Score: row.Score,
                Appendix: row.Appendix,
                Deadline: row.Deadline,
                Comments: row.Comments,
                DeliveryDept: row.DeliveryDept,
                Grade: row.Grade,
                Weight: row.Weight,
                ExecuteDept: row.ExecuteDept,
                Illustration: row.Illustration,
                DeductReason:row.DeductReason,
                WorkflowId: ‘@ViewBag.WorkflowId‘,
            },
            success: function (data) {
                debugger;
                
                var ddv = $(‘#dglist‘).datagrid(‘getRowDetail‘, currentChildRow).find(‘table.ddv‘);
                ddv.datagrid(‘reload‘);
            }

        })
    }
</script>