جكغريد:هل من الممكن إجراء تغيير في الخلية عند النقر على علامة الجدولة بدلاً من الضغط على Enter؟

Question

لدي تعديل بسيط في السطر في شبكتي، وأريد تنفيذ التغيير عندما يقوم المستخدم بإغلاق مربع النص.السلوك الافتراضي لـ jqGrid يفرض على المستخدم الضغط على "Enter" لإجراء التغيير، ولكن هذا غير بديهي بالنسبة لمستخدمينا.

نص بديل http://i32.tinypic.com/e62iqh.jpg

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

لقد عملت في طريقي خلال الأحداث المقدمة، ولكن كل ذلك يحدث نتيجة لضغط المستخدم على "Enter"، وهو ما أريد تجنبه.هل هناك شيء يمكنني توصيله من شأنه أن يؤدي إلى اتخاذ إجراء عندما يقوم المستخدم بإغلاق هذه الخلية؟

Answer 1

وكان لي حل لاستخدام محددات مسج الأساسية والأحداث بشكل مستقل عن الشبكة للكشف عن هذا الحدث. I استخدام الأحداث الحية وطمس على مربعات النص في الشبكة لالتقاط الحدث. غير معتمدة الحدثين بالاشتراك مع بعضها البعض، بحيث انتهى هذا الإختراق حتى يتم الحل:

محاكاة "التركيز" و "طمس" في مسج .live ( ) طريقة

Answer 2

بالنسبة للتحرير المباشر، يمكنك إنجاز ذلك بعدة طرق.لربط حدث onblur بحقل الإدخال باستخدام مشغل onSelectRow، مما يلغي الحاجة إلى أزرار التحرير والحفظ، افعل شيئًا مثل هذا:

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

لتطبيق معالج الحدث المباشر jQuery على جميع المدخلات التي قد تظهر داخل صف ما (يقوم jqGrid بتسمية جميع المدخلات باسم RowId_fieldName)، قم بتكرار عدد الصفوف في شبكتك وافعل شيئًا مثل هذا:

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

ملحوظة: لاستخدام التمويه مع .live() كما هو مذكور أعلاه، ستحتاج إلى jQuery 1.4 أو التصحيح الموجود في:محاكاة "التركيز" و"التمويه" في طريقة jQuery .live()

كن حذرًا مع معرفات الصفوف.عندما تبدأ في فرز الصفوف وإضافتها وإزالتها، قد تجد نفسك تكتب بعض jQuery الصعبة لتحويل معرفات الصفوف إلى iRows أو أرقام الصفوف.

إذا كنت مثلي وقمت بتحرير الخلايا الفردية، فستحتاج إلى تعديل مشغل afterEditCell بشيء مثل:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

امل ان يساعد..

Answer 3

وهذا أمر فظيع جدا، ولكن في احملوا على هذه المشكلة، وليس غالبا قليلا أسهل وأكثر عمومية - فإنه يضغط إدخال برمجيا عندما يفقد عنصر التركيز:)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

إضافة هذا الرمز إلى رمز الإعداد jqgrid الخاص بك.

ويفترض أن تم تحرير عنصر آخر هو الشيء الوحيد الذي .edit خلايا بمثابة الدفتيريا الأم.

Answer 4

وأعرف أن هذا السؤال هو قديم ولكن الجواب هو عفا عليها الزمن.

ومتغير عالمي يسمى lastsel يجب إنشاء ويلي تضاف إلى رمز jqGrid

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },

Answer 5

وكان لي نفس المشكلة وحاولت الإجابات أعلاه. في النهاية ذهبت مع الحل الذي يدرج على "أدخل" اضغط على مفتاح عند قيام المستخدم هو ترك علامة التبويب.

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}

Answer 6

بدلا من استخدام حدد الصف يستخدم تحديد الخلية.

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }

//saveDataFromTable() هي الوظيفة التي تتحقق من صحة بياناتي.