동일한 행의 다른 셀에있는 데이터를 기반으로 한 셀에서 인라인 편집을 비활성화하는 방법

저격 656

다른 셀에서 찾은 데이터를 기반으로 셀에서 인라인 편집을 활성화 / 비활성화하고 싶습니다.

포맷터 작업을 사용하여 편집 아이콘을 표시하고 있는데 이는 편집 아이콘을 클릭 할 때 해고되지 않는 것 같기 때문에 onSelectRow를 통해 검사를 수행 할 수 없음을 의미하는 것 같습니다. 다양한 질문 / 솔루션을 읽은 후 전체 열에 대한 편집을 단순히 비활성화 / 활성화 할 수 있다고 생각했지만 아래 코드에서 작동하지 않는 것 같으며 사용자처럼 보이기 때문에 취하기에는 나쁜 경로라고 생각합니다. 동일한 표시된 아이콘 내의 여러 행에서 편집 아이콘을 클릭 할 수 있으며 모든 행은 동시에 편집 가능한 것으로 표시됩니다. 가장 좋은 방법은 셀 수준 자체에서 편집을 활성화 / 비활성화하는 것 같지만 afterInsertRow 및 작업 내 onEdit을 통해 시도했지만 셀을 편집 할 수 있는지 여부에 영향을 미치지 않는 것 같습니다.

이것은 JQGrid 4.5.2, jQuery UI 1.9.1 및 jQuery 1.8.2를 사용하고 있습니다.

<script>
        $(document).ready(function() {
            var noteIcon = '<div title="Job Details" style="float:left; margin-left:5px;" class="ui-pg-div ui-inline-edit" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"><span class="ui-icon ui-icon-note"></span></div>';

            getColumnIndexByName = function(grid,columnName) {
                var cm = grid.jqGrid('getGridParam','colModel');
                for (var i=0,l=cm.length; i<l; i++) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

            jQuery.extend(jQuery.jgrid.defaults, { 
                altRows:true,
                altclass:'myAltRowClass',
                datatype: "json", 
                jsonReader: {
                    root: "ROWS", 
                    page: "PAGE", 
                    total: "TOTAL", 
                    records: "RECORDS", 
                    cell: "", 
                    id: "0"
                }, 
                emptyrecords: "No jobs to display.",
                rowList: [25,50,100], 
                viewrecords: true, 
                height: "auto", 
                loadonce: true, 
                footerrow: true, 
                loadComplete: function (data) {
                    var $self = $(this), i = getColumnIndexByName($self, 'action');

                    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > div:nth-child(1)",$self[0]).click(function(e) {
                        var tr=$(e.target,$self[0].rows).closest("tr.jqgrow");

                        e.preventDefault();
                        window.location.href = 'CenterView.cfm?table=ORDER_JOBS&ID=' + tr[0].id + '&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15';
                    });

                }, 
                colNames: [ "ID", "Delivery Type", "Service Type", "Pre-Commit", "Survey Name", "Client", "Order ID", "Job Number", "Client Reference","Internal Reference", "Type", "Product Name", "Submitted For", "Sales Coordinator", "Order Date", "Requested Date", "Standard Date", "Inbox Date", "Delivery Hold", "Pre-Commit Hold", "Analyst", "&nbsp;", "Actions" ], 
                colModel: [ 
                    { name: "id", index: "id", hidden: true, key: true }, 
                    { name: "delivery_type", index: "delivery_type", width: 70, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;External Delivery:External Delivery;Internal Data Access:Internal Data Access;Internal Delivery:Internal Delivery" } }, 
                    { name: "service_type", index: "service_type", width: 65, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                    { name: "isprecommit", index: "isprecommit", width: 50, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;false:No;true:Yes" } }, 
                    { name: "survey_name", index: "survey_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxSurvey&PICK_DMS_CENTERID=15'} }, 
                    { name: "corpname", index: "corpname", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxClient&PICK_DMS_CENTERID=15'} }, 
                    { name: "orderid", index: "orderid", width: 40, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxOrder&PICK_DMS_CENTERID=15'}, search:false }, 
                    { name: "jobsnumber", index: "jobsnumber", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'CenterView.cfm', addParam: '&table=ORDER_JOBS&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15'} }, 
                    { name: "clientref", index: "clientref", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                    { name: "internal_reference", index: "internal_reference", width: 33, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":;EOM:EOM;NO GO:NO GO" } }, 
                    { name: "survey_type", index: "survey_type", width: 35, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;2D:2D;3D:3D" } }, 
                    { name: "product_name", index: "product_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                    { name: "submitted_for", index: "submitted_for", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                    { name: "sales_coordinator", index: "sales_coordinator", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                    { name: "order_date", index: "order_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                    { name: "requested_date", index: "requested_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                    { name: "dt_standard", index: "dt_standard", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                    { name: "inbox_date", index: "inbox_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                    { name: "isdeliveryhold", index: "isdeliveryhold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } }, 
                    { name: "isprecommithold", index: "isprecommithold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } }, 
                    { name: "analyst", index: "analyst", width: 115, align: "center", sortable: true, search: true, formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;michael-19810202:Mike Hares;sara-20061004:Sara Kathleen Lampman" } }, 
                    { name: 'action', index: 'action', sortable: false, search: false, width: 25, formatter: function() { return noteIcon; } }, 
                    { name: "act", index: "act", width: 55, align: "center", sortable: false, search:false, formatter: "actions", 
                            formatoptions: {
                                keys: true, delbutton: false, afterSave: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); }, 
                                onEdit:function(rowid) {
                                    var localRowData = $(this).jqGrid('getLocalRow', rowid);

                                    if(localRowData.isprecommit == true) {
                                        // $(this).jqGrid('setColProp', 'isprecommithold', {editable:true});
                                    }
                                    else {
                                        // $(this).jqGrid('setColProp', 'isprecommithold', {editable:false});
                                        $(this).setCell(rowid,"isprecommithold","",'not-editable-cell');
                                    }
                                }
                            }
                    }
                ], 
                editurl: "Components/JobsInbox.cfc?method=SetJobUpdate&UPDATEDBY=aaron-20040630", 
                afterInsertRow: 
                    function(rowid, aData){ 
                        /*
                        if(aData.isprecommit == false) {
                            $(this).setCell(rowid,"isprecommithold","",'not-editable-cell');
                        }
                        */
                        if(aData.isdeliveryhold) {
                            $(this).setCell(rowid,"isdeliveryhold","",{"background":"#FF6A6A"});
                        }
                    }
            }); 

            $('#Jobs').jqGrid({
                url: "Components/JobsInbox.cfc?method=GetJobGrid&PICK_DMS_CENTERID=15&CFDateFormat=MM/DD/YY", 
                caption: "Jobs Inbox", 
                pager: $('#JobsPager')              
            });
            $('#Jobs').jqGrid('filterToolbar', { searchOperators: false, ignoreCase: true });
            $('#Jobs').jqGrid('navGrid', '#JobsPager', { add: false, edit: false, del: false, refresh: false });
            $('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "", buttonicon: "ui-icon-refresh", title: $.jgrid.nav.refreshtitle, onClickButton: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); } });

        });
    </script>

    <style type="text/css">
        .myAltRowClass { background-color: #ECF6FC; background-image: none; }

        /* Wrap in header cell */
        .ui-jqgrid .ui-jqgrid-htable th div {
            height:auto;
            overflow:hidden;
            padding-right:4px;
            padding-top:2px;
            position:relative;
            vertical-align:text-top;
            white-space:normal !important;
        }

        /* Wrap in table cell */
        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
            height:auto;
            vertical-align:text-top;
            padding-top:2px;
        }

        span.cellWithoutBackground {
            display:block;
            background-image:none;
            margin-right:-2px;
            margin-left:-2px;
            height:14px;
            padding:4px;
        }
    </style>
저격 656

인라인 편집 모드에서 특정 편집 가능한 행의 셀 편집 방지 에서이 다른 질문을 통해 이에 대한 기본적인 대답을 찾았습니다.

다음은 작동 코드입니다.

<script>
    $(document).ready(function() {
        var noteIcon = '<div title="Job Details" style="float:left; margin-left:5px;" class="ui-pg-div ui-inline-edit" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"><span class="ui-icon ui-icon-note"></span></div>';

        getColumnIndexByName = function(grid,columnName) {
            var cm = grid.jqGrid('getGridParam','colModel');
            for (var i=0,l=cm.length; i<l; i++) {
                if (cm[i].name===columnName) {
                    return i; // return the index
                }
            }
            return -1;
        };

        DoDeliveryHolds = function(grid) {
            var aryIDS  = $(grid).jqGrid('getDataIDs');

            if(aryIDS.length > 0) {
                // Add Ajax call to do toggle in database
                alert(aryIDS.length);
            }
        };

        // Here we set the altRows option globallly
        jQuery.extend(jQuery.jgrid.defaults, { 
            altRows:true,
            altclass:'myAltRowClass',
            datatype: "json", 
            jsonReader: {
                root: "ROWS", 
                page: "PAGE", 
                total: "TOTAL", 
                records: "RECORDS", 
                cell: "", 
                id: "0"
            }, 
            emptyrecords: "No jobs to display.",
            rowList: [25,50,100], 
            viewrecords: true, 
            height: "auto", 
            loadonce: true, 
            footerrow: true, 
            loadComplete: function (data) {
                var $self = $(this), i = getColumnIndexByName($self, 'action');

                // nth-child need 1-based index so we use (i+1) below
                $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > div:nth-child(1)",$self[0]).click(function(e) {
                    var tr=$(e.target,$self[0].rows).closest("tr.jqgrow");

                    e.preventDefault();
                    window.location.href = 'CenterView.cfm?table=ORDER_JOBS&ID=' + tr[0].id + '&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15';
                });

            }, 
            colNames: [ "ID", "Delivery Type", "Service Type", "Pre-Commit", "Survey Name", "Client", "Order ID", "Job Number", "Client Reference","Internal Reference", "Type", "Product Name", "Submitted For", "Sales Coordinator", "Order Date", "Requested Date", "Standard Date", "Inbox Date", "Delivery Hold", "Pre-Commit Hold", "Analyst", "&nbsp;", "Actions" ], 
            colModel: [ 
                { name: "id", index: "id", hidden: true, key: true }, 
                { name: "delivery_type", index: "delivery_type", width: 70, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;External Delivery:External Delivery;Internal Data Access:Internal Data Access;Internal Delivery:Internal Delivery" } }, 
                { name: "service_type", index: "service_type", width: 65, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                { name: "isprecommit", index: "isprecommit", width: 50, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;false:No;true:Yes" } }, 
                { name: "survey_name", index: "survey_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxSurvey&PICK_DMS_CENTERID=15'} }, 
                { name: "corpname", index: "corpname", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxClient&PICK_DMS_CENTERID=15'} }, 
                { name: "orderid", index: "orderid", width: 40, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxOrder&PICK_DMS_CENTERID=15'}, search:false }, 
                { name: "jobsnumber", index: "jobsnumber", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'CenterView.cfm', addParam: '&table=ORDER_JOBS&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15'} }, 
                { name: "clientref", index: "clientref", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                { name: "internal_reference", index: "internal_reference", width: 33, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":;EOM:EOM;NO GO:NO GO" } }, 
                { name: "survey_type", index: "survey_type", width: 35, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;2D:2D;3D:3D" } }, 
                { name: "product_name", index: "product_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                { name: "submitted_for", index: "submitted_for", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                { name: "sales_coordinator", index: "sales_coordinator", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} }, 
                { name: "order_date", index: "order_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                { name: "requested_date", index: "requested_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                { name: "dt_standard", index: "dt_standard", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                { name: "inbox_date", index: "inbox_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' }, 
                { name: "isdeliveryhold", index: "isdeliveryhold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } }, 
                { name: "isprecommithold", index: "isprecommithold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } }, 
                { name: "analyst", index: "analyst", width: 115, align: "center", sortable: true, search: true, formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;michael-19810202:Mike Hares;sara-20061004:Sara Kathleen Lampman" } }, 
                { name: 'action', index: 'action', sortable: false, search: false, width: 25, formatter: function() { return noteIcon; } }, 
                { name: "act", index: "act", width: 55, align: "center", sortable: false, search:false, formatter: "actions", 
                        formatoptions: {
                            keys: true, delbutton: false, afterSave: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); }
                        }
                }
            ], 
            editurl: "Components/JobsInbox.cfc?method=SetJobUpdate&UPDATEDBY=aaron-20040630", 
            afterInsertRow: 
                function(rowid, aData){ 
                    if(aData.isdeliveryhold) {
                        $(this).setCell(rowid,"isdeliveryhold","",{"background":"#FF6A6A"});
                    }
                }
        }); 

        $('#Jobs').jqGrid({
            url: "Components/JobsInbox.cfc?method=GetJobGrid&PICK_DMS_CENTERID=15&CFDateFormat=MM/DD/YY", 
            caption: "Jobs Inbox", 
            pager: $('#JobsPager')              
        });
        $('#Jobs').jqGrid('filterToolbar', { searchOperators: false, ignoreCase: true });
        $('#Jobs').jqGrid('navGrid', '#JobsPager', { add: false, edit: false, del: false, refresh: false });
        $('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "", buttonicon: "ui-icon-refresh", title: $.jgrid.nav.refreshtitle, onClickButton: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); } });
        $('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "Toggle Delivery Holds", buttonicon: "ui-icon-pencil", onClickButton: function() { var str = confirm("Toggle the Delivery Hold for all displayed Jobs?"); if(str) { DoDeliveryHolds($(this)); } } });

        var orgRowActions = $.fn.fmatter.rowactions;
        $.fn.fmatter.rowactions = function (act) {
            var $tr = $(this).closest("tr.jqgrow"),
                rid = $tr.attr("id"),
                $grid = $(this).closest("table.ui-jqgrid-btable"),
                rowData = $grid.jqGrid("getLocalRow", rid),
                isNonEditable = false,
                result; 

            // editable property of any column
            if (act === "edit" && rowData.isprecommit == false) {
                $grid.jqGrid("setColProp", "isprecommithold", {editable: false});
                isNonEditable = true;
            }
            result = orgRowActions.call(this, act);
            if (isNonEditable) {
                // reset the setting to original state
                $grid.jqGrid("setColProp", "isprecommithold", {editable: true});
            }
            return result;
        }

    });
</script>

<style type="text/css">
    .myAltRowClass { background-color: #ECF6FC; background-image: none; }

    /* Wrap in header cell */
    .ui-jqgrid .ui-jqgrid-htable th div {
        height:auto;
        overflow:hidden;
        padding-right:4px;
        padding-top:2px;
        position:relative;
        vertical-align:text-top;
        white-space:normal !important;
    }

    /* Wrap in table cell */
    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height:auto;
        vertical-align:text-top;
        padding-top:2px;
    }

    span.cellWithoutBackground {
        display:block;
        background-image:none;
        margin-right:-2px;
        margin-left:-2px;
        height:14px;
        padding:4px;
    }
</style>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관